Canal de Webchat

Cómo acceder al widget de webchat

Para acceder al widget de webchat, necesitas crear un chatbot de Omni-Channel. Ten en cuenta que el web chat solo está disponible dentro de Omni-Channel.

Si aún no has creado un omni channel, puedes usar el botón "Set up omni channel" para crearlo, como se muestra en la captura de pantalla a continuación:

https://share.getcloudapp.com/7KukyxXl Si creas el omni channel, asígnale un nombre y luego verás la siguiente captura de pantalla:

https://share.getcloudapp.com/nOubmWJ2 Puedes crear un bot nuevo o convertir un bot existente en un omni channel.

Después de crear el omni channel, podrás encontrar el widget de webchat en la barra lateral izquierda.

https://share.getcloudapp.com/E0uZEPek

Configuración del Widget de WebChat

Una vez que hayas ubicado tu widget, puedes presionar el ícono de lápiz a la derecha para editarlo y personalizar el widget de webchat a tu gusto.

Al hacer clic, entrarás en la vista general principal de configuraciones disponibles;

Contenido

La primera sección del widget será la pestaña de contenido. Aquí encontrarás las siguientes opciones;

Burbuja de chat

Encabezado de chat

Pie de chat

Botón de conversación

Mensaje de bienvenida

Mensaje fuera de horario

Formulario previo al chat

Flujo de inicio predeterminado

Revisémoslos uno por uno.

#### Burbuja de chat

Con la burbuja de chat, puedes seleccionar el ícono de burbuja que prefieras. Verás ese cambio reflejado directamente en la vista previa en la esquina inferior derecha;

También puedes elegir entre mostrar solo el ícono o combinarlo con texto desde las opciones superiores de esta pantalla.

#### Pie de chat

Con el botón de pie de chat, puedes configurar tu propio pie de página para el widget de tu chatbot.

Puedes agregar texto, hipervínculos y mucho más.

#### Botón de conversación

Con el botón de conversación, puedes crear tus propios botones de llamada a la acción (CTA) para permitir que los usuarios inicien, continúen o comiencen una nueva conversación;

#### Mensaje de bienvenida

Puedes agregar un encabezado de bienvenida y una línea descriptiva para motivar a las personas a hacer clic en tu widget de webchat.

#### Mensaje fuera de horario

Con el mensaje fuera de horario podrás agregar una notificación a tu widget. También podrás configurar el mensaje de respuesta;

#### Formulario previo al chat

Con esta configuración, puedes capturar datos esenciales antes de que incluso comience el chat y guardarlos en cualquier campo de sistema o campo personalizado de usuario disponible.

Ten en cuenta que el Formulario previo al chat no funciona con los modos embed ni full page. Debes usar el estilo flotante o pop up.

En primer lugar, tendrás el encabezado del formulario, donde puedes indicar el propósito de este formulario. Después podrás insertar un campo del formulario presionando el botón + Add Field.

Luego podrás seleccionar cualquiera de los siguientes tipos de campo;

Después de seleccionar el tipo, podrás editarlo presionando el botón de edición;

Una vez que estés editando cualquiera de los campos, tendrás varias opciones para elegir. Tomemos como ejemplo un campo de tipo email;

Primero, puedes seleccionar el campo de sistema o campo personalizado de usuario en el que deseas guardar el valor proporcionado por el usuario. Luego podrás establecer el nombre de la etiqueta del campo del formulario. Dentro del placeholder, podrás dar un ejemplo del formato en el que te gustaría recibir el correo electrónico. La sección de ayuda te permitirá proporcionar información adicional sobre este tipo de campo.

Las últimas dos opciones te permitirán determinar si el campo es obligatorio y qué ancho deseas que tenga. Como resultado, se verá así;

Una vez que hayas editado completamente el campo a tu gusto, puedes presionar el botón done en la parte superior de este campo para guardar los cambios.

Por último, debajo de los campos tendrás una opción adicional para permitir que el usuario escriba un mensaje antes de ingresar al chatbot;

Esto se verá de la siguiente manera en la vista en vivo para el usuario;

Este mensaje se guardará en el campo del sistema llamado {{last text input}}.

#### Flujo de inicio predeterminado

Si el formulario previo al chat no está habilitado, entonces podrás establecer un flujo de inicio predeterminado de tu elección;

Una vez que hagas clic, podrás seleccionar cualquiera de los flujos que hayas creado previamente;

#### Omitir el botón de conversación

En el web chat, puedes configurar y luego omitir la necesidad de hacer clic en el botón para iniciar la conversación.

Para hacerlo, necesitas:

asegurarte de no seleccionar otros canales en el widget de web chat.

asegurarte de que el flujo de inicio predeterminado esté conectado.

Puedes encontrar la configuración de canales conectados aquí:

También asegúrate de que el flujo de inicio esté conectado a cualquiera de tus flujos.

Después de hacer los cambios, asegúrate de aplicarlos, luego instala el código y prueba en tu sitio web.

Además, no puedes tener habilitado el formulario previo al chat para que esto funcione.

Ahora ya no deberías necesitar hacer clic en el botón para iniciar la conversación.

#### Mensajes de saludo

Puedes configurar diferentes mensajes de saludo en distintas páginas de tu sitio web.

Se mostrarán para el usuario que entra por primera vez,

Y puedes encontrar la configuración de mensajes de saludo más abajo:

Puedes configurar en qué página o páginas quieres activar el mensaje de saludo, y también puedes configurar el nombre y perfil del remitente.

Mira el siguiente video para más detalles:

Configuración

Dentro de la pestaña de configuración tendrás las siguientes opciones para personalizar;

https://share.getcloudapp.com/Jru8Wolo

Idioma

Sonido de notificación

Funcionalidades

Dominio en lista blanca

Veamos más a fondo cada configuración individual.

#### Idioma

Con la configuración de idioma puedes cambiar el idioma de visualización de algunas secciones dentro del widget;

Solo selecciona el idioma en el lado izquierdo y verás los cambios reflejados inmediatamente en la vista previa de la derecha.

#### Sonido de notificación

Con esta opción, podrás configurar el sonido de las notificaciones de nuevos mensajes que tus usuarios escucharán cuando estén conversando con tu widget de webchat.

Puedes elegir entre 21 sonidos o seleccionar sin sonido si lo prefieres.

#### Funcionalidades

Con esta opción puedes habilitar o deshabilitar ciertas funcionalidades dentro de tu widget;

Tendrás acceso a las siguientes opciones;

Permitir selector de emojis -&rsaquo; permite a los usuarios elegir entre emojis predefinidos

Permitir subir archivos adjuntos -&rsaquo; permite a los usuarios subir documentos, imágenes y/o videos

Permitir que los usuarios finalicen el chat -&rsaquo; esta opción permitirá al usuario cerrar la conversación del chat.

Permitir ventana de chat emergente -&rsaquo; esto permite a los usuarios cambiar el widget de chat a una ventana emergente, lo que genera una visualización más grande del chat

Permitir continuar el chat en móvil -&rsaquo; los usuarios pueden escanear un código QR para continuar la conversación en su teléfono. Es una experiencia fluida si comienzan en una computadora y quieren continuar la conversación con tu negocio mientras están en movimiento

Habilitar efecto de escritura de texto → esto hará que la respuesta aparezca palabra por palabra; si está deshabilitado, la respuesta aparecerá completa de inmediato.

#### Dominio en lista blanca

Para mostrar el widget en tu sitio web, deberás agregar tu dominio a la lista blanca. Solo necesitas agregar tu dominio raíz y todos los subdominios que puedas tener se reconocerán automáticamente;

Ten en cuenta que solo se admite un dominio raíz en el omni channel.

Canales

El widget de webchat te permite redirigir a los usuarios sin problemas a múltiples plataformas como WhatsApp, Facebook Messenger, Instagram, Telegram y más. Esta función garantiza que los usuarios puedan conectarse contigo a través de sus canales preferidos, mejorando su experiencia general.

#### Cómo funciona

Cuando un usuario visita tu widget de webchat por primera vez, verá un botón Get Started junto con varias opciones de canales. Estos canales se integran mediante Omni Channels.

Si una plataforma como WhatsApp está vinculada a un Omni channel y el usuario hace clic en el ícono de WhatsApp en lugar del botón Get Started, será redirigido automáticamente a esa plataforma. Esta funcionalidad es específica de los Omni channels, lo que permite una transición fluida entre diferentes plataformas de comunicación.

#### Dónde encontrarlo

Para habilitar esta función, sigue estos pasos:

1. Ve a la configuración del Widget de Webchat: accede al menú de configuración de tu widget de webchat.

2. Ubica la opción Canales: encontrarás una opción llamada Channels dentro de la configuración.

1. Activa los canales deseados: simplemente habilita los canales que quieras activar. Una vez activados, estos canales aparecerán en el widget de webchat, listos para redirigir a los usuarios según sea necesario

Por ejemplo:

Hemos vinculado una página con OneChat con fines de prueba:

Además, tenemos un sitio web de prueba donde puedes ver que hay tres canales habilitados, y el usuario puede seleccionar cualquiera de ellos.

Qué sucede cuando haces clic en cualquier canal:

Los usuarios que hagan clic en el canal de Messenger serán redirigidos a la página de Facebook.

Apariencia

Con estas opciones, puedes personalizar tu webchat para que coincida con los colores y preferencias de tu marca;

Tienes las siguientes opciones para elegir;

Tema

Fuente

Colores

Botón de inicio de chat

#### Tema

Con los temas puedes personalizar la apariencia de tu widget de webchat con valores predefinidos;

Tienes los siguientes temas a tu disposición:

Estándar

Plano

Facebook

WeChat

Lo mejor de estos temas es que brindan una apariencia y experiencia con las que los usuarios ya están familiarizados, como cuando usan Messenger o WhatsApp. Estos temas crearán una experiencia de chat similar al instante.

Como puedes ver, la experiencia hace que un usuario se sienta completamente cómodo al iniciar una conversación con tu negocio porque es muy parecida.

#### Fuente

Con las fuentes puedes cambiar por completo la apariencia del widget de webchat para alinearlo con tu propia marca o para crear una experiencia realmente única.

Actualmente puedes elegir entre 25 fuentes para hacer del widget de webchat una experiencia verdaderamente personalizada.

#### Color

Con esta opción puedes cambiar la paleta de colores de tu widget de webchat.

Puedes personalizar las siguientes secciones:

Color del widget

Color del ícono y texto de la burbuja

Color del botón Start Chat

Color de fondo del encabezado

Color de fondo del cuerpo

#### Botón de inicio de chat

Con esta opción puedes cambiar el radio del borde del botón "start conversation";

También puedes elegir la opción custom para agregar tu propio radio. Esto te ayudará a mantener la coherencia, por ejemplo, con los botones de tu propio sitio web.

Estilo de visualización

La opción de estilo de visualización te dará múltiples formas de usar el webchat en tu sitio web. Veamos las diferentes opciones;

Tenemos 5 secciones principales que puedes personalizar:

Estilo

Diseño

Instalar código

Establecer ID de usuario personalizado

CSS personalizado

#### Estilo

Tienes 4 estilos diferentes para elegir cómo quieres usar el canal de webchat en tu sitio web.

Floating Modal -&rsaquo; te dará el ícono de chat en vivo en la parte inferior de tu página

Full Page -&rsaquo; te permite incrustar el widget de chat como una página completa

Embed Chat Window -&rsaquo; te permite mostrar la ventana de chat en cualquier parte de tu página

Popup Modal -&rsaquo; te permite abrir una ventana emergente 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, para el mismo sitio web, realmente puedes instalar distintos estilos de web chat en diferentes páginas.

Consulta este video para más detalles:

#### Diseño

Con la pestaña de diseño, podrás establecer la configuración del widget de conversación según el estilo de widget que hayas seleccionado. A continuación se muestra un ejemplo de la opción embed chat window;

#### Instalar código

La opción de instalar código generará tu script del estilo de widget de chat deseado que quieres publicar en tu página;

El código de instalación diferirá según el estilo del widget que hayas seleccionado.

A continuación se muestra un ejemplo de embed chat window;

#### Establecer ID de usuario personalizado

Chat ahora permite a sus usuarios pasar información del usuario del bot desde su sitio web directamente al bot omnichannel mediante la configuración de un ID de usuario personalizado. Esta función permitirá a los usuarios enviar flujos específicos a usuarios invitados frente a usuarios que ya proporcionaron su información, así como recuperar el historial de chat y otros flujos específicos de usuario que antes no eran posibles.

Acceder a la función "Set Custom User ID"

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

La configuración se verá de la siguiente manera:

##### Clave especial

La clave especial es un conjunto de cadenas que OneChat usa para descifrar el hash que le envías desde tu sitio web. Esto es importante porque permite a OneChat verificar que el usuario realmente fue creado desde tu sitio web y que está autorizado y es auténtico.

##### Hash del identificador

El hash del identificador es un conjunto de cadenas compuesto por el user ID que deseas establecer, el cual luego se cifra como cadena usando el algoritmo SHA256 con HMAC habilitado. Este hash es la firma única que OneChat verifica para confirmar y autorizar que la solicitud se está haciendo desde tu sitio web.

Este hash debe crearse desde el backend de tu sitio web. Tendrás que enviar este valor en su forma cifrada a OneChat; de lo contrario, la solicitud será rechazada. A continuación puedes encontrar un ejemplo de código escrito en PHP para este cifrado:

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

##### Código de fragmento

El código de fragmento para esto deberá pegarse en la misma área donde colocas el fragmento de código del bot, es decir, en la sección header de tu sitio web.

El código de fragmento contiene el payload para los detalles del usuario, junto con los campos obligatorios user_id e identifier hash.

Aquí puedes ingresar detalles personalizados para los usuarios, como nombre y correo electrónico, así como establecer el user_id.

Nota: Las variables {user_id} y {indentifier_hash} deben reemplazarse por las variables donde se puedan mapear los valores que deseas establecer.

##### Instrucciones

1. Copia el código del fragmento en el header de tu sitio web, en el mismo lugar donde colocas el fragmento de código del bot.

2. Reemplaza la variable {user_id} con el user_id personalizado que deseas establecer para el usuario. Lo más probable es que este valor deba obtenerse desde tu servidor o desde el backend de tu sitio web.

3. Usando ese mismo user_id, crea el identifier hash desde tu servidor o desde el backend de tu sitio web usando el algoritmo SHA256 con HMAC habilitado.

4. Copia ambos en el código de fragmento y luego publícalo en tu sitio web. Después podrás crear usuarios con IDs de usuario personalizados.

Usg

#### CSS personalizado

Puedes agregar tu propio CSS personalizado para personalizar la interfaz del web chat.

Puedes encontrar aquí los selectores CSS del widget de webchat:

Estos selectores CSS se pueden usar para personalizar aún más el iframe del widget de chat.

| Selectores CSS | Función |

| --- | --- |

| mr-1 | apunta al texto del encabezado superior junto al logo |

| text-xs | apunta al texto del estado de respuesta debajo del texto del encabezado |

| custom_chat_header | apunta a la sección de fondo del encabezado |

| message-content | apunta al texto en las burbujas de conversación del lado del chatbot |

| chat-bubble | apunta al texto en las burbujas de conversación del lado del usuario |

| bot-widget-bubble | apunta a la burbuja de chat que aparece en la esquina inferior del sitio web |

| text-slate-700 | apunta a la línea divisora y al texto que muestra la sección de fecha de una conversación |

| agent | apunta al cuadro de respuesta del lado del chatbot y de los agentes de chat en vivo en la conversación |

| user | apunta al cuadro de respuesta del lado del usuario en la conversación |

| chat-message--input | apunta a la sección del cuadro donde escribes tu mensaje |

| bg-white | apunta al fondo detrás de los cuadros de chat |

| button-wrap .icon-button[type="submit"] svg | apunta al ícono de envío |

Sección avanzada

Hay muchas personalizaciones que puedes hacer con el botón de webchat. Algunas son un poco más avanzadas, por lo que las colocaremos en esta sección.

#### Instalar múltiples tipos de widget y diferentes flujos de inicio en tu sitio web

Con el widget de webchat, puedes instalar tantos tipos como desees en cualquiera de tus páginas dentro de tu dominio.

Una vez que hayas generado el tipo de widget deseado, puedes agregarle un parámetro ref. Esto te permite iniciar cualquier flujo de tu preferencia fácilmente.

##### Crea tu URL ref

La forma de hacerlo es crear cualquier tipo de URL ref dentro de la sección de herramientas;

Una vez que hayas creado tu URL ref, también la habrás conectado con el flujo de tu preferencia. Ahora puedes usar esta URL ref copiando el parámetro ref;

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

Ahora que has creado tu URL ref y copiado el parámetro ref, es momento de agregarlo al script de instalación de tu webchat.

La forma de hacerlo es muy sencilla;

Si ya pegaste tu script de instalación del webchat, lo único que tendrás que hacer es agregar un signo de interrogación después de .js, agregar ref= y luego añadir el parámetro ref que copiaste de la URL ref que creaste.

Esto sobrescribirá el flujo de inicio predeterminado existente y con esto podrás iniciar el flujo que prefieras.

Esto abre la posibilidad de usar el mismo widget en diferentes páginas pero con distintos flujos de inicio.

Algunos casos de uso podrían ser;

Una landing page requiere un flujo de ventas específico

El soporte al cliente comienza con un flujo de soporte

¡Pero eso no es todo!

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

Los payloads te ayudan a agregar datos específicos directamente a los campos personalizados del usuario sin que el usuario tenga que proporcionártelos. Un ejemplo sería que quieras saber desde qué sección del sitio web viene el usuario. Digamos que viene de una landing page; entonces puedes agregar esto dentro del widget como un payload para guardarlo en el perfil del usuario.

##### Agregar payloads al widget de webchat

Para agregar un payload, debemos volver a la URL ref que usamos dentro del widget de webchat.

Una vez allí, puedes agregar hasta 10 payloads para usarlos directamente en el perfil del usuario;

Tomemos el ejemplo de agregar la fuente de donde proviene el usuario, es decir, la página de tu sitio web.

En la primera línea de payload, agreguemos el campo personalizado de usuario "traffic_source"

Una vez hecho esto, no olvides presionar el botón Save en la esquina superior derecha.

Al volver a tu script de instalación del webchat, ahora puedes agregar al parámetro ref los datos que prefieras.

Digamos que agregaste este widget a tu landing page. La fuente de tráfico entonces puede ser el nombre de tu landing page o cualquier valor que te funcione. Podría verse algo así;

Para agregar un payload, usas 2 guiones y luego tu valor; en este caso sería "--ebook-7figure-income"

Una vez que un visitante interactúe con este widget de webchat en esa página, verás que ese valor se agregará a su perfil de usuario;

Como se mencionó, podrás guardar hasta 10 tipos distintos de payload de esta manera.

#### Precargar datos del usuario para el usuario de web chat

Si ya tienes la información del usuario como nombre o correo electrónico, etc., puedes pasar esa información directamente al usuario de web chat.

También puedes pasar parámetros adicionales directamente a los campos personalizados del usuario de web chat.

##### Pasar información del usuario

Puedes usar este script para pasar la información del usuario al usuario de web chat.

Deberás asegurarte de que el userID XXXX sea único para cada usuario.

##### Pasar parámetros adicionales al usuario de web chat

Si quieres pasar parámetros adicionales al usuario de web chat, puedes usar el siguiente código:

Asegúrate de que el nombre del campo personalizado de usuario sea el mismo que tienes en tu chatbot de OneChat.

En el ejemplo anterior, con los nombres "provider" e "issue_title", tenemos exactamente esos mismos nombres en nuestro chatbot.

Puedes ver el video tutorial aquí para aprender más.

Tic

Preguntas frecuentes:

1. ¿Puedo cambiar el pie de página del widget de web chat?

2. ¿Se puede abrir el widget de webChat por defecto sin hacer clic?