# Change how the widget looks

Set the widget's colour, theme, position, launcher button, header, language and the pages it shows on, and check every change in the live preview.

Make the widget match your brand: your colour and logo, a button with a word on it, a dark theme for a dark website. Every setting is on the website's page in Ha Tang, and the preview next to the form shows the real widget as you change things.

You need the **Manage** access level for Customer Support.

## Where the settings are

1. Go to **Customer Support → Channels**.
2. Click your website in the **Websites & apps** group.

The website's page has three tabs:

| Tab | What it holds |
|---|---|
| **Settings** | The install code, every widget setting in this article and the next ones, the identity secret, and deleting the site. |
| **Automation** | Follow-up messages (not sent once a channel's reply window has closed: 48 hours after the customer's last message on Zalo OA and TikTok, 24 hours on Messenger, Instagram and WhatsApp), social proof, satisfaction rating (CSAT), conversion tracking, and the flows and campaigns running on this website. See [Campaigns](https://hatang.dev/help/automation/campaigns) and [Satisfaction (CSAT)](https://hatang.dev/help/reports/satisfaction-csat). |
| **Apps** | Mobile apps that use this website's widget settings. These are set up by a developer; see the [SDK guides](https://hatang.dev/docs/guides/sdks/overview). |

When you are done, click **Save settings** at the bottom of the form. "Saved. Widgets pick up changes within a minute." confirms it; visitors see the change within a minute, without you touching your website.

## The preview

The **Preview** pane (to the right of the form on a wide screen, below it on a narrow one) runs the real widget with your unsaved changes. Use the buttons above it to switch between:

- **Open** and **Launcher**: the open chat, or only the button in the corner.
- **Offline**: how the widget looks when nobody is available.
- **Details form**: the form that asks for the visitor's details when they send their first message.
- **Desktop** and **Phone**, and **VI** and **EN** for the language.

Type a message in the preview to see what the bubbles look like. Nothing typed in the preview is sent.

![The live preview of the widget](https://hatang.dev/help/img/en/widget/preview.webp)

## Colour, theme and position

The **General** card holds the basics.

| Setting | What it does |
|---|---|
| **Widget title** | The name at the top of the widget. It is also the website's name in Ha Tang. |
| **Colour** | The colour of the launcher button, the header and the visitor's messages. Click the swatch to pick one. |
| **Position** | **Bottom right** (default) or **Bottom left**. |
| **Theme** | **Light** (default), **Dark**, or **Match visitor's system**, which follows the visitor's light or dark mode and switches with it. |
| **Status** | **Active**, or **Disabled (widget hidden)** to hide the widget everywhere while keeping its history. |

![The General card with colour, position, theme and the launcher button](https://hatang.dev/help/img/en/widget/appearance-settings.webp)

## The launcher button

The round button in the corner opens the chat.

- **Icon**: **Chat bubble**, **Support headset**, **Question mark** or **Round message**, in your colour.
- **Button text (Vietnamese)** and **Button text (English)**: up to 24 characters each, such as "Tư vấn" or "Chat with us". The round button becomes a wider button with the text. Leave both empty for the icon only. Text helps when your website already has another chat or a "Contact" button.
- **Custom image (optional)**: the `https://` address of a square image, such as your logo, to use instead of the icon.

While the chat is closed, the button shows a red badge with the number of replies the visitor has not read yet.

## Size and distance from the corner

- **Chat window width**: **Narrow (340px)**, **Medium (380px)** (default) or **Wide (440px)**. On phones, the open chat always fills the whole screen.
- **Launcher distance from the corner (px)**: **Desktop: bottom** and **Desktop: side** (empty means 20 px), **Phone: bottom** and **Phone: side** (empty means 16 px). If your mobile site has a bar fixed at the bottom of the screen, such as "Add to cart" or a menu, raise **Phone: bottom** so the button sits above it. When you leave both phone fields empty, phones use the desktop values.

## The chat header

The **Chat header** card sets the top of the open chat.

- **Show**: **Online agents' photos** (default) shows up to three agents who are online right now. **Online agents' photos, or the logo when nobody is online** does the same and shows the logo when nobody is online. **One chosen member's photo** always shows the person you pick in **Member shown**, for example the owner, online or not. **Business logo** shows the logo from **Logo (https URL, square image)**, or the first letter of the widget title if there is none.
- **Intro line (Vietnamese)** and **Intro line (English)**: up to 120 characters, such as "Thường trả lời trong vài phút".

Under the intro line, the header says "We're online", or "We're away right now" followed by when you are back if you use office hours. See [Office hours and offline messages](https://hatang.dev/help/widget/office-hours).

## Language

The widget speaks Vietnamese or English. Under **Messages**, **Default language** chooses which:

- **Auto (browser)** (default): Vietnamese for visitors whose browser is set to Vietnamese, English for everyone else.
- **Tiếng Việt** or **English**: always that language.

Texts you write, such as the greeting and the button text, have a Vietnamese and an English field. Fill in both if you have foreign customers. A developer can also switch the language per page; the WordPress plugin does it for you.

## Where the widget shows

The **Where the widget shows** card limits the widget to some pages or devices:

- **Devices**: **All devices**, **Desktop only** or **Phones only** (screens 640 px wide or less).
- **Only on URLs containing**: one piece of address per line, for example `/san-pham`. The widget shows only on pages whose address contains one of them. Leave it empty for every page.
- **Hide on URLs containing**: for example `/checkout` to keep the widget off the checkout page.
- **Play a sound for new messages** and **Flash the tab title while the visitor is on another tab**: both on by default, so visitors notice your replies.

A chat the visitor already has open stays visible even on a page you excluded.