Chatbot Widget (Embed)

Chatbot Widget

• Vai trò: SDK nhúng Chatbot AI vào Website, CRM và phần mềm đối tác.
• Mô hình: Embed SDK, tùy biến UI/UX theo doanh nghiệp.

Nhúng trợ lý AI chỉ với một thẻ script. Widget chạy trong Iframe biệt lập, hỗ trợ giao diện chat, kết nối realtime và truyền ngữ cảnh.

1. Giao Diện Trực Quan Của Chatbot Widget

Widget hỗ trợ Markdown, code, bảng biểu, câu hỏi gợi ý, trích dẫn nguồn và đánh giá hội thoại.

Các điểm nổi bật

• Nút mở chat, trạng thái kết nối và nhận diện thương hiệu.
• Nội dung phong phú: văn bản, bảng, code, câu hỏi gợi ý và trích dẫn nguồn.
• Đánh giá CSAT bằng sao và nhận xét sau phiên chat.

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:

Lợi ích của Iframe biệt lập

1. Cách ly giao diện: CSS của ứng dụng mẹ không làm hỏng giao diện Widget.
2. Tách biệt dữ liệu: Widget và ứng dụng mẹ giao tiếp qua kênh được kiểm soát.
3. Tải theo nhu cầu: Tài nguyên giao diện có thể được tải khi người dùng mở chat.

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

Quy trình cơ bản gồm 3 bước:

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

window.pcw.init();

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ủ đề:

1. 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.
2. 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.