Web Widget

Web Widget cho phép bạn nhúng cửa sổ chat trực tiếp được vận hành bởi bot AI của bạn vào bất kỳ website nào. Tùy chỉnh theo thương hiệu của bạn và triển khai trong vài phút.

Widget Settings & Live Preview

Cài đặt

Vào Channels → Web Widget trong menu bên trái.
Nhấp Create Widget và đặt tên cho widget.
Cấu hình cài đặt widget (xem phần Tùy chỉnh bên dưới).
Sao chép đoạn mã nhúng được cung cấp.
Dán đoạn mã vào HTML của website, ngay trước thẻ đóng </body>.
Lưu và xuất bản trang web — widget sẽ xuất hiện ngay lập tức.

Mã nhúng

<!-- Clienta.ai Web Widget -->
<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
  };
</script>
<script
  src="https://api.clienta.ai/widget/YOUR_WIDGET_ID/loader.js"
  async
></script>

Thay YOUR_BOT_ID và YOUR_WIDGET_ID bằng các giá trị hiển thị trong bảng điều khiển của bạn.

Tùy chỉnh

Tùy chọn	Mô tả
Theme Color	Đặt màu chính để phù hợp với thương hiệu của bạn (mã hex hoặc bộ chọn màu)
Welcome Message	Tin nhắn đầu tiên hiển thị khi người dùng mở widget
Position	Chọn vị trí góc dưới bên phải hoặc góc dưới bên trái trên màn hình
Avatar	Tải lên hình ảnh avatar tùy chỉnh cho bot

Các tùy chọn bổ sung bao gồm:

Widget Title — Tên hiển thị trong tiêu đề widget
Placeholder Text — Văn bản gợi ý bên trong ô nhập tin nhắn
Auto-Open Delay — Tự động mở widget sau N giây (tùy chọn)
Hide on Mobile — Bật/tắt hiển thị widget trên thiết bị di động

Cách hoạt động

Người dùng mở widget — Cửa sổ chat trượt ra từ góc của trang.
Tin nhắn gửi đến bot — Tin nhắn của người dùng được gửi đến Clienta.ai qua kết nối WebSocket bảo mật.
AI xử lý và phản hồi — Bot truy xuất nội dung liên quan từ cơ sở kiến thức và tạo câu trả lời.
Chuyển sang nhân viên khi cần — Nếu độ tin cậy thấp hoặc người dùng yêu cầu nhân viên, cuộc hội thoại được chuyển đến nhân viên sẵn có thông qua hộp thư Conversations.

Biểu mẫu liên hệ

v1.6.8

Khi bot AI ngoại tuyến hoặc không thể phản hồi, widget hiển thị bóng thông báo CTA nhắc khách truy cập để lại thông tin liên hệ. Nhấn vào bóng thông báo sẽ mở biểu mẫu liên hệ:

Trường	Bắt buộc	Ghi chú
Email	Có	Luôn bắt buộc để theo dõi
Phone	Không	Bao gồm bộ chọn mã quốc gia với 37 quốc gia và cờ emoji (ví dụ: 🇹🇭 +66, 🇺🇸 +1, 🇬🇧 +44, 🇯🇵 +81). Xác thực phía máy chủ đảm bảo các mã gửi lên hợp lệ.
Name	Không	Tên của khách truy cập
Message	Không	Thông tin bổ sung

Việc gửi biểu mẫu liên hệ sẽ tạo một ticket hiển thị trong trang Tickets của quản trị viên, hiển thị cả email và số điện thoại khi được cung cấp.

Bắt đầu cuộc trò chuyện mới sau khi giải quyết

v1.6.8

Khi nhân viên giải quyết xong một cuộc hội thoại, widget hiển thị thông báo hệ thống và nút “Start New Chat”. Nhấp vào nút đó sẽ:

Xóa lịch sử cuộc hội thoại hiện tại
Kết nối lại với phiên WebSocket mới
Đưa widget về trạng thái ban đầu

Điều này cho phép khách truy cập bắt đầu cuộc trò chuyện mới mà không cần tải lại trang.

WebSocket thời gian thực

Widget sử dụng kết nối WebSocket liên tục để nhắn tin thời gian thực với độ trễ thấp. Các hành vi chính:

Tự động kết nối lại — Client tự động kết nối lại nếu kết nối bị ngắt.
Chỉ báo đang nhập — Hiển thị hoạt ảnh đang nhập khi bot đang tạo phản hồi.
Chỉ báo nhân viên đang nhập — v1.6.8 Khi nhân viên đang nhập câu trả lời, widget hiển thị hoạt ảnh đang nhập cho khách truy cập theo thời gian thực.
Lịch sử tin nhắn — Lịch sử cuộc hội thoại được lưu trong cùng một phiên trình duyệt.
Đồng bộ nhiều tab — Nếu người dùng mở nhiều tab, trạng thái cuộc hội thoại được đồng bộ.

Phản hồi dạng Markdown

v1.6.4

Tin nhắn từ AI và nhân viên được hiển thị dưới dạng markdown có định dạng thay vì văn bản thuần. Các định dạng được hỗ trợ bao gồm:

In đậm, in nghiêng, ~~gạch ngang~~
Liên kết (tự động mở trong tab mới)
code nội dòng và khối mã
Danh sách có thứ tự và không có thứ tự
Tiêu đề, trích dẫn và bảng

Tất cả nội dung markdown được làm sạch với danh sách cho phép nghiêm ngặt để ngăn chặn tấn công XSS. Không cần cấu hình — hiển thị markdown được bật theo mặc định cho tất cả phản hồi từ AI và nhân viên. Tin nhắn của người dùng vẫn là văn bản thuần.

Avatar thương hiệu

v1.6.4

Hiển thị logo thương hiệu hoặc avatar tùy chỉnh trong tiêu đề widget và màn hình chính. Đặt avatarUrl trong Settings → Channels → Web → Customizer hoặc truyền vào dưới dạng config.theme.avatarUrl trong mã nhúng.

Chỉ chấp nhận URL https://
Nếu URL không hợp lệ hoặc hình ảnh không tải được, biểu tượng sparkle mặc định sẽ được hiển thị
Khuyến nghị: hình ảnh vuông (ví dụ: 128 × 128 px) để đạt kết quả tốt nhất

Xem Widget Customization — Avatar để biết chi tiết.

Nhãn AI và nhân viên

v1.6.4

Mỗi tin nhắn không phải từ người dùng đều hiển thị nhãn tác giả nhỏ xác định người gửi:

Loại tác giả	Nhãn hiển thị
Bot AI	”AI Assistant” (đã được bản địa hóa)
Nhân viên	Tên của nhân viên (ví dụ: “Sarah”)

Nhãn được bản địa hóa trong tất cả 15 ngôn ngữ được hỗ trợ và có thể truy cập bởi trình đọc màn hình. Điều này giúp khách truy cập phân biệt rõ ràng giữa phản hồi từ AI và từ con người, hỗ trợ các thực hành minh bạch tốt nhất.

Ngôn ngữ lời chào

v1.6.2

Tin nhắn chào mừng của widget hỗ trợ ba chế độ ngôn ngữ, được cấu hình trong Settings → Channels → Web → Customizer → Greeting Mode:

Chế độ	Hành vi
Static	Hiển thị cùng một lời chào cho mọi khách truy cập bất kể ngôn ngữ
Match Visitor	Hiển thị lời chào theo từng ngôn ngữ — cấu hình văn bản chào khác nhau cho mỗi trong số 15 ngôn ngữ
Org-Main	Luôn hiển thị lời chào bằng ngôn ngữ phản hồi chính của tổ chức (đặt trong AI Settings)

Trong chế độ Match Visitor, bất kỳ ngôn ngữ nào chưa được cấu hình lời chào sẽ dự phòng về văn bản lời chào tĩnh.

Xem Widget Customization — Greeting Mode để biết cách cấu hình từng bước.

Bộ chọn ngôn ngữ

v1.6.2

Widget có thể hiển thị biểu tượng địa cầu trong tiêu đề cho phép khách truy cập chủ động chọn ngôn ngữ ưa thích của họ. Tính năng này bị tắt theo mặc định và phải được bật cho từng widget trong Settings → Channels → Web → Customizer.

Khi được bật:

Biểu tượng địa cầu (🌐) xuất hiện trong tiêu đề widget
Khách truy cập có thể chọn từ tối đa 15 ngôn ngữ được hỗ trợ
Chọn một ngôn ngữ sẽ khóa tất cả phản hồi AI theo ngôn ngữ đó trong suốt phiên, ghi đè tự động phát hiện
Khóa vẫn duy trì ngay cả khi khách truy cập nhập bằng ngôn ngữ khác

Hỗ trợ RTL (Phải sang Trái)

v1.6.2

Widget và trang đích hỗ trợ đầy đủ bố cục RTL cho tiếng Ả Rập và tiếng Do Thái. Khi khách truy cập sử dụng ngôn ngữ RTL:

Toàn bộ bố cục được phản chiếu (căn chỉnh văn bản, điều hướng, các phần tử giao diện)
Thuộc tính <html dir="rtl"> được đặt tự động
Tin nhắn chat và ô nhập liệu căn chỉnh đúng cho luồng đọc RTL

Không cần cấu hình thủ công — RTL tự động kích hoạt dựa trên ngôn ngữ đã chọn.

Dự phòng khi mount quá thời gian

v1.6.5

Nếu script widget (widget.js) không tải được trong vòng 10 giây, phần nhúng sẽ hiển thị giao diện dự phòng thay vì để trống. Giao diện dự phòng bao gồm nút thử lại để khách truy cập có thể cố gắng tải lại widget mà không cần làm mới trang.

Điều này bảo vệ trải nghiệm người dùng khi sự cố mạng, trình chặn quảng cáo hoặc sự cố CDN ngăn widget khởi tạo.

v1.6.8

Widget đã được làm mới giao diện trong v1.6.8 với diện mạo hiện đại, tinh tế:

Tiêu đề gradient — Tiêu đề widget sử dụng gradient tinh tế dựa trên màu chủ đề của bạn, với dấu chấm trạng thái và hiển thị avatar.
Bong bóng tin nhắn bo tròn — Bong bóng chat sử dụng bán kính viền lớn hơn (rounded-2xl) cho giao diện mềm mại hơn.
Hoạt ảnh mở/đóng — Widget trượt vào và ra với hoạt ảnh CSS mượt mà thay vì xuất hiện tức thì.
Launcher được thiết kế lại — Bong bóng chat launcher là squircle 60px với bóng đổ phát sáng màu thương hiệu và hoạt ảnh xuất hiện.
Nút chuyển chế độ tối — Nút chuyển đổi trong tiêu đề chat cho phép khách truy cập chuyển giữa chế độ sáng và tối trong phiên của họ.
Vòng focus theo chủ đề — Các trường nhập liệu hiển thị vòng focus màu thương hiệu để tăng khả năng tiếp cận.
Huy hiệu thông báo — Huy hiệu tin nhắn chưa đọc xuất hiện trên bong bóng launcher.

Những thay đổi giao diện này được áp dụng tự động — không cần thay đổi cấu hình.

Chip trích dẫn

v1.6.5

Khi bot AI phản hồi với thông tin lấy từ cơ sở kiến thức của bạn, chip trích dẫn xuất hiện bên dưới tin nhắn. Mỗi chip đại diện cho một tài liệu đã được truy xuất góp phần vào câu trả lời.

Hành vi	Mô tả
Hiển thị chip	Hiển thị tối đa 3 chip tiêu đề tài liệu. Nếu có nhiều nguồn hơn được sử dụng, chip “+N more” chỉ ra các trích dẫn bổ sung.
Nhấp để mở rộng	Nhấp vào chip sẽ bật/tắt đoạn trích nội dòng hiển thị 200 ký tự đầu tiên của nội dung đã truy xuất. Chỉ có thể mở một đoạn trích tại một thời điểm.
Cắt ngắn tiêu đề	Tiêu đề tài liệu dài được cắt ngắn còn 40 ký tự với dấu chấm lửng.
Giao diện	Chip sử dụng màu chính của widget như một sắc thái nhẹ, với hỗ trợ đầy đủ chế độ tối và RTL.
Khả năng tiếp cận	Chip có thể điều hướng bằng bàn phím với nhãn ARIA phù hợp (`aria-expanded`), vai trò danh sách và hỗ trợ trình đọc màn hình.

Chip trích dẫn mang lại sự minh bạch cho khách truy cập về nguồn gốc câu trả lời của bot, xây dựng niềm tin vào các phản hồi AI. Không cần cấu hình — trích dẫn xuất hiện tự động khi pipeline RAG truy xuất tài liệu liên quan.

Tự động cuộn

v1.6.8

Widget tự động cuộn đến tin nhắn mới nhất mỗi khi có nội dung mới. Điều này áp dụng cho:

Tin nhắn mới từ bot AI hoặc nhân viên
Nội dung streaming khi bot tạo phản hồi theo thời gian thực

Cuộn sử dụng hoạt ảnh mượt mà để quá trình chuyển đổi cảm thấy tự nhiên. Không cần cấu hình — tự động cuộn luôn hoạt động.

Giới hạn kênh theo gói

Gói	Số kênh tối đa
Free	1
Starter	2
Growth	5
Plus	6
Pro	15
Scale	30
Enterprise	50

Web Widget

Web Widget

Cài đặt

Mã nhúng

Tùy chỉnh

Cách hoạt động

Biểu mẫu liên hệ

Bắt đầu cuộc trò chuyện mới sau khi giải quyết

WebSocket thời gian thực

Phản hồi dạng Markdown

Avatar thương hiệu

Nhãn AI và nhân viên

Ngôn ngữ lời chào

Bộ chọn ngôn ngữ

Hỗ trợ RTL (Phải sang Trái)

Dự phòng khi mount quá thời gian

Thiết kế lại giao diện Widget

Chip trích dẫn

Tự động cuộn

Giới hạn kênh theo gói