# Add the chat widget to your website

Create a website channel, paste its code on every page and check that visitors can chat with your team from the Inbox.

The chat widget is the chat bubble in the corner of your website. Visitors click it to write to you, and their messages land in the **Inbox** next to Zalo, Facebook and every other channel. Setting it up takes three steps: add your website in Ha Tang, copy its code, and paste the code on your site.

## Before you start

- The **Support** module is turned on for the business. While it is off, the widget does not show anywhere.
- You have the **Manage** access level for Customer Support (owners and admins always have it). See [Team and roles](https://hatang.dev/help/account/employees-and-roles).
- You know your website's address, for example `mochuongtea.vn`.
- You, or whoever looks after your website, can add code to it or install a plugin.

## Step 1: add your website

1. Go to **Customer Support → Channels** and click **Add channel**.
2. Under **Websites & apps**, pick **Website**.
3. Fill in the form:

   | Field | What to enter |
   |---|---|
   | **Site name** | A name your team will recognise, for example "Mộc Hương Tea". It is also the title at the top of the widget; you can change it later. |
   | **Domain** | The address of your website without `https://`, for example `mochuongtea.vn`. The widget works on this address and on all its subdomains, such as `www.mochuongtea.vn` or `shop.mochuongtea.vn`. |
   | **Extra allowed origins** | Optional. Other addresses where the widget must load, one per line, for example a test site `https://staging.mochuongtea.vn`. Most shops leave it empty. |

4. Click **Create site**.

![The form for a new website under Add channel](https://hatang.dev/help/img/en/widget/add-website.webp)

The website's page opens with its code ready. You find it again later under **Customer Support → Channels**, in the **Websites & apps** group.

## Step 2: copy the code

On the website's page, the **Install** card at the top shows a short piece of code with your website's ID already in it. Click **Copy snippet**.

![The Install card with the code, the install status and the steps for each platform](https://hatang.dev/help/img/en/widget/install-card.webp)

## Step 3: paste the code on your website

The code goes just before `</body>` on every page where visitors should be able to chat. Under the code, the **Install** card has step-by-step instructions for the most common platforms; click a platform's name to open them.

| Your website runs on | What to do |
|---|---|
| WordPress | Use the Ha Tang Chat plugin: you paste only the Site ID, no code. See [Install the widget on WordPress](https://hatang.dev/help/widget/install-on-wordpress). |
| Shopify | **Online Store → Themes → Edit code**, open `layout/theme.liquid`, paste the code just before `</body>` and save. |
| Haravan | **Website → Giao diện → Chỉnh sửa mã nguồn**, open `layout/theme.liquid`, paste the code before `</body>` and save. |
| LadiPage | Open the landing page, then **Thiết lập → Mã JavaScript/CSS** in the toolbar. Paste the code, save and publish again. Repeat on every landing page. |
| Sapo | **Website → Giao diện → Thao tác → Chỉnh sửa HTML/CSS**, open `Theme.bwt`, paste the code just before `</body>` and save. |
| Google Tag Manager | **Tags → New → Custom HTML**, paste the code, choose the **All Pages** trigger, save and publish the container. |
| Webflow | **Project settings → Custom code → Footer code**, paste the code and publish. |
| Built by a developer | Send them the code and the [developer guide](https://hatang.dev/docs/guides/support/web-widget/install). React and Next.js sites can use the ready-made component. |

> [!TIP]
> If your website shows the chat in some places only (for example not on the checkout page), install it everywhere anyway and choose the pages under **Where the widget shows** in the widget settings. See [Change how the widget looks](https://hatang.dev/help/widget/appearance).

## Step 4: check that it works

1. Open your website in a browser. The chat bubble appears in the bottom-right corner.
2. Back on the website's page in Ha Tang, the **Install** card now shows **Installed on** your domain and when the widget was **last seen**. Until the widget has loaded on your site once, it shows **Not detected yet**. The status refreshes at most once a minute.
3. Send a test message from the widget. It appears in **Customer Support → Inbox** as a new conversation.

On the **Channels** page, the website's status changes from **Not installed** to **Active**.


## Step 5: recognise logged-in users (if your site has sign-in)

If customers sign in to your website, let the site tell the widget who they are. Your team then sees the name, email and a **Verified** label in the Inbox, customers keep one chat history across devices, and [profile links](https://hatang.dev/help/inbox/profile-links) open the right customer in your admin. Without this step every customer is an **Unverified** stranger.

It takes a developer, on your server, with the website's identity secret. How to get the secret, what the developer does and how to check it are in [Recognise logged-in users](https://hatang.dev/help/widget/identify-users).

## More than one website

Add one website channel per domain or brand: **Customer Support → Channels → Add channel → Website** again. Each website has its own code, its own widget settings and its own [identity secret](https://hatang.dev/help/widget/identify-users). All conversations still land in the same **Inbox**, and the website they came from is shown on each one.

Channels such as Zalo OA or a Facebook Page are attached to a website too: their conversations use that website's reports, distribution rules and automation. See [How channels work](https://hatang.dev/help/channels/channels-overview).

## Remove or pause the widget

- To hide the widget without losing anything, open the website's page and set **Status** to **Disabled (widget hidden)**, then click **Save settings**.
- **Delete site**, at the bottom of the page, permanently deletes the website with its conversations, visitors, connected social channels and app keys. Type the site's name to confirm. This cannot be undone.