WebChat le permite ofrecer atención directamente en el sitio web de su empresa mediante un widget personalizado que facilita la conexión con los visitantes. Este canal es ideal para soporte, atención comercial y automatización mediante chatbot. Para acceder a él, vaya a Configuración > Canales > WebChat.
¿Por qué utilizar WebChat?
Con el canal activo, puede:
Automatizar interacciones con chatbots
Cree flujos automatizados para responder preguntas frecuentes, calificar leads o redirigir a los usuarios a la atención humana.
Ejemplo: Un cliente accede a su sitio web fuera del horario comercial y recibe automáticamente un menú de opciones para obtener información sobre productos o registrar una solicitud.Ofrecer atención de soporte
Atienda a los clientes que buscan ayuda directamente en su sitio web, de forma rápida y organizada.
Ejemplo: Un cliente accede a la página de preguntas frecuentes y, al no encontrar la respuesta que busca, inicia un chat con el equipo de soporte para resolver el problema.Realizar atención comercial
Utilice WebChat para captar leads y guiarlos hasta la conversión.
Ejemplo: Un cliente entra en el sitio web interesado en comprar un producto. WebChat comienza con un mensaje de bienvenida y ofrece un botón “Ver promociones”. El cliente hace clic, interactúa con el chatbot, consulta el catálogo y, posteriormente, es transferido a un agente comercial que finaliza la venta.
Con el canal activo es posible:
Configurar apariencia y estilo
En esta etapa, es posible configurar la apariencia, los colores, las imágenes, las dimensiones y el estilo visual de la ventana de WebChat.
La pantalla está dividida en tres etapas:
1. Nombre del chat
Introduzca el nombre que se utilizará para identificar el chat.
2. Colores y Avatar
La sección Colores y Avatar permite personalizar la identidad visual de WebChat.
Color principal: Define el color principal utilizado en la interfaz de WebChat. Introduzca o seleccione el código hexadecimal del color deseado.
Aplicar color principal al encabezado: Cuando está habilitada, el color principal configurado también se aplicará al encabezado de la ventana de WebChat.
Color del botón flotante: Define el color del botón flotante utilizado para abrir WebChat.
Logotipo: El campo Logotipo permite añadir una imagen para representar la marca o el servicio en WebChat. Para añadirlo:
Haga clic en Elegir archivo.
Seleccione la imagen deseada en su dispositivo.
Verifique el archivo seleccionado en el campo de carga. Tamaño máximo: 42 × 42 px.
Avatar: El campo Avatar permite definir la imagen utilizada para representar al agente, asistente o representante de WebChat. Para añadirla:
Haga clic en Elegir archivo.
Seleccione la imagen deseada.
Confirme que la imagen se haya cargado correctamente. Tamaño máximo: 42 × 42 px.
3. Dimensiones
La sección Dimensiones permite definir el tamaño de la ventana de conversación y sus espacios.
Dimensiones personalizadas: Utilice el botón de activación Dimensiones personalizadas para habilitar la configuración manual de las dimensiones.
Ancho: Define el ancho de la ventana de conversación. Ejemplo: 400 px.
Alto: Define la altura de la ventana de conversación.
Las unidades disponibles se muestran junto a los campos y, en el ejemplo presentado, están configuradas como px (píxeles).
Espaciado: Es posible configurar el espacio entre la ventana de WebChat y los bordes de la pantalla.
Margen inferior: Define la distancia entre la parte inferior de la ventana y el borde inferior de la pantalla. Ejemplo: 16 px.
Margen derecho: Define la distancia entre el lado derecho de la ventana y el borde derecho de la pantalla. Ejemplo: 40 px.
Personalización mediante CSS: La opción Personalizar mediante CSS permite aplicar reglas CSS para modificar la apariencia de la ventana de WebChat.
Para utilizar este recurso, active la opción Personalizar mediante CSS e introduzca las propiedades deseadas en el campo Editar CSS.
La pantalla también proporciona un enlace a la documentación, que puede consultarse para comprobar qué elementos se pueden personalizar.
Ejemplo de CSS
Ex h1 {
font-size: 11px;
color: #000;
}
Atención: Los cambios realizados mediante CSS pueden modificar la apariencia predeterminada de WebChat. Utilice reglas compatibles con los elementos disponibles en la documentación.
Después, haga clic en Siguiente.
2. Mensaje inicial
La opción Mensaje de bienvenida permite definir un mensaje que se mostrará al usuario al inicio de la conversación.
Respuestas rápidas
La opción Respuestas rápidas permite ofrecer opciones preconfiguradas para que el usuario pueda iniciar una interacción rápidamente.
Texto: Introduzca el texto que se mostrará en el botón de respuesta rápida. Este texto corresponde a la opción que el usuario visualizará y podrá seleccionar.
Payload: El campo Payload permite introducir un valor adicional asociado a la respuesta rápida. El payload puede utilizarse para transmitir información específica al sistema cuando se selecciona la respuesta rápida.
Añadir respuesta rápida: Para crear más opciones de respuestas rápidas, haga clic en Añadir respuesta +. Cada respuesta añadida puede tener su propio Texto y, opcionalmente, un Payload.
Añadir contenido multimedia: La opción Añadir contenido multimedia permite configurar contenido multimedia en el mensaje inicial. Para configurar esta función:
Marque la casilla Añadir contenido multimedia.
Expanda la sección utilizando la flecha de la derecha.
Complete la información solicitada. Se aceptan archivos PNG, JPG, SVG o GIF (máx. 42 × 42 px).
Botones (CTA)
La sección Botones (CTA) permite configurar botones de llamada a la acción (Call to Action). Los botones pueden utilizarse para presentar acciones específicas al usuario directamente en la interfaz inicial. Para configurarlos:
Marque Botones (CTA).
Haga clic en la flecha para expandir la sección.
Configure los campos disponibles.
Tarjeta
La opción Tarjeta permite configurar un componente visual en formato de tarjeta para presentar información al usuario. Para utilizarla:
Marque la opción Tarjeta.
Expanda la sección mediante la flecha situada a la derecha.
Complete la información solicitada.
La tarjeta puede utilizarse para organizar información y acciones dentro de un componente visual propio.
Carrusel
La opción Carrusel permite presentar varios elementos en secuencia, organizados en tarjetas que el usuario puede recorrer. Para configurarlo:
Marque la opción Carrusel.
Expanda la sección haciendo clic en la flecha.
Configure los elementos que se mostrarán en el carrusel.
Este recurso es adecuado para situaciones en las que sea necesario presentar más de una opción al usuario.
A continuación, haga clic en Siguiente paso.
3. Comportamiento
Esta es la última etapa.
1. Guardar historial de la conversación
Cuando está habilitada, esta opción permite conservar el historial de la conversación. El cliente podrá continuar la conversación desde donde la dejó si vuelve al sitio web utilizando el mismo navegador y dispositivo. Esta opción está indicada cuando se desea permitir que el usuario retome una conversación anterior sin tener que iniciar una nueva interacción al regresar al sitio web.
3. Notificaciones de sonido
Cuando está habilitada, WebChat emite un sonido cada vez que el cliente recibe un nuevo mensaje. Según la descripción: emite un sonido al cliente por cada nuevo mensaje recibido. El usuario también podrá silenciar el chat directamente desde la ventana.
4. Compartir contexto de pantalla para análisis de IA
Esta configuración permite que la Inteligencia Artificial reciba información sobre los elementos presentes en la página actual para ayudar en el análisis del contexto de la interacción. Según la descripción presentada en pantalla, al habilitar esta opción:
La IA puede recibir información sobre elementos específicos de la página.
El recurso permite obtener información más precisa y contextualizada.
La IA puede utilizar elementos como etiquetas, IDs o clases HTML.
El contexto puede utilizarse para comprender mejor el escenario en tiempo real.
El recurso utiliza únicamente la información que haya sido autorizada.
Por último, haga clic en Crear WebChat y ¡listo! Su WebChat ha sido creado.
Recuerde que ahora es posible grabar audio. Además, WebChat ofrece una experiencia fluida con WhatsApp, permitiendo pasar de una aplicación a otra sin cerrar la otra.
Finalizando la configuración
Después de completar todos los pasos, haga clic en Guardar.
Todos los WebChats creados quedarán guardados en la pantalla principal del canal, en una lista con:
Título de la página;
ID de WebChat;
Fecha de creación;
Última actualización;
Atención asignada;
Acciones disponibles.
Próximos pasos
Para la atención comercial: Asignar atención
Seleccione el agente o grupo responsable de la atención para que todos los mensajes que lleguen por este canal sean atendidos por la persona o el equipo responsable. Obtenga más información en Asignar atención de la cuenta.
Configurar embed
Puede añadir WebChat a su sitio web de dos maneras diferentes:
Snippet: copie los códigos generados para incorporar WebChat directamente en el HTML de su sitio web.
Enlace: copie la URL directa de WebChat, útil para abrir el chat en una nueva pestaña o redirigir a los usuarios desde un botón, por ejemplo.
Obtenga más información en Cómo publicar su flujo de WebChat.