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.
ÍNDICE CÓMO AÑADIR UN CHAT EN 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.
Configuración Ajustes generales Chat en página web
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.
Mostrar u ocultar avatar (imagen) y nombre en los mensajes del chat
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.
Mostrar fecha y hora junto a cada mensaje instantaneo del 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.
Cambiar colores en la ventana 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.
Gestión del chat en WordPress / comerciales
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”.
Gestión de chats
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.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola ! gracias por tu explicacion !!
Yo necesito un chat para que puedan escribir todos los visitantes de la web al mismo tiempo y que se lean entre si (algo similar al chat de Youtube cuando hay una transmision en vivo, esto es posible ?
Saludos y desde ya, muchas gracias por tu aporte
Buenas.
Echa un vistazo a estos dos plugins de chat para una comunidad en wordpress: iFlyChat – WordPress Chat y a esteFlyzoo Chat
Creo que estos plugins de wordpress permiten crear salas de chat para los visitantes
muchas gracias, pude configurarlo rápido y mejor por que nos pasaste las traducciones de los textos
Buenas.
Me alegro que te haya sido de interés este post sobre chats online en WordPress
Un saludo
Hola. Muy buena explicación y justo andaba buscando uno para poner. En mi caso me piden que su es posible el chat se traduzca. No sé cómo hacerlo. Por ejemplo activando translate de google el usuario si recibe el texto traducido si contesto pero no de usuario a administrador.
Buenas,
No te piden «na». Yo creo que aún no hay ningún plugin de chat que también realice traducción simultanea
***Me gustaría también, si puedes, que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes + ¡¡SOPORTE!!. En la plataforma tienes cursos sobre WordPress, Cursos sobreDivi, Astra Pro, Elementor, Flatsome, Cursos sobre Woocommerce, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.****
Hola Joaquin
Gracias por este blog, soy nuevo con wordpress y la verdad me ha gustado, ahora voy a probar lo del chat, pero tengo una inquietud, se puede crear una cuenta con privilegios para la persona que debe estar pendiente del chat?, esto por seguridad y que de pronto un error humano no termine por dañar la pagina.
Hola Germán.
Deberá ser un usuario tipo Administrador
Muchisimas gracias por este artículo, me ha ayudado a configurarlo y saber porque siempre me salia offline.
¡Hola! En primer lugar mi enhorabuena por el tutorial tan fácil y práctico que nos ofreces. Tengo sólo una duda, cuando intento poner avatar para el chat, me aparece que tengo que instalarme la versión pro…¿es recomendable? ¡Gracias!
Hola Laura.
La imagen asociada en Gravatar con el email del administrador que gestiona el chat se muestra automáticamente.
No se a qué te refieres.
¿qué es lo que quieres hacer exactamente?
infinitamente agradecida, Me encanto la información,
lo lei completo y considero que esto que se comenta es util de
manera profesional y también de manera personal. infinitamente agradecida!
Gracias Joaquin, muy bien explicado. De hecho he realizado todos tus pasos según tus indicaciones y el problema que tengo es que el mensaje en la web aparece como «comenzar chat», introduces el mail pero no deja al hacer click comenzar el chat. Debo estar haciendo algo mal o debe ser una tonteria pero llevo invertidas horas y no localizo el problema. Sabrias decirme que puede ser? Mil gracias.
Hola Silvia.
No se cual puede ser la razón. Creo que lo mejor es que lo consutles en el soprote del plugin: Soporte WP Live Chat
si quisiera poner un enlace al chat dentro del sitio, cómo lo puedo hacer.
Por ejemplo, como una forma de contacto
Buenas,
Que yo sepa, no hay opción para mostrar el chat a través de un enlace, pero puedes consultarlo en el foro de soporte del plugin a ver si es posible de alguna manera: Soporte WP Live Chat Support
hola muy buen post me sirvió mucho
una consulta hay partes del chat en la vista del usuario que salen en ingles como por ejemplo en la parte donde se escribe el mensaje, dice «Type here» que significa escribe aqui. exisite alguna manera de cambiarlo a español en el plugin xq he buscado pero no encuentro.. muchas gracias !
Buenas,
En el caso de existir opciones no disponibles de traducción en cualquier plugin de WordPress es necesario realizar las mismas a través de un plugin de traducciones: Por ejemplo, Loco Translate
Interesante, muchas gracias, también está la opción de usar TIdio, un chat gratuito y con aplicación móvil para responder desde el celular. Les dejo un artículo donde se explica: https://www.tutopress.co/blog/como-agregar-un-chat-de-soporte-gratuito-en-wordpress/
Excelente post. Muy interesante y útil la información. Felicidades y muchas gracias, Joaquín!
Hola Gonzalo,
Me alegro que te haya gustado el post sobre chat wordpress.
Un saludo
¡Hola! gracias, me ha encantado tu artículo muy completo como todos los que publicas, te sigo desde Bogotá Colombia.
Gracias Guillermo,
Colombia es ya el tercer país en número de visitas a este sitio web, después de España y México.
Un saludo desde Murcia (España)
buenos dias:
muy interesante el tema donde se puede aquirir.
Hola Carlos,
El plugin Wp Live Chat Support es gratuito. En el apartado 2 del post puedes ver cómo se puede instalar en WordPress.
En cualquier caso, el plugin lo tienes en el respositorio de WordPress-> WP Live Chat Support
Hola Joaquín, muy útil el post. Tengo dos cuestiones
1.- ¿Esta herramienta guarda el histórico de chats que hemos mantenido con los clientes?
2.- ¿Cumple o se puede configurar para cumplir el RGPD? Lo digo porque si pedimos el nombre y el correo electrónico….
Hola Miguel,
Gracias por tus palabras.
1.- Aunque no lo he probado, en las características de la versión gratuita del plugin, que puedes ver en Plugin Live Chat Support, da como una de las características: «Access historical live chat records» que significa: «Acceso al histórico de chats guardados»
2.- Por el momento incluye un texto de aviso sobre la RGPD y el checkbox de aceptación (justo debajo del formulario). Por el momento no parece posible editar ese texto, pero es posible que en próximas actualizaciones si sea posible.
Las opciones de privacidad las tenemos en: «Chat en directo > Privacy». Aquí podemos seleccionar si activamos o desactivamos el aviso de la RGPD y el número de días que se almacenarán los datos del chat.