Chat Web (Omni-Channel)
Con el widget de Chat Web, puedes agregar un chatbot a cualquier sitio web sin depender de ningún otro canal. Esto ayuda a desbloquear el poder del marketing conversacional sin las desventajas o restricciones que otros canales pueden tener.
Para acceder al Widget de Chat Web, necesitas crear un chatbot Omni-Channel. Ten en cuenta que el Chat Web solo está disponible en Omni-Channel.
Si aún no has creado el Omni-Channel, usa el botón “Configuración de Omni-Channel” para crearlo, como en la imagen a continuación:
Al crear el Omni-Channel, dale un nombre; luego verás la pantalla a continuación:
Puedes crear un canal nuevo o convertir un canal existente en Omni-Channel.
Después de crear el Omni-Channel, encontrarás el Widget de Chat Web en la barra lateral izquierda.
Una vez que localices tu widget, presiona el ícono de lápiz a su derecha para editar y personalizar el Widget de Chat Web como prefieras.
Al presionar, entras en la vista general de las configuraciones disponibles;
La primera sección del widget es la pestaña Contenido. Allí encontrarás las siguientes opciones;
- Burbuja de chat
- Encabezado del chat
- Botón de Conversa
- Mensaje de Bienvenida
- Mensaje de ausencia temporal
- Formulario Pre-Chat
- Flujo Inicial Predeterminado
Vamos a analizarlos 1 por 1.
En la Burbuja de chat, seleccionas el ícono de burbuja que prefieras. La elección aparece de inmediato en la vista previa en la esquina inferior derecha;
En las opciones de la parte superior de esta pantalla, también puedes elegir entre mostrar solo el ícono o combinarlo con texto.
Con el Botón de Conversa, creas tus propios botones de call to action (CTA) para permitir que los usuarios inicien, continúen o comiencen una nueva conversación;
Puedes agregar un título y un slogan de bienvenida para incentivar a las personas a hacer clic en tu Widget de Chat Web.
Con el mensaje de ausencia temporal, agregas un aviso a tu widget. También es posible definir el mensaje de respuesta;
Con esta configuración, capturas datos esenciales antes de que el chat comience y los guardas en cualquier campo del sistema o campo personalizado de contacto disponible.
Primero tienes el encabezado del formulario, donde puedes indicar su finalidad. Luego, inserta un campo presionando el botón + Añadir Campo.
Luego podrás seleccionar cualquiera de los siguientes tipos de campo;
Después de seleccionar el tipo, puedes editarlo presionando el botón editar;
Al editar cualquiera de los campos, tendrás varias opciones para elegir. Usemos un campo de tipo e-mail como ejemplo;
Primero, seleccionas el campo del sistema o el campo personalizado de contacto en el que quieres guardar el valor informado por el usuario. Luego, defines el nombre de la etiqueta del campo del formulario. En el texto de ejemplo, das un ejemplo del formato en el que te gustaría recibir el e-mail. La sección de consejos permite ofrecer información adicional sobre este tipo de campo.
Las dos últimas opciones determinan si el campo es obligatorio y qué ancho tendrá. El resultado queda así;
Después de editar el campo como quieres, presiona el botón Listo en la parte superior para guardar los cambios.
Por último, debajo de los campos, tienes una opción adicional para permitir que el usuario escriba un mensaje antes de entrar en el chatbot;
Para el usuario, la vista previa en vivo se ve así;
Este mensaje se guarda en el campo del sistema llamado {{última entrada de texto}}.
Si el Formulario Pre-Chat no está activado, deberás definir un flujo inicial predeterminado de tu elección;
Al presionar, podrás seleccionar cualquiera de los flujos creados anteriormente;
En el Chat Web, puedes configurar el widget para eliminar la necesidad de hacer clic en el botón que inicia la conversación.
Para eso, necesitas:
- Asegurarte de no seleccionar otros canales en el Widget de Chat Web.
- Asegurarte de que el Flujo Inicial Predeterminado esté conectado.
Encuentras las configuraciones de tu canal conectado aquí:
Asegúrate también de que el flujo inicial esté conectado a alguno de tus flujos.
Después de hacer los cambios, aplícalos, instala el código y prueba en tu sitio web.
Ahora ya no necesitas hacer clic en el botón para iniciar la conversación.
Puedes configurar mensajes de saludo diferentes en páginas diferentes de tu sitio web.
Aparece para el usuario que accede por primera vez,
Y las configuraciones del mensaje de saludo están aquí:
Puedes definir en qué página o páginas quieres activar el mensaje de saludo y también configurar el nombre y el perfil del remitente.
Mira el video a continuación para más detalles:
En la pestaña de configuración, tienes las siguientes opciones para personalizar;
- Idioma
- Sonido de Notificación
- Características
- Dominio en la lista de permitidos
Vamos a examinar cada configuración en detalle.
Con la configuración de idioma, cambias el idioma de visualización de algunas secciones del widget;
Solo selecciona el idioma en el lado izquierdo para ver los cambios reflejados en la vista previa a la derecha, al instante.
Con esta opción, defines el sonido de las notificaciones de mensajes nuevos que tus usuarios escucharán mientras conversan con tu Widget de Chat Web.
Puedes elegir entre 21 sonidos u optar por ningún sonido, si lo prefieres.
Con esta opción, activas o desactivas determinadas características dentro de tu widget;
Tienes acceso a las siguientes opciones;
- Permitir selector de emojis -› permite que los usuarios elijan emojis predefinidos
- Permitir Envío de Anexos -› permite que los usuarios envíen documentos, imágenes y/o videos
- Permitir que los usuarios finalicen el chat -› esta opción permite que el usuario cierre la conversación
- Permitir Ventana de Chat en Pop-up -› permite que los usuarios conviertan el widget de chat en un pop-up, lo que resulta en una visualización más grande del chat
- Permitir Continuar Chat en Móvil -› los usuarios pueden escanear un código QR para continuar la conversación en el teléfono. Es una experiencia fluida para quien empieza en la computadora y quiere continuar la conversación con tu empresa en movimiento
Para mostrar el widget en tu sitio web, necesitas agregar tu dominio a la lista de permitidos. Basta con agregar el dominio raíz: todos los subdominios que tengas serán reconocidos automáticamente;
Con estas opciones, personalizas tu Chat Web para combinar con los colores y las preferencias de tu marca;
Tienes las siguientes opciones para elegir;
- Tema
- Fuente
- Colores
- Botón de Iniciar Chat
Con los temas, personalizas la apariencia de tu Widget de Chat Web con valores predefinidos;
Tienes los siguientes temas a disposición:
- Predeterminado
- Plano
Lo mejor de estos temas es que dan una apariencia con la que los usuarios ya están familiarizados, como la de Messenger o la de WhatsApp. Estos temas crean una experiencia de chat similar dentro del propio sitio web.
Como puedes ver, la experiencia hace que el usuario se sienta en casa al iniciar una conversación con tu empresa, porque es muy parecida a lo que ya conoce.
Con las fuentes, cambias completamente la apariencia del Widget de Chat Web, combinándolo con tu propia marca o creando una experiencia realmente única.
Actualmente puedes elegir entre 25 fuentes para darle al Widget de Chat Web tu propia cara.
Con esta opción, cambias la paleta de colores de tu Widget de Chat Web
Puedes personalizar las siguientes secciones:
- Color del Widget
- Color del Ícono y Texto de la Burbuja
- Color del Botón de Iniciar Chat
- Color de Fondo del Encabezado
- Color de Fondo del Cuerpo
Con esta opción, cambias el radio del borde del botón “iniciar conversación”;
También puedes elegir la opción personalizada para definir tu propio radio. Esto ayuda a mantener todo en sintonía con los botones de tu sitio web, por ejemplo.
La opción de estilo de visualización ofrece varias maneras de usar el Chat Web en tu sitio web. Veamos las diferentes opciones;
Tenemos 3 secciones principales que puedes personalizar:
- Estilo
- Diseño
- Código de Instalación
Tienes 4 estilos diferentes para elegir cómo quieres usar el canal de Chat Web en tu sitio web.
- Modal Flotante -› muestra el ícono de chat en vivo en la parte inferior de tu página
- Página Completa -› permite incorporar el widget de chat como una página completa
- Ventana de Chat Incrustada -› permite mostrar la ventana de chat en cualquier lugar de tu página
- Popup Modal -› permite abrir una ventana pop-up con la conversación con tu chatbot. Cualquier elemento de tu página puede ser el disparador, siempre que le apliques una clase.
La mejor parte es que, en un mismo sitio web, puedes instalar estilos diferentes de Chat Web en páginas diferentes.
Mira este video para más detalles:
En la pestaña Diseño, defines las configuraciones del widget de conversación para el estilo de widget seleccionado. A continuación, un ejemplo de la opción de ventana de chat incrustada;
El Código de Instalación genera el script del estilo de widget de chat que quieres colocar en tu página;
El Código de Instalación cambia según el estilo de widget seleccionado.
A continuación, un ejemplo de la ventana de chat incrustada;
Existen muchas personalizaciones que puedes hacer en el botón de Chat Web. Algunas son un poco más avanzadas, por eso vamos a reunirlas en esta sección.
Con el Widget de Chat Web, puedes instalar cuantos tipos quieras en cualquier página dentro de tu dominio.
Después de generar el tipo de widget deseado, puedes agregarle un parámetro ref. Esto permite iniciar con facilidad cualquier flujo de tu preferencia.
Para eso, crea cualquier tipo de URL de Referencia en la sección Herramientas;
Al crear tu URL de Referencia, ya la habrás conectado al flujo de tu preferencia. Ahora puedes usar esa URL de Referencia copiando el parámetro ref;
Ahora que creaste tu URL de Referencia y copiaste el parámetro ref, es hora de agregarlo al script de instalación del Chat Web.
Es muy fácil hacerlo;
Si ya pegaste el script de instalación del Chat Web, basta con agregar un signo de interrogación después de .js, agregar ref= y luego pegar el parámetro ref copiado de la URL de Referencia que creaste.
Esto reemplaza el flujo inicial predeterminado existente y permite iniciar el flujo de tu preferencia.
Esto abre camino para usar el mismo widget en páginas diferentes, pero con flujos iniciales diferentes.
Algunos casos de uso;
- Una página de aterrizaje requiere un flujo de ventas específico
- El soporte al cliente comienza con un flujo de soporte
¡Pero se pone aún mejor!
Como estás usando el parámetro ref de la URL, también puedes agregar cargas útiles al widget.
Las cargas útiles ayudan a registrar datos específicos directamente en los campos personalizados del contacto, sin que el usuario tenga que informarlos. Un ejemplo: quieres saber de qué sección del sitio web vino el usuario. Si vino de una página de aterrizaje, puedes registrar eso en el widget como una carga a guardar en el perfil del contacto.
Para agregar una carga útil, necesitamos volver a la URL de Referencia que usamos dentro del Widget de Chat Web.
Allí, puedes agregar hasta 10 cargas útiles para usar directamente en el perfil del contacto;
Veamos el ejemplo de registrar el origen del usuario, es decir, la página de tu sitio web de donde vino.
En la primera línea de carga útil, vamos a agregar el campo personalizado de contacto “traffic_source”
Hecho esto, no olvides presionar el botón Guardar en la esquina superior derecha.
De vuelta en el script de instalación del Chat Web, ya puedes agregar los datos que quieras al parámetro ref.
Digamos que agregaste este widget a tu página de aterrizaje. El origen del tráfico puede ser el nombre de esa página de aterrizaje o lo que tenga sentido para ti. Quedaría así;
Para agregar una carga útil, usa 2 guiones seguidos del valor; en este caso, “--ebook-7figure-income”
En cuanto un visitante interactúe con este Widget de Chat Web en esa página, verás ese valor agregado a su perfil;
Como se dijo, puedes guardar hasta 10 tipos diferentes de cargas de esta manera.