Widget web

Con el widget web puedes agregar un chatbot a cualquier sitio web sin depender de otro canal. Esto te ayuda a aprovechar el poder del marketing conversacional sin las desventajas o restricciones que otros canales podrían tener. Para acceder al widget necesitas crear un chatbot Omnicanal. El Chat web solo está disponible bajo Omnicanal. Si no has creado un Omnicanal, puedes usar el botón “Set up omni channel” para crearlo.

Botón Set up omni channel

Al crear el Omnicanal, dale un nombre. Puedes crear un bot nuevo o convertir un bot existente en Omnicanal.

Creación del Omnicanal

Después de crearlo, encontrarás el widget web en la barra lateral izquierda.

Widget web en la barra lateral

Una vez ubicado tu widget, presiona el ícono de lápiz a su derecha para editarlo y personalizarlo. Entrarás a la vista general de ajustes disponibles.

Vista general de ajustes del widget

Contenido (Content)

La primera sección es la pestaña de Contenido, con estas opciones:

Chat Bubble (burbuja de chat)
Chat Header (encabezado)
Chat Footer (pie)
Conversation button (botón de conversación)
Welcome message (mensaje de bienvenida)
Out of office message (mensaje de fuera de oficina)
Pre Chat form (formulario previo al chat)
Default start flow (flujo de inicio por defecto)

Chat Bubble

Selecciona el ícono de burbuja que prefieras; lo verás reflejado en la vista previa de la esquina inferior derecha. También puedes elegir entre solo el ícono o combinarlo con texto.

Selección del ícono de burbuja

Chat Footer

Configura tu propio pie para el widget. Puedes incluir texto, hipervínculos y más.

Configuración del pie del widget

Conversation button

Crea tus propios botones de llamada a la acción (CTA) para que los usuarios inicien, continúen o comiencen una nueva conversación.

Botones de conversación (CTA)

Welcome message

Agrega un titular y un eslogan de bienvenida para incentivar a la gente a presionar tu widget.

Mensaje de bienvenida del widget

Out of office message

Agrega una notificación a tu widget y define el mensaje de respuesta.

Mensaje de fuera de oficina

Pre Chat Form (formulario previo al chat)

Con este ajuste puedes capturar datos esenciales antes de que empiece el chat y guardarlos en cualquier campo del sistema o personalizado.

El Pre Chat Form no funciona con los modos embed ni full page. Debes usar el estilo floating o pop up.

Header del formulario

Define el encabezado donde declaras el propósito del formulario.

Agrega campos

Presiona + Add Field y selecciona el tipo de campo.

Tipos de campo del formulario previo

Edita cada campo

Al editar un campo (ej. tipo email), puedes: seleccionar el campo de usuario donde guardar el valor, definir la etiqueta, el placeholder con un ejemplo del formato, una hint con información adicional, si es requerido y el ancho del campo. Presiona done para guardar.

Edición de un campo del formulario

Mensaje previo (opcional)

Debajo de los campos puedes permitir que el usuario escriba un mensaje antes de entrar al chatbot. Ese mensaje se guarda en el campo del sistema {{last text input}}.

Opción de mensaje previo del usuario

Flujo de inicio por defecto (Default Start Flow)

Si el formulario previo no está habilitado, puedes definir un flujo de inicio por defecto de tu elección, seleccionando cualquiera de los flujos que hayas creado.

Selección del flujo de inicio por defecto

Saltar el botón de conversación

En el Chat web puedes configurar para saltar la necesidad de hacer clic en el botón para iniciar la conversación. Para lograrlo:

Asegúrate de no seleccionar otros canales en el widget.
Asegúrate de que el flujo de inicio por defecto esté conectado.

Ajustes de canales conectados

Tampoco puedes tener el formulario previo (Pre Chat Form) habilitado para que esto funcione.

Después de aplicar los cambios, instala el código y prueba en tu sitio: ya no debería ser necesario hacer clic en el botón para iniciar la conversación.

Mensajes de saludo (Greeting Messages)

Puedes configurar distintos mensajes de saludo en distintas páginas de tu web. Aparecen para el usuario que entra por primera vez. Puedes definir en qué página(s) se disparan, y el nombre y perfil del remitente.

Configuración de mensajes de saludo por página

Video de referencia: youtube.com/watch?v=WpZPwabHZGs

Ajustes (Settings)

En la pestaña de Settings tienes estas opciones:

Language (idioma)

Cambia el idioma de algunas secciones dentro del widget. Selecciónalo a la izquierda y verás los cambios en la vista previa al instante.

Notification Sound (sonido de notificación)

Define el sonido de las notificaciones de mensajes nuevos. Puedes elegir entre 21 sonidos o seleccionar “sin sonido”.

Features (funciones)

Activa o desactiva ciertas funciones del widget:

Allow Emoji Picker — permite elegir emojis predefinidos.
Allow Upload Attachments — permite subir documentos, imágenes y videos.
Allow users to end chat — permite al usuario cerrar la conversación.
Allow popup Chat Window — permite convertir el widget en un popup con una pantalla más grande.
Allow to Continue Chat in Mobile — el usuario escanea un QR para continuar la conversación en su teléfono.
Enable Text Typing Effect — la respuesta aparece palabra por palabra; si se desactiva, aparece de golpe.
Allow Audio Recorder — permite enviar mensajes de audio.

Whitelist Domain (dominio en lista blanca)

Para mostrar el widget en tu web, debes poner tu dominio en la lista blanca. Solo agregas tu dominio raíz y todos los subdominios se reconocen automáticamente.

Solo se soporta un dominio raíz en el Omnicanal.

Pestaña Settings del widget

Canales (Channels)

El widget web te permite redirigir a los usuarios a múltiples plataformas como WhatsApp, Facebook Messenger, Instagram, Telegram y más, para que se conecten contigo por su canal preferido. Cómo funciona: cuando un usuario visita tu widget por primera vez, ve un botón Get Started junto con varias opciones de canal (integradas vía Omnicanal). Si una plataforma como WhatsApp está vinculada al Omnicanal y el usuario hace clic en su ícono en lugar del botón Get Started, se le redirige automáticamente a esa plataforma. Dónde encontrarlo:

Ajustes del widget

Accede al menú de ajustes de tu widget.

Ubica la opción Channels

Encontrarás una opción llamada Channels en los ajustes.

Opción Channels en los ajustes

Activa los canales deseados

Activa los canales que quieras. Una vez activos, aparecerán en el widget listos para redirigir a los usuarios.

Canales activados en el widget

Apariencia (Appearance)

Personaliza tu Chat web para que coincida con los colores y preferencias de tu marca. Opciones: Theme, Font, Colors, Start Chat Button.

Pestaña de Apariencia

Theme (tema)

Personaliza la apariencia con valores predefinidos. Temas disponibles: Standard, Flat, Facebook, WhatsApp, WeChat. Estos temas dan una experiencia familiar (como Messenger o WhatsApp), haciendo que el usuario se sienta cómodo al conversar con tu negocio.

Font (fuente)

Cambia por completo la apariencia del widget para que coincida con tu marca. Actualmente puedes elegir entre 25 fuentes.

Color

Cambia la paleta de colores. Puedes personalizar: Widget Color, Bubble Icon & Text color, Start Chat Button Color, Header Background Color, Body Background Color.

Start Chat Button

Cambia el radio del borde del botón “start conversation”. También puedes elegir la opción custom para poner tu propio radio y mantenerlo en sintonía con los botones de tu web.

Estilo de visualización (Display Style)

El estilo de visualización te da varias formas de usar el Chat web en tu web. Hay 5 secciones: Style, Design, Install code, Set Custom User ID, Custom CSS.

Opciones de Display Style

Style

Tienes 4 estilos para elegir:

Floating Modal — el ícono de chat en la parte inferior de tu página.
Full Page — incrusta el widget como una página completa.
Embed Chat Window — muestra la ventana de chat en cualquier parte de tu página.
Popup Modal — abre una ventana con la conversación; cualquier elemento de tu página puede ser el disparador si le aplicas una clase.

Para una misma web, puedes instalar distintos estilos de widget en distintas páginas. Video de referencia: youtube.com/watch?v=Jrcb-y9fw3E

Design

En la pestaña Design configuras los ajustes del widget del estilo que seleccionaste.

Pestaña Design (ejemplo con Embed Chat Window)

Install code

El código de instalación genera el script del estilo de widget que quieres poner en vivo en tu página. El código difiere según el estilo seleccionado.

Código de instalación del widget

Set Custom User ID

Ahora puedes pasar información del usuario desde tu web directamente al bot Omnicanal estableciendo un Custom User ID. Esto permite enviar flujos específicos a usuarios invitados vs. usuarios que ya dieron su información, así como recuperar el historial de chat y otros flujos específicos del usuario. Acceso: dentro del bot Omnicanal, haz clic en Webchat Widget Settings → Display Style → Set Custom User ID.

Configuración de Set Custom User ID

Special Key: un conjunto de cadenas que Botky usa para descifrar el hash que envías desde tu web. Es importante porque permite verificar que el usuario efectivamente proviene de tu web y es auténtico.

Identifier Hash: una cadena compuesta por el user ID que quieres establecer, cifrada con el algoritmo SHA256 con HMAC habilitado. Este hash es la firma única que Botky verifica para autorizar la solicitud. Debe crearse desde el backend de tu web y enviarse en forma cifrada, o la solicitud será denegada. Un ejemplo en PHP:

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

Snippet Code: el fragmento de código va en la misma sección donde pones el snippet del bot (en el <head> de tu web). Contiene el payload con los detalles del usuario, junto con los campos obligatorios user_id e identifier_hash:

<script>
  window.addEventListener("chatbot:ready", function () {
    window.$chatbot.setUser("{user_id}", {
      name: "full name",
      email: "user@email.com",
      identifier_hash: "{identifier_hash}"
    });
  });
</script>

Las variables {user_id} e {identifier_hash} deben reemplazarse por los valores que quieres mapear.

Instrucciones:

Copia el snippet

Colócalo en el <head> de tu web, en el mismo lugar del snippet del bot.

Reemplaza {user_id}

Usa el user_id personalizado que quieras (probablemente lo obtendrás del backend de tu servidor).

Crea el identifier hash

Con ese mismo user_id, genera el hash desde tu backend usando SHA256 con HMAC.

Publica

Copia ambos al snippet y publícalo en tu web. Ya podrás crear usuarios con IDs personalizados.

Snippet de Custom User ID en el sitio

Custom CSS

Puedes agregar tu propio CSS para personalizar la interfaz del Chat web. Estos selectores CSS te sirven para personalizar el iframe del widget:

Selector CSS	Función
`mr-1`	El texto del encabezado, arriba junto al logo.
`text-xs`	El texto de estado de respuesta debajo del encabezado.
`custom_chat_header`	El fondo de la sección del encabezado.
`message-content`	El texto de las burbujas del lado del chatbot.
`chat-bubble`	El texto de las burbujas del lado del usuario.
`bot-widget-bubble`	La burbuja de chat en la esquina inferior del sitio.
`text-slate-700`	La línea divisoria y el texto de la fecha en una conversación.
`agent`	La caja de respuesta del lado del chatbot y de los agentes de Chat en vivo.
`user`	La caja de respuesta del lado del usuario.
`chat-message--input`	La caja donde escribes tu mensaje.
`bg-white`	El fondo detrás de las cajas de chat.
`button-wrap .icon-button[type="submit"] svg`	El ícono de enviar.

Sección avanzada (Advanced)

Hay muchas personalizaciones avanzadas que puedes hacer con el widget web. Puedes instalar tantos tipos de widget como quieras en cualquier página de tu dominio. Una vez generado el tipo de widget, puedes agregarle un parámetro ref para iniciar el flujo que prefieras.

Crea tu ref URL

Crea un ref URL en la sección de Herramientas y conéctalo al flujo de tu preferencia. Luego copia el parámetro ref.

Creación de un ref URL en Herramientas

Agrega el ref al código de instalación

En tu script de instalación del widget, agrega un signo de interrogación después de .js, luego ref= y pega el parámetro ref que copiaste. Esto sobrescribe el flujo de inicio por defecto y permite iniciar el flujo que prefieras.

Agregar el parámetro ref al script de instalación

Esto abre la puerta a usar el mismo widget en distintas páginas pero con distintos flujos de inicio. Casos de uso: una landing con un flujo de ventas específico, o soporte al cliente que empieza con un flujo de soporte.

Agregar payloads al widget

Como usas el parámetro ref URL, también puedes agregar payloads al widget. Los payloads guardan datos específicos directamente en los campos personalizados del usuario sin que este tenga que dártelos (por ejemplo, de qué sección de tu web viene).

Vuelve al ref URL

En el ref URL que usaste, puedes agregar hasta 10 payloads para el perfil del usuario.

Agregar payloads al ref URL

Define el campo

Por ejemplo, en el primer payload agrega el campo personalizado traffic_source. No olvides presionar Save.

Agrega el valor en el script

En tu script de instalación, agrega el dato al parámetro ref con dos guiones y luego el valor. Ej: --ebook-7figure-income. Cuando un visitante interactúe con ese widget, el valor se agregará a su perfil.

Payload agregado al perfil del usuario

Pre-rellenar los datos del usuario

Si ya tienes la información del usuario (nombre, correo, etc.), puedes pasarla directamente al usuario del Chat web, e incluso pasar parámetros extra a sus campos personalizados. Pasar información del usuario:

<script>
  window.addEventListener("chatbot:ready", function () {
    window.$chatbot.setUser("XXXX", {
      email: "YYYYYY",
      name: "ZZZZ",
      avatar_url: "https://res.cloudinary.com/.../avatar.jpg"
    });
  });
</script>

Asegúrate de que el userID (XXXX) sea único para cada usuario.

Pasar parámetros extra al usuario:

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

El nombre del campo personalizado debe ser exactamente el mismo que tienes en tu chatbot de Botky. En el ejemplo, provider e issue_title deben existir con ese mismo nombre en el bot.

Parámetros extra pasados al usuario

Preguntas frecuentes

¿Puedo cambiar el pie (footer) del widget web?
¿Se puede abrir el widget web por defecto sin hacer clic en el botón?

Documentación

Cómo acceder al widget web

Ajustes del widget

Contenido (Content)

Pre Chat Form (formulario previo al chat)

Flujo de inicio por defecto (Default Start Flow)

Saltar el botón de conversación

Mensajes de saludo (Greeting Messages)

Ajustes (Settings)

Canales (Channels)

Apariencia (Appearance)

Estilo de visualización (Display Style)

Style

Design

Install code

Set Custom User ID

Custom CSS

Sección avanzada (Advanced)

Instalar múltiples tipos de widget y distintos flujos de inicio

Agregar payloads al widget

Pre-rellenar los datos del usuario

Preguntas frecuentes

​Cómo acceder al widget web

​Ajustes del widget

​Contenido (Content)

​Pre Chat Form (formulario previo al chat)

​Flujo de inicio por defecto (Default Start Flow)

​Saltar el botón de conversación

​Mensajes de saludo (Greeting Messages)

​Ajustes (Settings)

​Canales (Channels)

​Apariencia (Appearance)

​Estilo de visualización (Display Style)

​Style

​Design

​Install code

​Set Custom User ID

​Custom CSS

​Sección avanzada (Advanced)

​Instalar múltiples tipos de widget y distintos flujos de inicio

Agregar payloads al widget

​Pre-rellenar los datos del usuario

​Preguntas frecuentes

Cómo acceder al widget web

Ajustes del widget

Contenido (Content)

Pre Chat Form (formulario previo al chat)

Flujo de inicio por defecto (Default Start Flow)

Saltar el botón de conversación

Mensajes de saludo (Greeting Messages)

Ajustes (Settings)

Canales (Channels)

Apariencia (Appearance)

Estilo de visualización (Display Style)

Style

Design

Install code

Set Custom User ID

Custom CSS

Sección avanzada (Advanced)

Instalar múltiples tipos de widget y distintos flujos de inicio

Pre-rellenar los datos del usuario

Preguntas frecuentes