# Gắn widget chat lên website

Tạo kênh website, dán đoạn mã lên mọi trang và kiểm tra khách đã chat được với đội ngũ của bạn trong Hộp thư.

Widget chat là bong bóng chat ở góc website của bạn. Khách bấm vào để nhắn cho shop, và tin nhắn về **Hộp thư** cùng chỗ với Zalo, Facebook và mọi kênh khác. Chỉ cần ba bước: thêm website trong Hạ Tầng, sao chép đoạn mã, rồi dán đoạn mã lên website.

## Trước khi bắt đầu

- Module **Hỗ trợ** đang bật cho doanh nghiệp. Khi module tắt, widget không hiện ở đâu cả.
- Bạn có quyền **Quản lý** với module Hỗ trợ (chủ sở hữu và quản trị viên luôn có). Xem [Nhân viên và vai trò](https://hatang.dev/vi/help/account/employees-and-roles).
- Bạn biết địa chỉ website, ví dụ `mochuongtea.vn`.
- Bạn, hoặc người quản lý website, có thể thêm mã hoặc cài plugin cho website.

## Bước 1: thêm website

1. Vào **Hỗ trợ khách hàng → Kênh** và bấm **Thêm kênh**.
2. Trong nhóm **Website & ứng dụng**, chọn **Website**.
3. Điền biểu mẫu:

   | Trường | Nhập gì |
   |---|---|
   | **Tên site** | Tên để cả đội dễ nhận ra, ví dụ "Mộc Hương Tea". Đây cũng là tiêu đề trên đầu widget; đổi lại được sau. |
   | **Tên miền** | Địa chỉ website, không có `https://`, ví dụ `mochuongtea.vn`. Widget chạy trên địa chỉ này và mọi tên miền phụ của nó, như `www.mochuongtea.vn` hay `shop.mochuongtea.vn`. |
   | **Origin được phép thêm** | Không bắt buộc. Những địa chỉ khác cần chạy widget, mỗi dòng một địa chỉ, ví dụ trang thử nghiệm `https://staging.mochuongtea.vn`. Phần lớn shop để trống. |

4. Bấm **Tạo site**.

![Biểu mẫu thêm website trong Thêm kênh](https://hatang.dev/help/img/vi/widget/add-website.webp)

Trang của website mở ra với đoạn mã đã sẵn sàng. Lần sau, bạn tìm lại nó trong **Hỗ trợ khách hàng → Kênh**, nhóm **Website & ứng dụng**.

## Bước 2: sao chép đoạn mã

Trên trang của website, thẻ **Cài lên website** ở trên cùng hiện một đoạn mã ngắn đã có sẵn ID của website. Bấm **Sao chép mã**.

![Thẻ Cài lên website với đoạn mã, trạng thái cài đặt và hướng dẫn cho từng nền tảng](https://hatang.dev/help/img/vi/widget/install-card.webp)

## Bước 3: dán đoạn mã lên website

Đoạn mã được dán ngay trước `</body>` trên mọi trang mà bạn muốn khách chat được. Bên dưới đoạn mã, thẻ **Cài lên website** có hướng dẫn từng bước cho các nền tảng phổ biến; bấm vào tên nền tảng để mở.

| Website của bạn chạy trên | Cách làm |
|---|---|
| WordPress | Dùng plugin Hạ Tầng Chat: chỉ cần dán Site ID, không đụng tới mã. Xem [Cài widget trên WordPress](https://hatang.dev/vi/help/widget/install-on-wordpress). |
| Shopify | **Online Store → Themes → Edit code**, mở `layout/theme.liquid`, dán mã ngay trước `</body>` rồi lưu. |
| Haravan | **Website → Giao diện → Chỉnh sửa mã nguồn**, mở `layout/theme.liquid`, dán mã trước `</body>` rồi lưu. |
| LadiPage | Mở landing page, trên thanh công cụ chọn **Thiết lập → Mã JavaScript/CSS**. Dán mã, lưu rồi xuất bản lại. Làm cho từng landing page. |
| Sapo | **Website → Giao diện → Thao tác → Chỉnh sửa HTML/CSS**, mở `Theme.bwt`, dán mã ngay trước `</body>` rồi lưu. |
| Google Tag Manager | **Tags → New → Custom HTML**, dán mã, chọn trigger **All Pages**, lưu rồi publish container. |
| Webflow | **Project settings → Custom code → Footer code**, dán mã rồi publish. |
| Website do lập trình viên làm | Gửi họ đoạn mã và [hướng dẫn cho lập trình viên](https://hatang.dev/vi/docs/guides/support/web-widget/install). Website React, Next.js có sẵn component để dùng. |

> [!TIP]
> Nếu chỉ muốn hiện chat ở một số trang (ví dụ không hiện ở trang thanh toán), cứ cài lên mọi trang rồi chọn trang trong mục **Nơi hiện widget** của phần cài đặt widget. Xem [Tùy chỉnh giao diện widget](https://hatang.dev/vi/help/widget/appearance).

## Bước 4: kiểm tra

1. Mở website của bạn trên trình duyệt. Bong bóng chat hiện ở góc dưới bên phải.
2. Quay lại trang của website trong Hạ Tầng, thẻ **Cài lên website** giờ hiện **Đã cài trên** tên miền của bạn và thời điểm **lần cuối** thấy widget. Khi widget chưa từng tải trên website, thẻ hiện **Chưa phát hiện**. Trạng thái cập nhật tối đa mỗi phút một lần.
3. Gửi thử một tin nhắn từ widget. Tin nhắn hiện trong **Hỗ trợ khách hàng → Hộp thư** thành một hội thoại mới.

Trên trang **Kênh**, trạng thái của website chuyển từ **Chưa cài** sang **Hoạt động**.

## Bước 5: nhận diện khách đã đăng nhập (nếu website có đăng nhập)

Nếu khách đăng nhập vào website của bạn, hãy để website báo cho widget khách là ai. Khi đó nhân viên thấy tên, email và nhãn **Đã xác minh** trong Hộp thư, khách giữ cùng một lịch sử chat trên mọi thiết bị, và [liên kết hồ sơ](https://hatang.dev/vi/help/inbox/profile-links) mở đúng khách trong trang quản trị của bạn. Không làm bước này, mọi khách đều là khách lạ **Chưa xác minh**.

Việc này cần lập trình viên làm trên máy chủ bằng mã bí mật định danh của website. Xem cách lấy mã, việc lập trình viên cần làm và cách kiểm tra trong [Nhận diện khách đã đăng nhập](https://hatang.dev/vi/help/widget/identify-users).

## Nhiều website

Mỗi tên miền hoặc thương hiệu là một kênh website riêng: vào lại **Hỗ trợ khách hàng → Kênh → Thêm kênh → Website**. Mỗi website có đoạn mã, cài đặt widget và [mã bí mật định danh](https://hatang.dev/vi/help/widget/identify-users) riêng. Mọi hội thoại vẫn về chung một **Hộp thư**, và mỗi hội thoại ghi rõ đến từ website nào.

Các kênh như Zalo OA hay trang Facebook cũng gắn vào một website: hội thoại của chúng dùng báo cáo, quy tắc phân phối và tự động hoá của website đó. Xem [Cách các kênh hoạt động](https://hatang.dev/vi/help/channels/channels-overview).

## Tạm ẩn hoặc gỡ widget

- Muốn ẩn widget mà không mất gì, mở trang của website, đặt **Trạng thái** thành **Đã tắt (ẩn widget)** rồi bấm **Lưu cài đặt**.
- **Xoá site** ở cuối trang sẽ xoá vĩnh viễn website cùng hội thoại, khách truy cập, các kênh mạng xã hội đã kết nối và app key của nó. Bạn phải gõ tên site để xác nhận. Không thể khôi phục.