Tổng Quan Chatbot Widget (Embed SDK)

Module 04: Chatbot Widget (Embed SDK)

Đơn vị phát triển: Pango AI Team • Phân hệ Chatbot AI

Định vị cốt lõi: Cung cấp Chatbot Widget gắn lên CRM/Software đối tác
Mô hình triển khai: Giao diện tùy theo nhu cầu doanh nghiệp (Custom UI/UX & định vị linh hoạt)

Chatbot Widget là giải pháp nhúng giao diện AI thông minh chuẩn hóa do Pango AI Team phát triển, cho phép doanh nghiệp tích hợp trợ lý ảo vào bất kỳ nền tảng nào — từ Website khách hàng đến các phần mềm chuyên dụng như CRM (Caresoft, VUS CRM, Salesforce, Zendesk) — chỉ với một dòng mã script duy nhất.

Hệ thống hoạt động theo mô hình Headless-friendly Embed, đóng gói toàn bộ logic kết nối Realtime, giao diện đàm thoại và phân tích ngữ cảnh trong một môi trường Iframe biệt lập và bảo mật, không gây xung đột CSS/JS với ứng dụng mẹ (Host Application).

Widget cung cấp trải nghiệm đàm thoại hiện đại, hỗ trợ đầy đủ các định dạng tin nhắn Markdown, khối mã nguồn (code highlight), bảng biểu, danh sách gợi ý câu hỏi và phiếu đánh giá chất lượng hội thoại:

Chatbot Widget Open View

Các Điểm Nổi Bật Về Giao Diện:

Floating Action Launcher: Nút mở chat dạng bong bóng nổi ở góc màn hình với hiệu ứng chuyển động mượt mà và huy hiệu thông báo chưa đọc.
Header Định Danh Thương Hiệu: Hiển thị tên trợ lý ảo (ví dụ: V-Buddy, CPS AI Agent), ảnh đại diện thương hiệu, trạng thái kết nối trực tuyến và các nút thu nhỏ / đóng / mở rộng.
Trình Kết Xuất Tin Nhắn Đa Dạng (Rich Renderer): Hỗ trợ văn bản tự nhiên, bảng Markdown có thanh cuộn ngang, danh sách lựa chọn nhanh (Quick Action Chips) và hiển thị trích dẫn nguồn RAG.
Đánh Giá Trải Nghiệm (CSAT Rating): Cho phép người dùng đánh giá mức độ hài lòng (sao rating và phản hồi văn bản) ngay trong khung chat khi kết thúc phiên.

2. Kiến Trúc Nhúng An Toàn (Sandboxed Iframe Architecture)

Widget áp dụng kiến trúc nhúng độc lập qua Iframe để bảo vệ cả Host Application và Widget:

Sơ Đồ Trực Quan (Interactive Flowchart)

Đang tạo biểu đồ trực quan...

Ưu Điểm Của Kiến Trúc Sandboxed Iframe:

Không Xung Đột CSS (CSS Isolation): Mọi kiểu dáng giao diện của Widget được đóng gói hoàn toàn bên trong Iframe, không bao giờ bị ảnh hưởng bởi CSS toàn cục của Host App (kể cả Bootstrap, Tailwind, hay custom stylesheet).
Bảo Mật Dữ Liệu (Security & Sandbox): Ngăn chặn Host App can thiệp vào bộ nhớ trong của Widget và ngược lại, tuân thủ nghiêm ngặt chính sách Same-Origin Policy.
Hiệu Năng Cao (Zero Overhead): Kích thước script tải ban đầu cực nhỏ (< 15KB), chỉ tải tài nguyên giao diện đầy đủ khi người dùng tương tác hoặc mở chat.

3. Tích Hợp Nhanh Trong 3 Bước

Chỉ với 3 thao tác đơn giản, ứng dụng của bạn đã có thể vận hành trợ lý AI:

1. Thêm thẻ script vào cuối thẻ <body>

<script type="module" src="https://cdn.pango.vn/widget/v1/widget.js"></script>

2. Khởi tạo Widget sau khi DOM đã sẵn sàng

window.pcw.init();

3. Truyền ngữ cảnh hội thoại và thông tin tài khoản

window.pcw.setPayload({
  conversation: {
    conversationId: "CONV_SESSION_12345"
  },
  account: {
    username: "Nguyễn Văn A",
    mainEmail: "nguyenvana@example.com"
  }
});

4. Danh Mục Tài Liệu Chi Tiết

Quý đối tác và kỹ sư tích hợp có thể tìm hiểu sâu hơn theo từng chủ đề:

4.2 SDK Quick Start & Chi Tiết API window.pcw: Hướng dẫn nhúng, tài liệu chi tiết các hàm điều khiển (open, close, setPayload, setPosition, setOffset) và định nghĩa kiểu TypeScript.
4.3 Giao Diện UI/UX & Khả Năng Tùy Biến: Chi tiết các trạng thái giao diện (Launcher, New Chat, Rating) và cơ chế co giãn Responsive.
4.4 Case Study Thực Tế 1: Caresoft CRM (CPS): Tích hợp sâu vào CRM Omni-channel, quản lý ngữ cảnh vé hỗ trợ (lastTicket) và đồng bộ đa tab chat.
4.5 Case Study Thực Tế 2: VUS CRM (V-Buddy): Tích hợp trợ lý AI cho đội ngũ tư vấn viên VUS, phân quyền TMK Agent và tinh chỉnh khoảng cách hiển thị.
4.6 Khắc Phục Sự Cố & FAQ: Hướng dẫn cấu hình Content Security Policy (CSP), xử lý xung đột z-index và hiển thị trên thiết bị di động.