> 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.md).

# Webchat

Learn about Hablla's Webchat channel: what it is, how search mode identifies each visitor on your site, and which visual customization options are available.

## What is Webchat

The **Hablla's Webchat** is a support channel that allows your customers to talk to your company **directly through the website**, without needing to leave the page. In practice, it works the same way as the other channels on the platform, such as **WhatsApp**, **Instagram** and **Telegram**: it is one more *connection* within Hablla. This means that Webchat can use:

* Flows
* Artificial Intelligence
* Bots
* Human support
* Automation

The only difference is the point of contact: instead of a messaging app, the conversation happens within your company's website.

***

## Important to Know

Before configuring the channel, it is worth understanding two concepts that define Webchat's behavior: **how it identifies who is chatting** and **how it appears on your website**.

### 1. Search mode

Just as WhatsApp uses the phone number to know who is on the other side, Webchat also needs a **unique identifier** to recognize the visitor.

This identifier is what ensures:

* the preservation of the conversation history;
* recognition of the user who has already spoken with you;
* that duplicate leads are not created;
* continuity of service even after refreshing the page.

The field **Search mode**, on the channel settings screen, defines which of these behaviors will be used. Next, we will talk about each of the modes available for configuring your Webchat channel in Hablla:

#### 1.1. Automatic Search Mode

In this mode, your Webchat automatically generates an ID for the visitor and saves it in the **Local Storage** of the user's browser, that is, the person who sends you a message through Webchat on your website.

With this, the user can refresh the page, leave and come back later, and the conversation continues normally. It is the simplest mode to set up and does not require any development on your website.

{% hint style="danger" %}
If the user's browser Local Storage (the person contacting you) is cleared, a new ID will be generated. The system will understand that it is another person and a new *person* may be created in Hablla.
{% endhint %}

#### 1.2. Manual Search Mode

Here, you define which information will be used as the identifier of the user communicating with you and where that information will be obtained. For example:

* CPF
* Email
* Internal system ID
* Registration number
* User code

In this mode, you must also define what the **search source**, that is, **where** the system will look for the information you defined as the identifier:

<table><thead><tr><th width="231.5516357421875">Search source</th><th>Where Webchat looks for the identifier</th></tr></thead><tbody><tr><td><strong>Local Storage</strong></td><td>Browser storage that remains saved even after closing the tab or the browser.</td></tr><tr><td><strong>Session Storage</strong></td><td>Temporary browser storage used during the Webchat session. The data remains available while the session is active, respecting the expiration time configured by the system.</td></tr><tr><td><strong>Cookies</strong></td><td>Cookies stored in the user's browser by your own website.</td></tr><tr><td><strong>Custom</strong></td><td>Your website's own system sends the identifier to Webchat, initializing the messaging system based on the ID provided by your system.</td></tr></tbody></table>

{% hint style="danger" %}
If the configured variable does not exist in the chosen search source, **the widget NOT load**. Webchat's operation then depends on this information being available in the user's browser.
{% endhint %}

***

### 2. Visual customization

The Webchat connection also allows you to customize the appearance of the button and the support window, so that the channel matches your website's visual identity. Among the available options, you can customize the Layout, Typography, and Colors of your Webchat.

**Layout and Design**

* Chat display format
* Screen placement (the four corners)
* Entrance animation
* Vertical and horizontal spacing
* Height and width of the chat and button
* Chat image and button image

**Typography**

* Font
* Size
* Font weight
* Message text color

**Colors**

* Light, Dark, or Automatic mode
* Chat header in solid color or gradient
* Customer message color
* Button color

While you make adjustments, the platform displays a **real-time preview** in the bottom right corner of the screen or in the position you chose for the widget to load. This makes it much easier to get the details right without needing to publish anything.

{% hint style="info" %}
The preview is only meant to show the widget's appearance. It **does not perform real tests of sending and receiving messages**.
{% endhint %}

## Best practices

* Confirm that there is already a **department** registered before you begin creating your Webchat connection.
* Use descriptive names for connections and credentials to make management easier when there is more than one Webchat.
* We recommend using search mode in the **Automatic mode** when there is no login on the website; use **Manual** only when there is a reliable identifier available on the page.
* Test locally before publishing the script on the production website.

***

{% hint style="info" %}
**Note:** This documentation covers only how the feature works. For information about billing, costs, or commercial terms, consult the current contract or contact the responsible department.
{% 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-en/hablla/settings/connections-and-integrations/webchat.md?ask=<question>&goal=<endgoal>
```

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