> ## Documentation Index
> Fetch the complete documentation index at: https://chatbotx.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Cách tạo Webchat trên ChatbotX

> Hướng dẫn tạo kênh Webchat trong ChatbotX, cấu hình widget, lấy mã nhúng và kiểm tra Webchat trên website của bạn.

**Webchat** giúp bạn đặt khung chat trực tiếp lên website để khách có thể nhắn tin ngay khi đang xem trang. Trong ChatbotX, bạn có thể tạo Webchat mới, chọn Welcome Flow, thêm domain được phép dùng widget, cấu hình nội dung mở đầu, chỉnh giao diện và lấy mã nhúng để gắn vào website.

## Tạo Webchat

Bạn có thể tạo Webchat theo một trong hai cách sau:

### Cách 1: Từ luồng tạo Inbox mới

<Steps>
  <Step title="Vào mục Analytics">
    Từ menu trái, chọn **Analytics**.
  </Step>

  <Step title="Mở luồng tạo Inbox">
    Nhấn **Create Inbox** để bắt đầu thêm kênh mới.
  </Step>

  <Step title="Chọn Webchat">
    Chọn **Webchat** trong danh sách kênh.
  </Step>

  <Step title="Tiếp tục tạo kênh">
    Nhấn **Continue** để mở màn hình tạo Webchat.
  </Step>

  <Step title="Nhập tên và tạo Webchat">
    Nhập tên Webchat rồi nhấn **Create Webchat**.
  </Step>
</Steps>

### Cách 2: Từ phần quản lý Channels

<Steps>
  <Step title="Vào mục Settings">
    Từ menu trái, chọn **Settings**.
  </Step>

  <Step title="Mở tab Channels">
    Chọn tab **Channels** để xem danh sách kênh.
  </Step>

  <Step title="Tìm Webchat">
    Tìm mục **Webchat** trong danh sách kênh.
  </Step>

  <Step title="Mở trang quản lý Webchat">
    Nhấn **Manage** hoặc đi thẳng vào trang **Channels > Webchat**.
  </Step>

  <Step title="Tạo Webchat mới">
    Nhấn nút **Add Webchat** để tạo mới.
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/chatbotx/bk1D42eDWTivbgT_/images/image-211.png?fit=max&auto=format&n=bk1D42eDWTivbgT_&q=85&s=2406f86bfbe58a750248dd6aa1b9bfbc" alt="settings_channels_webchat_manage" width="2954" height="1279" data-path="images/image-211.png" />
</Frame>

## Trang Channels > Webchat

Khi vào trang **Channels > Webchat**, bạn sẽ thấy danh sách các Webchat đã tạo.

<Frame>
  <img src="https://mintcdn.com/chatbotx/bk1D42eDWTivbgT_/images/image-212.png?fit=max&auto=format&n=bk1D42eDWTivbgT_&q=85&s=8880ce952a6c1b40e909488eaff3afbc" alt="webchat_list" width="2383" height="565" data-path="images/image-212.png" />
</Frame>

## Cấu hình Webchat mới

<Steps>
  <Step title="Nhấn Add Webchat">
    Tại trang **Channels > Webchat**, nhấn **Add Webchat**.
  </Step>

  <Step title="Điền tên Webchat">
    Trong form tạo mới, trường đầu tiên là **Name**. Đây là tên nội bộ để bạn phân biệt từng Webchat nếu bạn dùng nhiều website hoặc nhiều phiên bản widget.
  </Step>

  <Step title="Chọn Welcome Flow nếu cần">
    Phần **Welcome Flow (optional)** cho phép bạn chọn một Flow có sẵn. Tin nhắn chào sẽ được gửi tự động khi người dùng mở Webchat. Nếu chưa cần gửi lời chào tự động, bạn có thể để trống trường này.
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/chatbotx/bk1D42eDWTivbgT_/images/image-213.png?fit=max&auto=format&n=bk1D42eDWTivbgT_&q=85&s=bbeab83f196fc841f6bb7ef416cc9e4d" alt="webchat_setup" width="2532" height="1793" data-path="images/image-213.png" />
</Frame>

## Các tính năng cấu hình chính

Sau phần tên và Welcome Flow, form Webchat cho phép bạn cấu hình các tính năng sau.

## Authorized Domains

**Authorized Domains** là danh sách domain hoặc subdomain được phép sử dụng Webchat của bạn.

Bạn nhấn **Add Authorized Domain** để thêm domain mới. Đây là bước quan trọng vì phần mã nhúng chỉ hoạt động trên những domain đã được cho phép trong cấu hình.

## Conversation Starters

**Conversation Starters** là các câu mở đầu giúp khách bắt đầu cuộc trò chuyện nhanh hơn.

Bạn nhấn **Add Conversation Starter** để thêm câu gợi ý. Tính năng này phù hợp khi bạn muốn khách chọn nhanh một chủ đề như:

* Báo giá
* Đặt lịch tư vấn
* Hỏi về sản phẩm

## Persistent Menus

**Persistent Menus** là menu luôn hiện để người dùng bắt đầu hoặc điều hướng cuộc trò chuyện.

Bạn nhấn **Add Persistent Menu** để thêm mục menu. Đây là cách phù hợp khi bạn muốn khách luôn thấy các lựa chọn chính thay vì phải gõ tay từ đầu.

## Tùy chỉnh giao diện Webchat

Form cấu hình cho phép bạn chỉnh phần hiển thị của widget.

### Brand Color

**Brand Color** dùng để đặt màu chính cho Webchat. Từ giao diện hiện tại, bạn có thể:

* chọn màu bằng ô màu
* hoặc nhập mã màu trực tiếp như `#007BFF`

### Show Header

Toggle **Show Header** cho phép bạn bật hoặc tắt phần header của widget.

### Show Personal Logo

Toggle **Show Personal Logo** cho phép bạn quyết định có hiện logo riêng trong widget hay không.

### Show Message Input

Toggle **Show Message Input** cho phép bạn bật hoặc tắt ô nhập tin nhắn.

Nếu bạn tắt ô nhập, người dùng có thể chỉ tương tác qua những thành phần bạn đã chuẩn bị sẵn như Conversation Starters hoặc Persistent Menus.

### Custom CSS (optional)

Trường **Custom CSS (optional)** cho phép bạn thêm CSS riêng để chỉnh giao diện Webchat theo website của bạn.

Ví dụ trong ảnh là một đoạn CSS đổi nền:

```css theme={null}
body { background-color: #000; }
```

Sau khi điền đủ các phần cần thiết, nhấn **Create Webchat** để tạo kênh mới.

> **Image Alt Tag:** \[webchat\_form\_brand\_toggles\_css]

## Lấy mã nhúng để gắn lên website

Sau khi Webchat đã được tạo, quay lại danh sách **Channels > Webchat**.

Tại mỗi dòng Webchat, nhấn vào **icon embed code** để mở cửa sổ **Embed Code**.

Trong cửa sổ này, bạn sẽ thấy:

* phần mô tả rằng bạn cần copy code để nhúng chat widget vào website
* ô chứa **Embed Code**
* nút copy để sao chép nhanh
* phần **Security Note**

Nội dung cảnh báo bảo mật trong cửa sổ này nhắc rõ rằng widget chỉ hoạt động trên những domain đã được thêm vào danh sách **Authorized Domains**.

<Frame>
  <img src="https://mintcdn.com/chatbotx/bk1D42eDWTivbgT_/images/image-214.png?fit=max&auto=format&n=bk1D42eDWTivbgT_&q=85&s=4bfee2be6a80ef00d79fef436642f2ca" alt="webchat_embed_code_modal" width="2380" height="1545" data-path="images/image-214.png" />
</Frame>

## Kiểm tra Webchat

Ngay trong danh sách **Channels > Webchat**, bạn có thể nhấn vào **icon demo/test** để mở thử Webchat.

Đây là bước nên làm sau khi tạo xong để kiểm tra nhanh:

* Welcome Flow có chạy như mong đợi không
* Người dùng có nhìn thấy Conversation Starters, Persistent Menus hoặc ô nhập tin nhắn đúng như bạn đã bật không

> **Lưu ý:** Nếu Webchat không hoạt động sau khi nhúng, hãy kiểm tra lại danh sách **Authorized Domains** trước tiên. Đây là chi tiết được cảnh báo trực tiếp trong cửa sổ **Embed Code**.