# Chat en vivo del sitio web

Al instalar un chat en línea en su sitio web, puede recopilar datos de los clientes y automatizar la comunicación con los visitantes directamente en su sitio.

También puede conectar a su equipo de ventas al chat, lo que permite a los gerentes unirse a las conversaciones con los clientes. La comunicación puede tener lugar a través de la interfaz web de MaviBot o mediante nuestras aplicaciones móviles para Android e iOS.

## Cómo crear un sitio web de chat en vivo

Para crear un chat, vaya a la sección "Mensajeros" y haga clic en el botón "Chat en vivo".

<div data-with-frame="true"><figure><img src="/files/119d5c3c2afdc6091c98686e10c89e73238081bf" alt=""><figcaption></figcaption></figure></div>

Una vez que haga clic en el botón "Chat en línea", el panel de configuración de su chat recién creado se abrirá automáticamente.

La apariencia del chat dependerá de la configuración que elija. En el lado derecho verá una vista previa en vivo del widget de chat, que puede abrir y cerrar para probar cómo se ve y cómo funciona.

## Configuración

### Decoración

<div data-with-frame="true"><figure><img src="/files/6e4c5ba0b2754ba248d9f92f9c0b9d84137a97a4" alt="" width="563"><figcaption></figcaption></figure></div>

1. **Título del chat**

Este campo establece el nombre del chat en línea: aparecerá en la parte superior de la ventana del chat.&#x20;

2. **Subtítulo del chat**

Este campo se encuentra debajo del título del chat y le permite aclarar el rol o propósito del chat en línea en su sitio web.

3. **Etiqueta del widget especificada**

La etiqueta del botón del widget se muestra cuando el chat en línea está minimizado. De forma predeterminada, muestra el texto de los campos de título y subtítulo, pero puede establecer una etiqueta diferente si es necesario.

4. **Mensaje de bienvenida del chat**

Este campo contiene el texto del mensaje de saludo inicial del bot

<div data-with-frame="true"><figure><img src="/files/5bfc348ce7c9c23f4f228dc9f1cffe9a98ad2797" alt=""><figcaption></figcaption></figure></div>

5. **Orientación del texto**

Usando la barra de herramientas de alineación de texto, puede alinear el título y el subtítulo del chat a la izquierda, a la derecha o al centro, igual que en los editores de texto estándar.

<div data-with-frame="true"><figure><img src="/files/5c911c61839a0c72403e4ec9117f10261bb4d267" alt="" width="177"><figcaption></figcaption></figure></div>

6. Botón de chat

<div data-with-frame="true"><figure><img src="/files/0599617627faab6f543c1df8fbd9446cc9ca6528" alt="" width="375"><figcaption></figcaption></figure></div>

Este botón está diseñado para abrir el chat en línea cuando se hace clic en él.&#x20;

Puede elegir cómo se mostrará el botón del chat en línea en diferentes dispositivos: el escritorio del sitio web&#x20;

Hay varias opciones de visualización disponibles. Puede colocar el botón en el borde derecho o izquierdo.

7. Paleta de colores

Para personalizar el chat en línea a su gusto, no solo puede ajustar el color, sino también mostrar patrones interesantes en el fondo y en el encabezado del chat.

<div data-with-frame="true"><figure><img src="/files/ba248c373ce1714c14bd1bb217508b48af57ebcc" alt="" width="563"><figcaption></figcaption></figure></div>

También puede elegir el color y el brillo de los patrones, así como otros elementos del chat en línea. Para ello, active la casilla "Configuración avanzada".

También puede configurar ajustes de color avanzados adicionales para el chat en línea.

8. Avatar del chat en línea

<div data-with-frame="true"><figure><img src="/files/695a4be0d68e6dc875e44c9155f271a19b33fa99" alt="" width="563"><figcaption></figcaption></figure></div>

Esta opción le permite cambiar el avatar del asistente en el chat en línea. El avatar puede añadirse mediante una URL o cargando un archivo.

También puede ocultar el avatar del chat activando esta casilla, si es necesario.

9. **Logotipo de MaviBot**

La configuración le permite mostrar el logotipo de MaviBot.

<div data-with-frame="true"><figure><img src="/files/45a43bbc9bf9b32203fd2df894584d0ccd8ef6ee" alt="" width="369"><figcaption></figcaption></figure></div>

### Configuración

<div data-with-frame="true"><figure><img src="/files/e4ed95caa0697ce0a392271b5442a97b45436eb1" alt="" width="563"><figcaption></figcaption></figure></div>

1. **Texto dentro del campo de entrada**

De forma predeterminada, este campo contiene el texto: "Escriba su mensaje y presione Enter."

Puede personalizar este texto o dejar el valor predeterminado.

2. **Inscripción en la versión móvil**

De forma predeterminada, el texto está establecido en: "Elija su método de contacto preferido."

3. **Mensaje al asignar un operador a un cliente**&#x20;

Si incluye #{operatorName} en este campo, se mostrará el nombre del operador especificado en la sección "Empleados".

Puede asignar un operador manualmente haciendo clic en el botón "Tomar cliente" o "Transferir cliente" durante una conversación con el cliente. Alternativamente, puede configurar la distribución automática de clientes entre operadores en la sección "Empleados".&#x20;

<div data-with-frame="true"><figure><img src="/files/b296035b7c4b401b894bae0271a838e2c130a176" alt="" width="563"><figcaption></figcaption></figure></div>

4. **Mensaje cuando los operadores están desconectados**

De forma predeterminada, se mostrará el siguiente mensaje:
&#x20;"No hay operadores en línea en este momento. Por favor, déjenos un mensaje y nos pondremos en contacto con usted lo antes posible."

El estado "En línea" del bot se toma de la sección "Empleados". Los estados posibles son: En línea, Descanso y Fuera de línea.

<div data-with-frame="true"><figure><img src="/files/95eb01bf555a3bb5f50b164f4a3676faba3ac6b0" alt="" width="563"><figcaption></figcaption></figure></div>

También puede cambiar su estado desde la barra superior mientras esté en cualquier sección del proyecto

5. **Notificación sonora en el chat en línea**

Esta configuración le permite activar o desactivar las alertas de sonido para la apertura del chat y los nuevos mensajes en el chat en línea para los visitantes del sitio web.

6. **Mostrar mensajero**

<div data-with-frame="true"><figure><img src="/files/dfa6da46a0d28e919c22c9a816a9e466cd385a83" alt="" width="367"><figcaption></figcaption></figure></div>

Puede elegir qué mensajeros se muestran en el sitio web al pasar el cursor sobre el widget del chat en línea (icono).

{% hint style="warning" %}
Los botones de mensajería aparecerán solo después de que estos mensajeros se hayan conectado al constructor.
{% endhint %}

7. **Mostrar solo mensajeros**

Si activa este interruptor, solo aparecerán los botones de mensajería en el sitio web. *¡Todas las demás funciones del chat en línea se desactivarán!*

<div data-with-frame="true"><figure><img src="/files/6205b09929e295fe0fe611b16b1a2bbb85ce9558" alt="" width="563"><figcaption></figcaption></figure></div>

8. **Texto del mensajero**

De forma predeterminada, está establecido en: "Escribir a".

<div data-with-frame="true"><figure><img src="/files/f5a922ea2bf2c7fa272a06ed9c0958b4eb0f1731" alt="" width="563"><figcaption></figcaption></figure></div>

9. **Mensaje de inicio de WhatsApp**&#x20;

Este texto aparecerá en el campo de entrada para el usuario en WhatsApp cuando haga clic en el botón de su sitio web. El usuario solo tendrá que presionar "Enviar".

Asegúrese de incluir también este texto en las condiciones del bloque inicial de su secuencia de mensajes.

<div data-with-frame="true"><figure><img src="/files/db5b86a636f7f507f6796ab0b885d3c2f0399ec7" alt="" width="375"><figcaption></figcaption></figure></div>

10. **Enlaces personalizados**

Además de los botones de mensajería, ahora puede añadir sus propios botones con enlaces personalizados.

Puede especificar la URL del enlace y añadir una imagen en la configuración.

<div data-with-frame="true"><figure><img src="/files/059e613cdc1f9f7259ad7ff56fa2bd85e0b8a6ce" alt="" width="563"><figcaption></figcaption></figure></div>

11. Carga de archivos

Esta configuración le permite recibir archivos adjuntos de los visitantes del sitio web, como imágenes.

<div data-with-frame="true"><figure><img src="/files/c94b1fa562855729c33fbffa6da67c2ef1b45c8f" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="warning" %}
El tamaño máximo de archivo permitido para las cargas entrantes a través del chat en línea es de 20 MB.
{% endhint %}

12. **Datos del usuario**

En el primer mensaje, puede obtener el consentimiento para el tratamiento de datos personales y/o recopilar información del usuario mediante un formulario de recopilación de datos. También puede establecer o cambiar la dirección de correo electrónico a través de la ventana de bienvenida.

<div data-with-frame="true"><figure><img src="/files/87fff48f1b3fea7a1b0331e4e03747e39327d926" alt="" width="375"><figcaption></figcaption></figure></div>

El relleno del formulario puede ser opcional o hacerse obligatorio activando el conmutador "*Hacer obligatorio el llenado del formulario"* conmutador.

Ejemplo del primer mensaje con recopilación de datos.

<div data-with-frame="true"><figure><img src="/files/86f6fefe14dd0fdcd2111588096dd52fe4056f88" alt="" width="375"><figcaption></figcaption></figure></div>

Después de configurar el formulario, puede seleccionar los ajustes de visualización del país mediante un campo desplegable.

<div data-with-frame="true"><figure><img src="/files/981fac3e5ba494a2e80ce63f34988652f3828fc9" alt="" width="375"><figcaption></figcaption></figure></div>

13. Solicitud de devolución de llamada

La casilla "Solicitud de devolución de llamada" aparece en la configuración del chat en línea si la telefonía está habilitada en el proyecto.

#### *Cómo funciona*

Al completar el formulario, el usuario puede marcar la casilla para solicitar una devolución de llamada. En ese caso, se selecciona automáticamente a uno de los empleados con telefonía habilitada y se realiza una llamada al cliente.

{% hint style="info" %}
El empleado se asigna automáticamente. Al seleccionar un empleado, se comprueba lo siguiente:

* Estado: En turno
* Cualquier rol, incluido Administrador
* La telefonía está habilitada (configurada) para el empleado

Después de la llamada, este empleado será asignado como responsable del usuario.
{% endhint %}

14. Solicitar consentimiento para el tratamiento de datos personales&#x20;

<div data-with-frame="true"><figure><img src="/files/1ee1e256f37bdb2a9026ad68e972c856e5e61e89" alt="" width="563"><figcaption></figcaption></figure></div>

Esta opción está desactivada de forma predeterminada. Cuando se activa, aparecerá un mensaje que dice "Doy mi consentimiento para el tratamiento de datos personales" junto con el **botón "Confirmar"** cuando se inicie el chat en línea por primera vez.

Ejemplo del primer mensaje para obtener el consentimiento para el tratamiento de datos personales:

15. Configuración del botón de inicio

<div data-with-frame="true"><figure><img src="/files/6a21d329d620bf92c967d3926148cb3888864e15" alt="" width="264"><figcaption></figcaption></figure></div>

Haciendo clic en ***"Añadir botón"*** se abre el formulario para crear un botón de inicio:

<div data-with-frame="true"><figure><img src="/files/d79c4b7b56def8a8dcde944056d9c51b0d3a9099" alt="" width="563"><figcaption></figcaption></figure></div>

El botón puede tener una de las siguientes funciones:

* **Enlace**. Le permite añadir una URL para navegar a otra página de su sitio web o a un recurso web externo.
* **Correo electrónico**. El cliente será redirigido a su servicio de correo electrónico para enviar un mensaje a la dirección de correo electrónico especificada en la configuración del botón.
* **Teléfono**. La aplicación de llamadas se inicia, o se le pide al usuario que elija una aplicación para hacer la llamada, según el dispositivo que use. La llamada se dirige al número especificado en la configuración del botón.
* **Mensaje (del administrador / usuario)** — esta función permite al bot enviar respuestas rápidas al hacer clic en un botón.

Por ejemplo, puede crear un botón llamado "Dirección" y, en el campo "Mensaje", especificar la dirección exacta y el horario de oficina.

{% hint style="info" %}
El texto en el campo "Mensaje" no tendrá saltos de línea. Téngalo en cuenta al trabajar.
{% endhint %}

* **Separar clientes de diferentes dominios.** Esta configuración permite separar conversaciones si la misma persona escribe en el chat en línea alojado en diferentes dominios. De forma predeterminada, se trata como la misma conversación.

<div data-with-frame="true"><figure><img src="/files/16911199203c435b89de9193072a94589f0ad61e" alt="" width="375"><figcaption></figcaption></figure></div>

Este interruptor es necesario si se instalan diferentes chats en línea en distintos sitios web dentro del mismo dominio y necesita separar las conversaciones cuando escribe la misma persona.

* **Los botones en el texto se mostrarán en el historial del chat en línea (conmutador).** Active esta opción para mostrar los botones del texto del constructor de embudos en el historial del chat en línea del cliente.

16. Ocultar el chat en línea

<div data-with-frame="true"><figure><img src="/files/a1208f90a73634d605db5f1c4c71e64fa8426cec" alt="" width="207"><figcaption></figcaption></figure></div>

No es necesario eliminar el chat en línea del sitio web. Puede simplemente ocultarlo usando el conmutador correspondiente.

### Acciones automáticas

La forma en que funcionan las acciones automáticas es la siguiente: para que se desencadene una acción automática, debe establecerse una condición desencadenante específica para esa acción.

<div data-with-frame="true"><figure><img src="/files/ab00890ee013fd558d5cb4f169653226b01a7c3a" alt="" width="375"><figcaption></figcaption></figure></div>

Primero, establezca las condiciones para cuándo debe ejecutarse la acción personalizada. Puede añadir condiciones basadas en la hora del día, el país del visitante, la ciudad, la URL de la página actual, etc.

<div data-with-frame="true"><figure><img src="/files/23acbce57c6a88301a0f1f63d7d43faa89645203" alt="" width="563"><figcaption></figcaption></figure></div>

Más sobre las condiciones:

<div data-with-frame="true"><figure><img src="/files/41de04f93337397553fc054a3b3f7145f8216b9f" alt="" width="563"><figcaption></figcaption></figure></div>

1. **Hora actual.** Configure el disparo automático del chat en línea según el período de tiempo en que el cliente interactúe con el chat (por ejemplo, durante las horas felices después de las 16:00, un visitante de su página de destino puede recibir un descuento).
2. **Realizar esta acción solo una vez al día para el usuario.** Esta condición puede aplicarse en varios casos: por ejemplo, para enviar enlaces de afiliados u otros enlaces en mensajes del administrador/usuario (como acceso a nuevos materiales del curso); para un sistema de fidelización o acumulación; y así sucesivamente.
3. **Ciudad del usuario /** País del usuario.  Al establecer esta condición, puede dirigirse al grupo específico de usuarios que se beneficiarían de su servicio; por ejemplo, cuando se requiere la presencia física del cliente para comprar un producto o servicio.

En este caso, puede establecer la condición como igual o no igual. Por ejemplo, si necesita especificar una ciudad o país (o una lista de países) para el cual no debe activarse la acción automática, elija "no igual".&#x20;

4. **El día de la semana**.
   &#x20;Esta condición sirve como disparador de acciones automáticas según el día de la semana. Puede seleccionar casillas junto a los días de la semana, establecer la condición como igual o no igual, y elegir la acción automática que el chat en línea debe realizar.

Por ejemplo, puede establecer todos los días laborables de sus operadores/gerentes para permitir su posterior contacto con los clientes.&#x20;

5. **URL de la página actual**. La acción automática se activará dependiendo de si la URL contiene/no contiene o es igual/no es igual a un enlace especificado.
6. **Mensaje del usuario**. Para activar la acción automática bajo esta condición, el campo debe contener una palabra específica del usuario.

<div data-with-frame="true"><figure><img src="/files/030899e9da8aaa146f2df4f0112438f92c35d83d" alt="" width="563"><figcaption></figcaption></figure></div>

6. **Tiempo en la página**. Esta condición es similar a la hora del día; sin embargo, si su base de datos de clientes está distribuida en diferentes zonas horarias, necesita que esta acción automática ocurra a la misma hora local para cada zona horaria.
7. **Tiempo desde que se cerró la ventana de MAviBot**. Esta condición se establece de forma similar a la hora del día o al tiempo en la página, pero depende de la acción del usuario de cerrar la ventana de Salebot.
8. **Tiempo desde el primer mensaje del visitante.** La acción automática se activará después de un período especificado (en segundos) tras el primer mensaje del cliente en el chat en línea.
9. **Tiempo sin respuesta del operador desde el primer mensaje del usuario**. Esta condición también se establece en segundos y se activa independientemente de si el operador ha respondido al cliente o no.

Si es necesario, las condiciones pueden combinarse, lo que permite que la acción automática se active en función de múltiples criterios:

<div data-with-frame="true"><figure><img src="/files/f400d3caff57fdde04a0007d88c5c72447350130" alt="" width="563"><figcaption></figcaption></figure></div>

A continuación, elija qué acción debe realizar automáticamente el chat en línea:

<div data-with-frame="true"><figure><img src="/files/b5be31a493d310bd879bf5ab162236638c8b8f79" alt="" width="563"><figcaption></figcaption></figure></div>

1. **Apertura automática del chat**. Esta acción abre automáticamente el chat en línea para el usuario. No se requiere configuración adicional.
2. **Invitación automática al chat**. Esta acción automática envía al usuario un mensaje predefinido introducido en el campo correspondiente. También puede ocultar el campo de entrada del mensaje usando la casilla con el mismo nombre, si es necesario.
3. **Ocultar el icono del chat en línea de un sitio web**. Esta acción puede usarse, por ejemplo, después de que hayan terminado las horas de trabajo de sus administradores.
4. **Mostrar el icono del chat en línea**. Similar a la acción anterior, esto le permite mostrar el icono del chat a los clientes durante un período de tiempo específico (o según otras condiciones necesarias).
5. **Enviar mensaje como administrador**. Esta acción envía un mensaje en el chat en línea bajo el rol de administrador.
6. **Enviar un formulario**. Esta acción se utiliza para recopilar datos del cliente. Puede personalizar el texto del formulario, seleccionar los campos de entrada requeridos (como nombre, número de teléfono, correo electrónico, casilla de verificación o cualquier otro campo de entrada que configure manualmente).

Puede configurar un campo de entrada personalizado. Por ejemplo, para recopilar la ciudad de residencia del cliente o cualquier otra información relevante.

### Banners

<div data-with-frame="true"><figure><img src="/files/be9ec89a9207ba0e51efe172a9e3aac5cb562912" alt=""><figcaption></figcaption></figure></div>

Puede añadir banners clicables a la ventana de inicio del chat en la pestaña "Banners". Pasemos a la configuración.

1. Haga clic en **"Añadir banner"**.

<div data-with-frame="true"><figure><img src="/files/4e7c00206b519bda881da7144ad72296455022d5" alt="" width="260"><figcaption></figcaption></figure></div>

2. Cargue una imagen.

<div data-with-frame="true"><figure><img src="/files/ae8e89fe42fde496f7ac714227ae827b300525c8" alt=""><figcaption></figcaption></figure></div>

{% hint style="warning" %}
El tamaño de la imagen es fijo.

Formato de imagen recomendado: si añade un título y un subtítulo, use un tamaño de banner de **345x194 píxeles** o una **relación de aspecto 16:9**.
{% endhint %}

Para que el banner sea clicable (permitiendo que su cliente siga un enlace al hacer clic en él), introduzca la URL en el campo correspondiente.

<div data-with-frame="true"><figure><img src="/files/dbd3476a60cfe6fcd305713f9f2ab0835183c366" alt="" width="563"><figcaption></figcaption></figure></div>

A continuación, especifique el título y el subtítulo del banner si es necesario.

<div data-with-frame="true"><figure><img src="/files/bcbf06621709d52b57675ce6a8494d5e187697df" alt="" width="563"><figcaption></figcaption></figure></div>

Introduzca el título y el subtítulo, luego haga clic en **"Guardar"**.

<div data-with-frame="true"><figure><img src="/files/a71ebebe4a51cbc40f5e12d5b7cabd121f743528" alt="" width="563"><figcaption></figcaption></figure></div>

El banner aparecerá entonces en el widget del chat en línea.

<div data-with-frame="true"><figure><img src="/files/350a47c1d7ce1723cd63fcecc59996b896bebba7" alt="" width="563"><figcaption></figcaption></figure></div>

Para desactivar un banner (dejar de mostrarlo en el chat en línea), cambie el interruptor a la posición inactiva.

<div data-with-frame="true"><figure><img src="/files/6bbaff8cb62e139d8fb4a6fb788fefb78deebe9b" alt="" width="563"><figcaption></figcaption></figure></div>

Para editar o eliminar un banner, haga clic en **Editar**.

### Calificación de calidad

<div data-with-frame="true"><figure><img src="/files/be316cddfb7661ff18cea1df50b84615e9a82a1c" alt="" width="375"><figcaption></figcaption></figure></div>

Hay una sección adicional de configuración en el chat en línea llamada "Control de calidad". Para habilitar esta función, vaya a la pestaña correspondiente en la configuración.

<div data-with-frame="true"><figure><img src="/files/758b38cb61692b9a7ecab37172dc3743103f623f" alt="" width="563"><figcaption></figcaption></figure></div>

La funcionalidad ofrece una elección entre tres escalas de calificación de calidad: de cinco puntos, de tres puntos y de dos puntos.

<div data-with-frame="true"><figure><img src="/files/17bbb838dc9bbb5999a38296093662bdf7c00262" alt="" width="563"><figcaption></figcaption></figure></div>

Introduzca el texto que aparecerá antes de la calificación en el campo correspondiente.

<div data-with-frame="true"><figure><img src="/files/256476ae92a3b6107faf8d8c72b485d9d1e1fdf3" alt=""><figcaption></figcaption></figure></div>

No hay un valor predeterminado en este campo. Si lo deja vacío, el siguiente texto aparecerá en el banner de calificación de calidad.

También puede especificar un nombre personalizado para el campo de comentarios del cliente.

<div data-with-frame="true"><figure><img src="/files/a5abd4dd683f2edbfba63440ef2d050152ad3b7c" alt="" width="375"><figcaption></figcaption></figure></div>

Para ello, simplemente introduzca su propio texto para el nombre del campo, así como un texto de marcador de posición dentro del campo de comentarios. De forma predeterminada (vea el ejemplo anterior), el propósito y el texto de cada campo ya están establecidos para su comodidad.

También puede activar una casilla para hacer obligatorio el comentario de opinión del cliente.

<div data-with-frame="true"><figure><img src="/files/592f4d72b7986623873430ad31707ebcbf8094f5" alt="" width="363"><figcaption></figcaption></figure></div>

A continuación, puede completar el mensaje de comentarios que se enviará al cliente después de una reseña positiva o negativa. Para ver cómo aparece el mensaje final del chat en línea después de enviar una calificación, haga clic en el botón del chat para enviar la calificación.

<div data-with-frame="true"><figure><img src="/files/1ce728c223742ef3c847109a277e836e2c65bb54" alt="" width="313"><figcaption></figcaption></figure></div>

#### casilla "El usuario puede calificar el chat"

<div data-with-frame="true"><figure><img src="/files/834c5d3dbcc4a4bc68125ea402a08bcac9053f62" alt="" width="563"><figcaption></figcaption></figure></div>

En la sección "Clientes", el operador puede finalizar el diálogo durante una conversación con un usuario. Si esta casilla está activada, el usuario podrá proporcionar una calificación.

{% hint style="success" %}
El operador no ve la calificación que el cliente dio a la conversación.
&#x20;Todas las calificaciones de calidad estarán disponibles en la sección "Analíticas".
{% endhint %}

El operador puede hacer clic en el botón "Finalizar conversación" durante una conversación con un usuario. Esto abrirá un formulario de confirmación para la acción del operador:

<div data-with-frame="true"><figure><img src="/files/98f91de2ce7cf66a9f99f864469503f344c71471" alt="" width="375"><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/7db33b0872d7226015a51b4de1793dcb5845cfaf" alt="" width="375"><figcaption></figcaption></figure></div>

Si un servicio de correo electrónico está conectado en los canales, aparecerán opciones para enviar mensajes por correo electrónico.

Después de que el operador finaliza la conversación, se envía al usuario un formulario de calificación de calidad y la calificación en sí se registra en Analytics.

Si el cliente no deja una calificación, las estadísticas mostrarán "El usuario no dejó una calificación."

## Cómo añadir el chat en línea a su sitio web

Para incrustar el chat en línea en su sitio, simplemente copie el script de la pestaña Código y péguelo en el HTML de su sitio web.

<div data-with-frame="true"><figure><img src="/files/423048b03887477acefab18a2f045cb84ef41f94" alt=""><figcaption></figcaption></figure></div>

Copie el código del chat en línea.

<div data-with-frame="true"><figure><img src="/files/e272e7cc52b660441dd9b6a912e62426fc5e7a65" alt=""><figcaption></figcaption></figure></div>

A continuación, vaya a la sección **"Sitios"** y haga clic en el mosaico del sitio donde desea colocar el widget del chat en línea.

<div data-with-frame="true"><figure><img src="/files/a5eabeb69193cd08a704146b11c9341b10ccbb9e" alt="" width="563"><figcaption></figcaption></figure></div>

Luego, proceda a **Edición del sitio**.

<div data-with-frame="true"><figure><img src="/files/732960b38d8514697f98b865a7832082c1dccf83" alt="" width="563"><figcaption></figcaption></figure></div>

Y vaya a la configuración del sitio.

<figure><img src="/files/242bbe79a6d66a2f6da5c0179d9c7881f508fdf9" alt="" width="563"><figcaption></figcaption></figure>

En la sección **Colores, fuentes y HTML** pegue el código del chat en línea copiado en el campo **código HTML en el encabezado** .

<div data-with-frame="true"><figure><img src="/files/6d753bc36dfe22f72f73e706fdb7ab0f25981a66" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="info" %}
**Pegue este código en cada página de su sitio web, dentro de la etiqueta `<head>` .**
{% endhint %}

&#x20;El chat en línea ya está conectado correctamente a su sitio web.

## Envío de un formulario para que los clientes lo completen

El chat en línea también incluye una función que permite enviar un formulario a los clientes para recopilar información del usuario y añadirlo al sistema para una interacción posterior.

<div data-with-frame="true"><figure><img src="/files/f43c829f2859ae8c86caa79a8380af6ca47453a1" alt="" width="375"><figcaption></figcaption></figure></div>

Dicho formulario se envía usando la **función online\_chat\_send\_form()** que toma los siguientes parámetros:

1. **nombre;**
2. **teléfono;**
3. **privacidad;**
4. **callback** (este parámetro solo funciona si la telefonía está integrada en el proyecto);
5. edad;
6. email\_group\_ID (si incluye este parámetro con un correo electrónico, se creará un correo del cliente y se vinculará al usuario del chat);
7. wa\_group\_ID (si incluye este parámetro con un número de teléfono, se creará un contacto de WhatsApp y se vinculará al usuario del chat).
8. *Si se especifica un grupo inexistente, el formulario se enviará, pero no se creará el cliente.*

{% hint style="danger" %}

#### Importante

Todos los parámetros se introducen como una sola cadena separada por comas.

*Ejemplo de entrada en la calculadora:* online\_chat\_send\_form("nombre,email,email\_group\_ID")
{% endhint %}

Notificación que aparecerá en el chat después de enviar el formulario

<div data-with-frame="true"><figure><img src="/files/9650049a28c06adb46733a0c27ce17acc0cf2555" alt="" width="371"><figcaption></figcaption></figure></div>

{% hint style="info" %}
Los datos enviados a través del formulario se guardan en las variables del cliente.
&#x20;Puede ver más detalles sobre estas variables a continuación en el perfil del cliente en línea.
{% endhint %}

#### <mark style="color:rojo;">!</mark> online\_chat\_send\_form(arguments, textos)

Toma dos argumentos obligatorios.

arguments - cadena de parámetros

texts - nombre del formulario

Por ejemplo, en la calculadora, puede introducirlo así: **online\_chat\_send\_form("nombre,teléfono", "Hola, por favor complete el formulario**.**")**.

<div data-with-frame="true"><figure><img src="/files/89bc0c694b569196da201957b8ba730d73100eed" alt=""><figcaption></figcaption></figure></div>

Ejemplo de la respuesta del chat en línea.

<div data-with-frame="true"><figure><img src="/files/713aa7676ea149238c1dedae34bf260c58902dc5" alt="" width="375"><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/doc/es/chatbot/mensajeros/live-chat.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.