# Nhúng Lên Website

{% hint style="warning" %}
Lưu ý: Mỗi lần điều chỉnh bạn cần bấm "Lưu" -> Sẽ cập nhật một mã nhúng mới -> Cập nhật lên Website/ Landing Page phiên bản mới nhất
{% endhint %}

### <mark style="color:blue;">Hướng dẫn nhúng AI Assistant lên website</mark>

{% @arcade/embed flowId="BX370VMhSA198JuigpJU" url="<https://app.arcade.software/share/BX370VMhSA198JuigpJU>" %}

***

### **Bước 1: Cài Đặt Thông Tin Chatbot**

#### **Logo Chatbot:**

Chọn biểu tượng hoặc logo đại diện cho chatbot của bạn. ( Kích thước 1:1)

<figure><img src="https://1193421089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPx17BWbofWEl1Y5epvoq%2Fuploads%2FVwtPPGT2XGWey2edQ1tu%2Fimage.png?alt=media&#x26;token=32d6e0af-ba2d-4404-b643-8df726e49a0b" alt=""><figcaption></figcaption></figure>

#### **Tên Chatbot:**

Ví dụ: **Bé Quê - Tư Vấn viên.**

**Mô Tả Chatbot (Không Bắt Buộc):**

Mô tả sẽ hiển thị với người dùng để giúp họ hiểu chức năng chatbot.

* *Ví dụ:*\
  \&#xNAN;*"Dạ chào anh/chị - Em là Bé Quê, rất vui được hỗ trợ mọi người về Quà Tết 2025 từ Vị Quê. Mình tìm quà cho doanh nghiệp, cá nhân ạ."*

<figure><img src="https://1193421089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPx17BWbofWEl1Y5epvoq%2Fuploads%2F2FVqOr5VjekAimuXF90k%2Fimage.png?alt=media&#x26;token=7b4cbae8-365d-47b9-b1d0-8c084de9b63b" alt=""><figcaption></figcaption></figure>

***

### **Bước 2: Tuỳ Chỉnh Màu Sắc Khung Chat**

* **Mã Màu Khung Chat:** Chọn màu phù hợp với thương hiệu hoặc trang web của bạn.
  * Gợi ý: Sử dụng mã màu hơi tối để tạo sự hài hòa, ví dụ: `#2971ff`.
* Nếu chưa hài lòng với màu sắc, bạn có thể quay lại điều chỉnh sau.

<figure><img src="https://1193421089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPx17BWbofWEl1Y5epvoq%2Fuploads%2FIVXZpBd20uGOkRDyAbGx%2Fimage.png?alt=media&#x26;token=5d045026-ca59-4219-862a-9bad11f58dfa" alt=""><figcaption></figcaption></figure>

***

### **Bước 3: Tạo Văn Bản Giới Thiệu Chatbot**

<figure><img src="https://1193421089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPx17BWbofWEl1Y5epvoq%2Fuploads%2Fmy8hy125S0FBUCR8rZ4y%2Fimage.png?alt=media&#x26;token=74ebb899-2c24-4a03-9d89-2ad472136c89" alt=""><figcaption></figcaption></figure>

**Câu Giới Thiệu (Không Bắt Buộc):**\
Câu giới thiệu này sẽ xuất hiện trên logo chat khi người dùng truy cập vào website. Bạn có thể bỏ trống nếu không cần hiển thị.

***

### **Bước 4: Nhúng Chatbot Lên Website**

1. **Copy đoạn mã nhúng Chatbot (iFrame)** do AI Store cung cấp.
2. **Thêm mã nhúng vào mã HTML của trang web:**
   * Dán mã nhúng vào vị trí muốn hiển thị chatbot.
3. **Lưu và kiểm tra hiển thị:**
   * Đảm bảo chatbot hoạt động mượt mà và phù hợp với giao diện website.

***