Canal de Webchat

Con el widget de webchat sumas un chatbot a cualquier sitio sin depender de otro canal. Así aprovechas el marketing conversacional sin las restricciones que traen otras plataformas.

Cómo llegar al widget de webchat

Para usarlo necesitas crear un chatbot omnicanal: el webchat solo está disponible dentro de Omni-Channel.

Si todavía no creaste el omnichannel, usa el botón Set up omni channel como se ve acá:

Al crearlo le pones un nombre y vas a ver esta pantalla:

Puedes crear un bot nuevo o convertir uno existente en omnicanal.

Con el omnichannel ya creado, el Webchat Widget aparece en la barra lateral izquierda.

Configuración del widget de webchat

Ubicado el widget, presiona el ícono del lápiz que está a su derecha para editarlo y personalizarlo.

Al presionarlo entras a la vista general de opciones:

Burbuja de chat

Acá eliges el ícono de la burbuja. El cambio se refleja al instante en la vista previa de abajo a la derecha.

También puedes dejar solo el ícono o combinarlo con texto, desde las opciones de arriba de esta pantalla.

Botón de conversación

Con el botón de conversación armas tus propios llamados a la acción para que la gente inicie, continúe o empiece una conversación nueva:

Mensaje de bienvenida

Puedes sumar un título y una bajada de bienvenida para invitar a la gente a abrir el widget.

Mensaje fuera de horario

Con el mensaje fuera de horario agregas un aviso al widget, y también defines el mensaje de respuesta.

Formulario previo al chat

Con esta opción capturas datos importantes antes de que arranque la conversación y los guardas en cualquier system field o custom field de usuario.

Ten en cuenta que el formulario previo no funciona en modo embebido ni en página completa: necesitas el estilo flotante o el emergente.

Primero tienes el encabezado del formulario, donde explicas para qué sirve. Después sumas campos con el botón + Add Field.

Estos son los tipos de campo disponibles:

Con el tipo elegido, lo editas con el botón de edición:

Al editar un campo tienes varias opciones. Tomemos como ejemplo un campo de tipo correo:

Primero eliges el system field o el custom field donde se guarda lo que escriba la persona. Después defines la etiqueta del campo. En el placeholder pones un ejemplo del formato que esperas. Y en la sección de ayuda agregas información extra sobre ese campo.

Las dos últimas opciones definen si el campo es obligatorio y qué ancho ocupa. El resultado se ve así:

Cuando termines de editarlo, presiona done arriba del campo para guardar los cambios.

Por último, debajo de los campos tienes una opción extra para que la persona pueda escribir un mensaje antes de entrar al chatbot:

Así lo ve la persona en vivo:

Ese mensaje se guarda en el system field {{last text input}}.

Flow inicial por defecto

Si el formulario previo está desactivado, puedes definir el flow con el que arranca la conversación:

Al presionar, eliges cualquiera de los flows que hayas creado antes:

Saltear el botón de conversación

En el webchat puedes configurar que no haga falta hacer clic en el botón para arrancar la conversación.

Para eso necesitas:

• no seleccionar otros canales en el widget de webchat
• tener conectado el flow inicial por defecto

La configuración de los canales conectados está acá:

Open Image 2023-03-28 at 9.43.48 am.jpg

Confirma también que el flow inicial esté conectado a alguno de tus flows.

Open Image 2023-03-28 at 9.45.40 am.jpg

Con los cambios hechos, aplícalos, instala el código y prueba en tu sitio.

Además, para que esto funcione, el formulario previo tiene que estar desactivado.

Con eso ya no hace falta hacer clic en el botón para iniciar la conversación.

Mensajes de saludo

Puedes configurar mensajes de saludo distintos en cada página de tu sitio.

Se muestran a quien entra por primera vez.

La configuración del mensaje de saludo está acá:

Open GoChat 2023-05-01 at 9.49.47 am.jpg

Defines en qué página o páginas se dispara el saludo, y también el nombre y el perfil del remitente.

Configuración

Dentro de la pestaña de configuración tienes estas opciones:

• Idioma
• Sonido de notificación
• Funciones
• Dominio en lista blanca

Vamos una por una.

Idioma

Con esta opción cambias el idioma de algunas partes del widget:

Elige el idioma a la izquierda y vas a ver el cambio reflejado al instante en la vista previa de la derecha.

Sonido de notificación

Acá defines el sonido que escuchan tus usuarios cuando llega un mensaje durante la conversación.

Puedes elegir entre 21 sonidos, o dejarlo sin sonido.

Funciones

Con esta opción activas o desactivas ciertas funciones del widget:

Las opciones disponibles son:

• Allow Emoji Picker -› deja elegir emojis predefinidos
• Allow Upload Attachments -› deja subir documentos, imágenes y videos
• Allow users to end chat -› deja cerrar la conversación
• Allow popup Chat Window -› convierte el widget en una ventana emergente, con el chat más grande
• Allow to Continue Chat in Mobile -› la persona escanea un código QR y sigue la conversación desde el teléfono. Cómodo para quien empieza en la computadora y quiere continuar en la calle
• Enable Text Typing Effect → muestra la respuesta palabra por palabra; si lo desactivas, aparece completa de una vez

Dominio en lista blanca

Para que el widget se muestre en tu sitio, tienes que agregar tu dominio a la lista blanca. Alcanza con el dominio raíz: todos los subdominios se reconocen solos.

Ten en cuenta que el omnichannel soporta un solo dominio raíz.

Canales

El widget de webchat puede derivar a tus usuarios a otras plataformas, como WhatsApp, Facebook Messenger, Instagram o Telegram. Así cada persona te escribe por donde prefiera.

Cómo funciona

La primera vez que alguien abre tu widget ve un botón Get Started junto con las opciones de canal. Esos canales llegan ahí desde el Omni Channel.

Si tienes WhatsApp vinculado a un omnichannel y la persona hace clic en el ícono de WhatsApp en lugar de Get Started, la derivamos directo a esa plataforma. Esto funciona solo con canales del omnichannel.

Dónde se configura

Para habilitarlo:

1. Ve a la configuración del widget de webchat.
2. Busca la opción Channels.

3. Activa los canales que quieras. Una vez activados, aparecen en el widget listos para derivar a la gente.

Por ejemplo:

Vinculamos una página con GoChat a modo de prueba:

Al hacer clic en cualquiera de los canales, la persona va directo a esa plataforma.

Apariencia

Con estas opciones adaptas el webchat a los colores y al estilo de tu marca:

Puedes ajustar:

• Tema
• Tipografía
• Colores
• Botón para iniciar el chat

Tema

Los temas cambian el aspecto del widget con valores predefinidos:

Los temas disponibles son:

• Standard
• Flat
• Facebook
• WhatsApp
• WeChat

Lo bueno de estos temas es que reproducen una experiencia que la gente ya conoce, como la de Messenger o la de WhatsApp.

Como ves, la conversación con tu negocio le resulta familiar desde el primer momento, porque la experiencia se parece a la que ya usa todos los días.

Tipografía

Con la tipografía cambias por completo el aspecto del widget, ya sea para que combine con tu marca o para armar algo bien propio.

Hoy puedes elegir entre 25 tipografías.

Color

Con esta opción cambias la paleta del widget.

Puedes personalizar:

• el color del widget
• el color del ícono y el texto de la burbuja
• el color del botón para iniciar el chat
• el color de fondo del encabezado
• el color de fondo del cuerpo

Botón para iniciar el chat

Con esta opción cambias el radio del borde del botón “start conversation”:

También puedes elegir la opción personalizada y poner tu propio radio, para que combine con los botones de tu sitio.

Estilo de visualización

El estilo de visualización define de qué forma aparece el webchat en tu sitio. Vamos por las opciones:

Hay 5 secciones para personalizar:

• Estilo
• Diseño
• Código de instalación
• Set Custom User ID
• CSS personalizado

Estilo

Tienes 4 estilos para elegir cómo se usa el webchat en tu sitio:

• Floating Modal -› el ícono de chat en vivo abajo en la página
• Full Page -› embebe el widget como página completa
• Embed Chat Window -› muestra la ventana de chat en cualquier lugar de la página
• Popup Modal -› abre la conversación en una ventana emergente
• Cualquier elemento de tu página puede ser el disparador, con solo aplicarle una clase

Lo mejor es que, en un mismo sitio, puedes instalar estilos distintos en cada página.

Diseño

En la pestaña de diseño ajustas la configuración del widget según el estilo que hayas elegido. Este es un ejemplo con la ventana embebida:

Código de instalación

El código de instalación genera el script del estilo de widget que quieras publicar en tu página:

El código cambia según el estilo que hayas elegido.

Este es un ejemplo de la ventana embebida:

Set Custom User ID

El chat permite pasar información del usuario desde tu sitio directamente al bot omnicanal, definiendo un ID de usuario propio. Con eso puedes enviar flows distintos a visitantes anónimos y a usuarios identificados, además de recuperar el historial de chat y otros flows específicos que antes no eran posibles.

Cómo llegar a Set Custom User ID

Dentro del omnibot, haz clic en Webchat Widget Settings, después en la pestaña Display Style y ahí en Set Custom User ID.

La configuración se ve así:

Special Key

La special key es una cadena que GoChat usa para descifrar el hash que le mandas desde tu sitio. Es lo que nos permite verificar que ese usuario se creó realmente desde tu sitio y que la petición es legítima.

Identifier Hash

El identifier hash es una cadena armada con el ID de usuario que quieres asignar, cifrada con el algoritmo SHA256 y HMAC activado. Ese hash es la firma única que GoChat verifica para confirmar que la petición viene de tu sitio.

El hash tiene que generarse en el backend de tu sitio, y lo tienes que enviar ya cifrado o la petición se rechaza. Este es un ejemplo en PHP:

$identifier_hash = hash_hmac('sha256', $user_id, 'b02612a8bdf5e736c41ce2002181d124');

Código del snippet

Este snippet va en el mismo lugar donde pusiste el del bot, es decir en la sección head de tu sitio.

Contiene el payload con los datos del usuario, junto con los campos obligatorios user_id e identifier hash.

window.addEventListener("chatbot:ready", function () {
    window.$chatbot.setUser("{user\_id}", {
        name: "full name",
        email: "user@email.com",
        identifier\_hash: "{identifier\_hash}"
    });
});\

Ahí puedes cargar datos propios del usuario, como el nombre y el correo, además del user_id.

Nota: las variables {user_id} e {indentifier_hash} hay que reemplazarlas por las variables de donde salgan esos valores.

Instrucciones

1. Copia el snippet en el head de tu sitio, en el mismo lugar donde pusiste el del bot.
2. Reemplaza la variable {user_id} por el user_id propio que quieras asignar. Ese valor casi seguro tenga que venir de tu servidor o del backend de tu sitio.
3. Con ese mismo user_id, genera el identifier hash desde tu servidor o backend, con SHA256 y HMAC activado.
4. Copia los dos al snippet y publícalo en tu sitio. Con eso ya puedes crear usuarios con IDs propios.

Personalizar el webchat con CSS

Puedes aplicar CSS propio para personalizar la apariencia del widget. Estos selectores te dan control sobre cada elemento dentro del iframe del chat.

Selectores CSS disponibles

Usa estos selectores para dar estilo a cada parte del widget:

Aplica estilos a cualquiera de estos selectores en tu CSS para ajustar colores, tipografías, espaciados y demás propiedades visuales del widget.

Sección avanzada

Con el botón de webchat se pueden hacer muchas personalizaciones. Algunas son más avanzadas, y por eso van en esta sección aparte.

Instalar varios tipos de widget con distintos flows iniciales

Puedes instalar tantos tipos de widget como quieras en cualquier página de tu dominio.

Una vez generado el widget que quieras, le agregas un parámetro ref. Con eso arrancas el flow que prefieras.

Crear tu ref URL

Las ref URL se crean desde la sección de herramientas:

Al crearla ya la dejaste conectada al flow que quieras. Ahora copia el parámetro ref:

Agregar el parámetro ref al código de instalación

Con la ref URL creada y el parámetro copiado, toca sumarlo al script de instalación del webchat.

Es muy simple:

Si ya pegaste el script de instalación, solo tienes que agregar un signo de pregunta después de .js, escribir ref= y pegar el parámetro que copiaste.

Eso reemplaza el flow inicial por defecto y arranca con el que elegiste.

Así usas el mismo widget en distintas páginas, cada una con su flow inicial.

Algunos casos de uso:

• una landing que necesita un flow de ventas específico
• atención al cliente que arranca con un flow de soporte

Y hay más.

Como estás usando el parámetro de la ref URL, también puedes sumarle payloads al widget.

Los payloads cargan datos directamente en los custom fields del usuario, sin que esa persona tenga que darlos. Por ejemplo, si quieres saber de qué sección del sitio llegó: si vino de una landing, sumas ese dato como payload y queda guardado en su perfil.

Agregar payloads al widget de webchat

Para eso hay que volver a la ref URL que usamos en el widget.

Ahí puedes cargar hasta 10 payloads que van directo al perfil de la persona:

Tomemos el ejemplo de guardar de dónde vino, o sea la página de tu sitio.

En la primera línea de payload agregamos el custom field de usuario “traffic_source”.

Al terminar, no te olvides de presionar Save, arriba a la derecha.

De vuelta en el script de instalación, ya puedes sumarle el dato al parámetro ref.

Supongamos que pusiste este widget en tu landing. El traffic source puede ser el nombre de esa landing o lo que te sirva. Queda algo así:

Para agregar un payload se usan 2 guiones seguidos del valor, en este caso “—ebook-7figure-income”.

Cuando alguien interactúe con el widget en esa página, el valor queda guardado en su perfil:

Como decíamos, así puedes guardar hasta 10 payloads distintos.

Precargar los datos del usuario del webchat

Si ya tienes los datos de esa persona, como el nombre o el correo, puedes pasárselos directamente al usuario del webchat.

También puedes pasarle parámetros extra a sus custom fields.

Pasar la información del usuario

Con este script le pasas la información al usuario del webchat.

window.addEventListener("chatbot:ready", function () {
    window.$chatbot.setUser("XXXX", {
        email: "YYYYYY",
        name: "ZZZZ",
        avatar_url: "https://res.cloudinary.com/gmdigital/image/upload/v1618453871/profile/3636079236501557.jpg"
    });
});

Confirma que el userID XXXX sea único para cada persona.

Pasar parámetros extra al usuario del webchat

Si quieres pasarle parámetros adicionales, usa este código:

window.addEventListener("chatbot:ready", function () {
window.$chatbot.setCustomAttributes({
                user_fields: {
                provider: "XXXX",
                issue_title: "YYYY"
                }
});
});

El nombre del custom field de usuario tiene que ser exactamente el mismo que tienes en tu chatbot de GoChat.

En el ejemplo de arriba, “provider” e “issue_title” existen con ese mismo nombre en nuestro chatbot.