> 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/como-crear-tu-conexion-de-webchat.md). # Cómo crear tu conexión de Webchat Paso a paso para crear la conexión de Webchat en Hablla: nueva conexión, configuraciones adicionales y activación del script de integración en tu sitio web. Para crear tu conexión de Webchat, vamos a dividir esta guía práctica en tres pasos: la creación de la conexión, el ajuste de las configuraciones adicionales del canal y, por último, la activación del Webchat en tu sitio web. {% stepper %} {% step %} ## 1. Creación de la conexión **1.1.** Para crear tu conexión, necesitas acceder a las configuraciones de tu workspace haciendo clic en **Configuraciones** (el ícono de engranaje) en la esquina superior derecha de tu pantalla. **1.2.** Accede a la pestaña de conexiones, en el menú lateral izquierdo, localizando y haciendo clic en la opción **Conexiones e Integraciones** **1.3.** Localiza la tarjeta correspondiente al **Web Chat** y haz clic sobre el botón: **+ Agregar**

**1.4.** En la pantalla de **Nueva Conexión**, completa los campos de **Nombre** que define cómo se identificará la conexión dentro de Hablla y el **Sector** que define a qué sector se dirigirán las atenciones de este canal. **1.5.** Después de realizar estas configuraciones, podemos guardar las configuraciones creadas haciendo clic en el botón **Crear conexión**

{% hint style="info" %} El sector debe existir antes de crear la conexión. Si el área deseada aún no está registrada, crea el sector en Hablla antes de iniciar el proceso. {% endhint %} {% endstep %} {% step %} ## 2. Configuraciones adicionales Ahora que tu conexión ya está creada, podemos avanzar a las configuraciones adicionales de tu Webchat. Es en esta sección donde encuentras el script de integración (el código que activa el Webchat en tu sitio web) y también realizas todos los ajustes visuales del canal. A continuación, explicamos cada una de las opciones disponibles. ### **2.1. Script de Integración** En la parte superior de esta sección se almacena el script que activa el Webchat en tu sitio web. Para activar tu Webchat, solo tienes que copiar el código y pegar el fragmento en tu sitio web. La recomendación para la activación es insertar el código copiado **después de la apertura de la etiqueta** **``**. El propio script utiliza carga asíncrona, lo que reduce el impacto en el rendimiento de la página o sitio web. {% hint style="warning" %} **Excepción:** si tu sistema necesita utilizar funciones como **`setManualId`** desde el inicio, es posible que el script deba cargarse antes, principalmente en sistemas donde el inicio de sesión ocurre al abrir la página. {% endhint %}

{% hint style="info" %} Haz clic en la **flecha hacia abajo** junto al texto "**copiar código**" para mostrar el código de integración generado y para cambiar el modo de búsqueda de tu Webchat. {% endhint %} ### **2.2. Identificación del Canal** Aquí defines cómo se identificará el canal y a quién se dirigirán las atenciones:

Nombre del Campo	Qué hace
Nombre del Canal	Nombre mostrado en las conexiones de Webchat
Sector	Equipo responsable de las atenciones.
Horario Comercial	Define el rango horario en el que el canal estará disponible.

### 2.3. Informaciones de Entrada En esta sección, configuras los mensajes que aparecen cuando el widget de tu Webchat se carga en tu página o sitio web:

Nombre del campo	Qué hace esta configuración
Mensaje de bienvenida	Se muestra flotando al lado del botón cuando el globo se carga en el sitio web.
Mensaje debajo del nombre (Cuando en línea)	El mensaje que se muestra cuando están dentro del horario comercial configurado.
Mensaje debajo del nombre (Cuando fuera de línea)	El mensaje que se muestra cuando están fuera del horario comercial configurado.

{% hint style="info" %} Si tu usuario (tu cliente en tu sitio web o página) recibe un mensaje y el widget de la conversación está cerrado, el mensaje recibido aparecerá flotando al lado del widget. {% endhint %} ### 2.4. Diseño y Layout En este paso, ajustas visualmente tu Webchat para personalizar la forma en que se mostrará en tu página o sitio web, dejando el canal alineado con la identidad visual de tu marca. Para ver en detalle todas las opciones de personalización disponibles, accede a la sección [Personalización visual](https://docs.hablla.com/hablla-docs-es/hablla/configuraciones/conexiones-e-integraciones/webchat/pages/10f7902630cd78224815c7438f62b3a95008c7fc#id-2.-personalizacao-visual). {% hint style="info" %} Mientras realizas los cambios de layout y diseño, se muestra una vista previa en tiempo real en la esquina inferior derecha de tu pantalla o en la posición que elegiste para el widget, para que sigas tus ediciones. {% endhint %}

{% endstep %} {% step %} ## **3. Activar webchat en tu sitio web** Después de finalizar las configuraciones de tu Webchat, ahora solo necesitamos activarlo en tu sitio web o página web. Para que el Webchat empiece a mostrarse, solo tienes que insertar el código obtenido en el **Script de Integración** después del inicio de la etiqueta **``** de tu sitio web y esperar el tiempo de propagación. Si no tienes acceso o no puedes editar el código fuente de tu sitio web, puedes solicitar el apoyo de personal cualificado y con los accesos correspondientes para realizar esta configuración. {% endstep %} {% endstepper %} --- # 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 by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.hablla.com/hablla-docs-es/hablla/configuraciones/conexiones-e-integraciones/webchat/como-crear-tu-conexion-de-webchat.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.