> For the complete documentation index, see [llms.txt](https://docs.hablla.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hablla.com/hablla-docs-es/hablla/configuraciones/conexiones-e-integraciones/webchat.md). # Webchat Conozca el canal de Webchat de Hablla: qué es, cómo el modo de búsqueda identifica a cada visitante de su sitio web y qué opciones de personalización visual están disponibles. ## Qué es el Webchat El **Webchat de Hablla** es un canal de atención que permite que tus clientes conversen con tu empresa **directamente a través del sitio web**, sin necesidad de salir de la página. En la práctica, funciona de la misma manera que los otros canales de la plataforma, como **WhatsApp**, **Instagram** y **Telegram**: es una conexión más *conexión* dentro de Hablla. Esto significa que el Webchat puede utilizar: * Flujos * Inteligencia Artificial * Bots * Atención humana * Automatización La única diferencia es el punto de contacto: en lugar de una aplicación de mensajería, la conversación ocurre dentro del sitio web de tu empresa. *** ## Importante saber Antes de configurar el canal, conviene entender dos conceptos que definen el comportamiento del Webchat: **cómo identifica quién está conversando** y **cómo aparece en tu sitio web**. ### 1. Modo de búsqueda Así como WhatsApp usa el número de teléfono para saber quién está del otro lado, el Webchat también necesita una **identificación única** para reconocer al visitante. Esta identificación es lo que garantiza: * el mantenimiento del historial de la conversación; * el reconocimiento del usuario que ya habló contigo; * que no se creen leads duplicados; * la continuidad de la atención incluso después de actualizar la página. El campo **Modo de búsqueda**, en la pantalla de configuración del canal, define cuál de estos comportamientos se usará. A continuación, hablaremos sobre cada uno de los modos disponibles para la configuración de tu canal de Webchat en Hablla: #### 1.1. Modo de búsqueda automático En este modo, tu Webchat genera automáticamente un ID para el visitante y lo guarda en el **Local Storage** del navegador del usuario, es decir, la persona que te envía un mensaje a través del Webchat dentro de tu sitio web. Con esto, el usuario puede actualizar la página, salir y volver después, y la conversación continúa normalmente. Es el modo más simple de configurar y no requiere ningún desarrollo en tu sitio web. {% hint style="danger" %} Si se borra el Local Storage del navegador del usuario (la persona que se pone en contacto contigo), se generará un nuevo ID. El sistema entenderá que se trata de otra persona y se podrá crear una nueva *persona* en Hablla. {% endhint %} #### 1.2. Modo de búsqueda manual Aquí eres tú quien define qué información se usará como identificador del usuario que se está comunicando contigo y de dónde se obtendrá esa información. Por ejemplo: * CPF * Correo electrónico * ID interno del sistema * Matrícula * Código del usuario En este modo, también debes definir cuál será la **fuente de búsqueda**, es decir, **dónde** el sistema buscará la información que definiste como identificador:
Fuente de búsquedaDónde el Webchat busca el identificador
Local StorageAlmacenamiento del navegador que permanece guardado incluso después de cerrar la pestaña o el navegador.
Session StorageAlmacenamiento temporal en el navegador, utilizado durante la sesión del Webchat. Los datos permanecen disponibles mientras la sesión esté activa, respetando el tiempo de expiración configurado por el sistema.
CookiesCookies guardadas en el navegador del usuario por su propio sitio web.
PersonalizadoEl propio sistema de tu sitio web envía el identificador al Webchat, iniciando el sistema de mensajería con base en el ID informado por tu sistema.
{% hint style="danger" %} Si la variable configurada no existe en la fuente de búsqueda elegida, **el widget NO se carga**. El funcionamiento del Webchat pasa a depender de que esta información esté disponible en el navegador del usuario. {% endhint %} *** ### 2. Personalización visual La conexión de Webchat también permite personalizar la apariencia del botón y de la ventana de atención, para que el canal se alinee con la identidad visual de tu sitio web. Entre las opciones disponibles, puedes personalizar el diseño, la tipografía y los colores de tu Webchat. **Diseño y layout** * Formato de visualización del chat * Posicionamiento en la pantalla (las cuatro esquinas) * Animación de entrada * Espaciado vertical y horizontal * Altura y anchura del chat y del botón * Imagen del chat e imagen del botón **Tipografía** * Fuente * Tamaño * Peso de la fuente * Color del texto del mensaje **Colores** * Modo claro, oscuro o automático * Encabezado del chat en color sólido o degradado * Color de los mensajes del cliente * Color del botón Mientras haces los ajustes, la plataforma muestra una **vista previa en tiempo real** en la esquina inferior derecha de la pantalla o en la posición que elegiste para que se cargue el widget. Esto facilita mucho ajustar los detalles sin necesidad de publicar nada. {% hint style="info" %} La vista previa sirve solo para mostrar el aspecto del widget. No **realiza pruebas reales de envío y recepción de mensajes**. {% endhint %} ## Buenas prácticas * Confirma que ya exista un **departamento** registrado antes de iniciar la creación de tu conexión de Webchat. * Usa nombres descriptivos en las conexiones y credenciales, para facilitar la gestión cuando haya más de un Webchat. * Recomendamos usar el modo de búsqueda en **modo automático** cuando no haya inicio de sesión en el sitio; usa **Manual** solo cuando exista un identificador confiable disponible en la página. * Prueba localmente antes de publicar el script en el sitio en producción. *** {% hint style="info" %} **Observación:** Esta documentación aborda solo el funcionamiento de la funcionalidad. Para información sobre cobros, costos o condiciones comerciales, consulta el contrato vigente o ponte en contacto con el área responsable. {% endhint %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.hablla.com/hablla-docs-es/hablla/configuraciones/conexiones-e-integraciones/webchat.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.