Ctrlk
Studio Hablla
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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.

1

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 Connectionscreen, 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

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.

2

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 <body>tag. The script itself uses asynchronous loading, which reduces the impact on the page or site's performance.

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.

Click the down arrow next to the text "copy code" to display the generated integration code and change your Webchat search mode.

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.

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.

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.

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.

3

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 <body> 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.

PreviousWebchat
NextHow to test your webchat locally

Last updated

Was this helpful?