> 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-en/hablla/settings/connections-and-integrations/webchat/how-to-create-your-webchat-connection.md). # How to create your Webchat connection Step-by-step to create the Webchat connection in Hablla: new connection, additional settings, and activation of the integration script on your site. To create your Webchat connection, we will divide this practical guide into three steps: creating the connection, adjusting the channel's additional settings, and finally activating Webchat on your site. {% stepper %} {% step %} ## 1. Creating the connection **1.1.** To create your connection, you need to access your workspace settings by clicking on **Settings** (the gear icon) in the upper-right corner of your screen. **1.2.** Go to the connections tab in the left side menu, locating and clicking on the option **Connections and Integrations** **1.3.** Find the card corresponding to **Web Chat** and click the button: **+ Add**

**1.4.** On the **New Connection**screen, fill in the **Name** field, which defines how the connection will be identified within Hablla, and the **Department** field, which defines which department this channel's support requests will be directed to. **1.5.** After making these settings, we can save the created settings by clicking the **Create connection**

{% hint style="info" %} The department must exist before creating the connection. If the desired area is not yet registered, create the department in Hablla before starting the process. {% endhint %} {% endstep %} {% step %} ## 2. Additional settings Now that your connection has been created, we can move on to the additional settings of your Webchat. It is in this section that you find the integration script (the code that activates Webchat on your site) and also make all the channel's visual adjustments. Below, we explain each of the available options. ### **2.1. Integration Script** At the top of this section, the script that activates Webchat on your site is stored. To activate your Webchat, simply copy the code and paste the snippet into your site. The recommended way to activate it is to insert the copied code **after opening the** **``**tag. The script itself uses asynchronous loading, which reduces the impact on the page or site's performance. {% hint style="warning" %} **Exception:** if your system needs to use functions such as **`setManualId`** right at the beginning, the script may need to be loaded earlier, especially in systems where login happens when the page opens. {% endhint %}

{% hint style="info" %} Click the **down arrow** next to the text "**copy code**" to display the generated integration code and change your Webchat search mode. {% endhint %} ### **2.2. Channel Identification** Here you define how the channel will be identified and to whom the support requests will be directed:

Field Name	What it does
Channel Name	Name displayed in Webchat connections
Department	Team responsible for support requests.
Business Hours	Defines the time range during which the channel will be available.

### 2.3. Entry Information In this section, you configure the messages that appear when your Webchat widget is loaded on your page or site:

Field name	What this setting does
Welcome message	Displayed floating next to the button when the bubble is loaded on the site.
Message below the name (When online)	The message displayed when they are within business hours configured.
Message below the name (When offline)	The message displayed when they are outside business hours configured.

{% hint style="info" %} If your user (your customer on your site or page) receives a message and the conversation widget is closed, the received message will appear floating next to the widget. {% endhint %} ### 2.4. Layout and Design In this step, you visually adjust your Webchat to customize how it will be displayed on your page or site, keeping the channel aligned with your brand's visual identity. To see all available customization options in detail, go to the section [Visual customization](https://docs.hablla.com/hablla-docs-en/hablla/settings/connections-and-integrations/webchat/pages/8a899958bb66ba6a16817337769a2d56ecd568cb#id-2.-personalizacao-visual). {% hint style="info" %} While you make layout and design changes, a real-time preview is displayed in the lower-right corner of your screen or in the position you chose for the widget, so you can follow your edits. {% endhint %}

{% endstep %} {% step %} ## **3. Activate webchat on your site** After finishing your Webchat settings, now we just need to activate it on your site or web page. For Webchat to start being displayed, simply insert the code obtained in the **Integration Script** after the start of the **``** tag on your site and wait for the propagation time. If you do not have access or cannot edit the source code of your site, you can request support from qualified personnel with the proper access to carry out this configuration. {% 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-en/hablla/settings/connections-and-integrations/webchat/how-to-create-your-webchat-connection.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.