Cómo añadir y configurar un chat online en una web wordpress

Los servicios de atención al cliente, soporte y contacto a través de chat en las páginas web en general y tiendas online en particular están de moda. No podemos negarlo.

Aunque es cierto que el servicio de atención al cliente a través de chat online está muy extendido en tiendas online, he decidido escribir este post en horizonweb.es en vez de en tiendaonlinemurcia.es, debido a que este tipo de servicio de chat se puede aplicar a cualquier tipo de página web y no solo a tiendas online.

En este post vamos a ver cómo instalar y configurar un chat gratuito en una página web realizada con WordPress.

 

 

 

 

1.- Elegir un plugin gratuito de chat para WordPress

 

Me he decantado por utilizar el plugin WP Live Chat Support para añadir un servicio de chat online en WordPress. He barajado otras opciones como: Tawk To Live Chat y Zendesk Chat.

Finalmente he decidido crear este post con WP Live Chat Support, por las siguientes razones:

 

i.- Número de instalaciones: es importante instalar un plugin para live chat que esté probado por una gran cantidad de usuarios, para intentar evitar problemas no detectados en el plugin. WP Live chat support tiene en el momento de escribir este post más de 50.000 instalaciones activas. Aunque había algunos plugins con más instalaciones activas, no he encontrado ningúno más actualizado.

ii.- Actualizaciones: en el momento de escribir este post, entre los plugins de chat con gran número de instalaciones, solo he encontrado WP Live Chat Support que haya sido actualizado recientemente (otros llevan más de 8 meses sin actualizarse) y sea además, compatible con la última versión de WordPress

iii.- Plugin Fremium: este tipo de plugins tienen una versión gratuita, que es la que vamos a utilizar. Pero disponer además de una versión de pago es bueno para confiar en el futuro del plugin y también para poder profesionalizar más nuestros servicios en un futuro con nuevas funcionalidades premium.

 

 

2.- Instalar plugin WP Live Chat Support en WordPress

 

Puedes instalar este plugin de la misma forma que se instala cualquier otro plugin gratuito disponible en el repositorio de wordpress.org

Solo tendrás que ir a: “Plugins > Añadir nuevo”, buscar en la barra de búsqueda el plugin “wp live chat support” y hacer clic en el botón: “Instalar”. A continuación, haz clic en “Activar”.

 

 

3.- Configurar el plugin de chat online en WordPress WP Live Chat Support

 

Una vez instalado y activado el plugin de chat para WordPress, verás que te aparece un nuevo elemento en el menú lateral de la administración de WordPress denominado: “Chat en directo”.

Verás también que dentro de “Chat en directo” hay una subcategoría en el menú denominada: “Ajustes”. Pues bien, es ahí donde se encuentras todas las opciones de configuración.

Una vez accedas a: “Chat en directo > Ajustes” verás un menú lateral en el que se clasifican todas las opciones de configuración del plugin de chat online.

Vamos a ir viendo las opciones de configuración más importantes.

 

 

3.1.- Opciones generales de configuración del chat online (campos del chat)

 

Dentro de “Chat en directo > Ajustes” verás que la primera pestaña del lateral izquierdo se corresponde con la opción: “Ajustes Generales”. Pues bien, comenzaremos con las opciones de configuración más importantes de este apartado.

 

i.- Chat activado: si marcamos la opción “SI” el servicio de chat online en WordPress quedará activo y por tanto se mostrará a los visitantes de la web. Si marcamos “NO” el chat quedará desactivado.

 

ii.- Required Chat Box Fields: aquí seleccionaremos los campos de deberán rellenar los visitantes de la web antes de comenzar a chatear. Tenemos las siguientes opciones:

Name and email: el visitante deberá indicar su nombre y email antes de utilizar el chat

Correo electrónico: el visitante deberá indicar su email antes de utilizar el chat

Nombre: el visitante deberá indicar su nombre antes de utilizar el chat

No fields (sin campos): el visitante no deberá indicar ningún dato antes de utilizar el chat. En principio yo me voy a quedar con la última opción (No Fields), pero vosotros podéis elegir la opción que creáis más conveniente para vuestro negocio.

 

iii.- Default visitor Name: nombre por defecto que se mostrará de los visitantes no identificados. La traducción de “guest” la podemos cambiar por: “invitado”.

 

iv.- Texto de reemplazo para los campos anteriores: cuando no sea necesario introducir ningún dato para comenzar el chat, como ocurría si elegíamos la opción: “No fields”, nos aparecerá el texto: “Please click ‘Start Chat’ to initiate a chat with an agent” que podemos modificar por: “Por favor, haga clic en ‘Comenzar Chat’ para iniciar el chat con un comercial” (luego traduciremos el texto ‘Star Chat’ en otro apartado)

 

v.- Activar en dispositivos móviles: si marcamos esta opción el chat se mostrará cuando alguien visite la web a través de un móvil. En caso contrario, no se mostrará.

 

vi.- Play a sound when a new message is recived: si marcamos esta opción, escucharemos un sonido desde la administración de wordpress cuando recibamos un nuevo mensaje a través del chat.

 

 

 

3.2.- Diseño y localización del Chat online

 

Vamos a ver ahora las opciones de que dispone este plugin de chat online en cuanto a la posición y diseño. Continuamos en los ajustes de configuración del chat: “Chat en directo > Ajustes”.

 

Vamos a ver ahora la opción de menú: “Recuadro del chat”, donde tenemos las siguientes opciones interesantes:

i.- Alineación del recuadro de chat: aquí podremos seleccionar el lugar de la página en la cual queremos que se muestre la ventana de chat. Podremos elegir entre: inferior izquierda, inferior derecha, izquierda y derecha. La posición inferior izquierda es la más habitual para colocar la ventana de chat.

 

ii.-Ventana emergente automática: cuando accedemos a una página de la web, se muestra un icono de chat formado por un cuadro de diálogo en el interior de un círculo (depende del tema de chat elegido, que veremos más adelante). Si el visitante hace clic sobre el icono se muestra la ventana de chat.

Pues bien, si marcamos esta opción la ventana de chat aparecerá automáticamente sin la necesidad de que el visitante haga clic en el icono del chat.

 

iii.- Display details in chat message: aquí podemos marcar las opciones “Show name” (mostrar nombre) y “Show Avatar” (mostrar avatar).

Pues bien, estas opciones sirven para mostrar u ocultar el nombre y avatar del cuadro de diálogo en el que se envían los mensajes instantáneos.

 

 

En la imagen anterior puedes ver cómo en los diálogos se muestran los avatares (imágenes de cada usuario) y los nombres asignados. Si desmarcamos estas opciones, no se mostrarían.

 

iv.- Display a timestamp in the chat Window: desde aquí podemos seleccionar si queremos que se muestre o no, la fecha y hora justo bajo cada uno de los comentarios que se realizan en el chat.

 

 

iv.- Redirect user to thank you page when chat is ended: desde aquí podemos, opcionalmente, indicar una url a la que se redirigirá al visitante cuando finalice el uso del chat. Si no marcamos el check box no habrá ninguna redirección.

 

Ahora en el menú lateral, vamos a ver la pestaña: “Estilo”.

 

i.- Elija un tema: aquí podemos elegir entre dos diseños diferentes para el chat. Podemos elegir el diseño “Classic” o el diseño “Modern” que es el que viene seleccionado por defecto.

 

ii.- Color Sheme: desde este apartado podremos elegir una composición de colores predefinida para el chat o personalizar los colores manualmente.

Diseño predefinido: para seleccionar uno de los diseños predefinidos para el chat, simplemente haz clic sobre y el luego guarda abajo del todo.

Elegir colores personalizados: Si quieres personalizar los colores del chat seleccionar el recuadro que pone: “Choose your color bellow”. A continuación, seleccionar y personalizar los colores en:

Palette color 1: color de fondo parte superior (solapa) del chat y bloques de diálogo del cliente.

Palette color 2: color de los textos en el interior de los lugares con el color de fondo establecido en Palette color 1. Habitualmente, blanco.

Palette color 4: color de fondo de los bloques de chat cuando contesta el vendedor.

Chat background: este selector está situado justo encima de la opción Palette color 1 y nos permite cambiar el diseño del fondo del chat.

 

 

Nota: he probado, pero no he encontrado con qué se corresponde el color Palette color 3.

 

Animaciones Chat:

 

En la parte inferior también tienes 3 posibles animaciones de entrada para mostrar el Chat: Deslizar hacia arriba, Deslizar desde un lado y Fundido de entrada.

 

 

3.3.- Traducción de palabras del chat al español

 

Para acceder a las traducciones seguimos en: “Chat en directo > Ajustes”. En la parte inferior del apartado de menú: “Estilo” tenemos las diferentes posibles traducciones de palabras que se muestran en el chat (sin contar las traducciones de la mensajería offline, que veremos en el siguiente apartado). Recuerda que también teníamos alguna traducción en el apartado: “Ajustes generales” del menú lateral.

Voy a ponerte a continuación los diferentes textos que se pueden traducir y una traducción adecuada para cada texto:

 

i.- Texto de la primera sección:

Questions? = Consúltenos!

Chat with us = vía chat

 

ii.- Texto de introducción:

Hello. Please input your details so that i may help you = Por favor, rellena los siguientes datos para comenzar el chat.

 

iii.- Texto de la segunda sección:

Star Chat = Empezar Chat

Connecting. Please be patient… = Conectando. Por favor, se paciente …

 

iv.- Reactivar la sección de texto del chat:

Reactivating your previous chat… = Recuperando el chat anterior …

 

v.- Welcome message

Please, standby for an agent. While you wait for the agent you may type your message = Por favor, espere a que un comercial esté disponible. Mientras espera puede escribir su mensaje

 

vi.- No answer:

There is No Answer. Please Try Again Later = No hay contestación. Por favor, inténtelo más tarde.

 

vii.- Otro texto:

Press ENTER to send your message = Pulsar ENTER / INTRO para enviar el mensaje.

The chat has been ended by the operator. = El comercial ha finalizado este chat.

 

 

3.4.- Enviar email cuando el Chat está desactivado (Mensajes offline)

 

Cuando no hay ningún agente o comercial que haya iniciado sesión en WordPress tenemos dos opciones:

 

i.- Que no aparezca el chat: no se mostraría el chat mientras no iniciemos sesión en la administración de WordPress

ii.- Dar la opción de enviar un email: No aparecería el chat, pero si un bloque que permitiría al visitante rellenar un formulario para realizar su consulta, cuando no hayamos iniciado sesión en la administración de wordpress.

 

Para la gestión de los mensajes offline iremos a: “Chat en directo > Ajustes > Mensajes offline”:

i.- No permitir a los usuarios enviar mensajes offline: si marcamos esta opción el chat no se mostrará cuando no hayamos iniciado sesión como administradores y no será posible enviar mensajes offline. Si no marcamos esta opción, cuando no hayamos iniciado sesión cómo administradores será posible que los visitantes envíen un email rellenando el formulario.

 

ii.- Traducciones: en los siguientes campos tenemos una serie de traducciones de frases relacionadas con el chat offline.

Chat offline. Leave a message = Chat fuera de servicio. Dejar un mensaje

We are currently offline. Please leave a message and we’ll get back to you shortly. = En este momento estamos fuera de servicio. Por favor, deja un mensaje, pronto le contestaremos.

Sending message … = Enviando mensaje …

Thank you for your message. We will be in contact soon. = Gracias por su mensaje. Le contestaremos muy pronto.

Leave a message = Escribir mensaje

Send message = Enviar mensaje

 

iii.- Configurar mensajes: Debajo tenemos un apartado denominado: “Email settings” en el cual aportaremos diferentes datos de configuración de estos mensajes offline.

Dirección de correo electrónico: pondremos el email en el que recibiremos los mensajes que escriban los clientes cuando el chat está desactivado (mensajes offline)

Subject: aquí pondremos el texto que queremos que aparezca en el asunto de estos emails o mensajes offline. Por ejemplo, podemos poner: “Mensaje del chat de la web: mipaginaweb.es”

 

 

4.- Cómo usar el servicio de chat del plugin en WordPress

 

Nosotros, como vendedores, gestionaremos el chat desde: “Chat en directo > Chat en directo”. Para que el chat esté operativo es imprescindible que hayamos iniciado sesión en wordpress.

 

i.- Aceptar Chat: Cuando algún cliente abra un chat, nos aparecerá reflejado en la administración del chat y oiremos un pitido de aviso.

Tendremos que hacer clic en el botón rojo: “Accept Chat” para comenzar el chat con el cliente.

 

 

En el lateral izquierdo nos aparecerán los diferentes clientes que están activos en el chat. Si hacemos clic sobre uno de los clientes, se abrirá ese chat.

En el derecho nos aparecerá una lista con los diferentes chats (activos y finalizados). Tenemos en la parte derecha superior un filtro (botón Filters) que nos permite mostrar solo los chats que están activos en este momento.

 

ii.- Enviar mensajes: una vez aceptado el chat, podremos comenzar a enviar mensajes al cliente y recibir los de éste.

Escribiremos el mensaje que queramos enviar al cliente escribiendo en el campo con el texto: “Type here” y pulsando “Enter”.

 

 

iii.- Finalizar chat: haz clic en el botón negro con tres rayas horizontales que aparece en la parte superior derecha y elige la opción: “Finalizar Chat” para cerrar un Chat con un cliente.