My Website

` là điểm gắn kết — bảng trò chuyện sẽ hiển thị bên trong đó và lấp đầy kích thước của nó. Bạn có thể định kiểu cho div này theo bất kỳ cách nào bạn muốn (đặt chiều cao cố định, đặt nó vào trong một flex container, đặt nó vào một ô lưới, v.v.) và bảng trò chuyện sẽ tuân theo. Bạn chỉ cần **một** thẻ ` ``` {% endcode %} Đoạn mã nhúng trực tiếp mang thông tin đó trên `

` thay vào đó, vì vậy một trang có thể chứa nhiều cuộc trò chuyện đi đến các nơi khác nhau: {% code overflow="wrap" %} ```html

``` {% endcode %} Đối với một tác nhân, cách diễn đạt sẽ thay đổi thành `?agent=AGENT_ID` hoặc `data-agent="AGENT_ID"`. Một vài điều cần lưu ý: - Sử dụng nút sao chép thay vì tự nhập ID. Nếu ID không khớp với chiến dịch hoặc tác nhân trong tài khoản của bạn, cuộc trò chuyện vẫn hoạt động nhưng sẽ quay lại định tuyến mặc định của bạn. - Người đang trong cuộc trò chuyện sẽ tiếp tục với người mà họ đã bắt đầu, ngay cả khi sau đó họ truy cập vào một trang trỏ đến nơi khác. Điều này giúp cuộc trò chuyện không bị thay đổi tính cách giữa chừng. - Đích đến cụ thể cho từng trang sẽ được ưu tiên hơn mặc định tài khoản và các từ khóa kích hoạt của bạn. ### Cho Widget biết khách truy cập là ai (Nâng cao) Nếu bạn đặt widget trò chuyện trong khu vực thành viên, cổng thông tin khách hàng hoặc ứng dụng nơi mọi người đã đăng nhập, trang web của bạn đã biết họ là ai. Bạn có thể chuyển thông tin đó cho widget để khách truy cập không bị hỏi lại những chi tiết họ đã cung cấp trước đó, đồng thời để AI của bạn có thể sử dụng những gì bạn đã biết về họ. Thêm một khối cài đặt nhỏ **trước** tập lệnh widget: {% code overflow="wrap" %} ```html ``` {% endcode %} Trang của bạn nên điền các giá trị đó ở phía máy chủ, từ bất kỳ ai đã đăng nhập. Hai điều sẽ xảy ra: - **Biểu mẫu "Trước khi bắt đầu..." sẽ bị bỏ qua.** Với tên và email được cung cấp, khách truy cập sẽ đi thẳng vào cuộc trò chuyện và các chi tiết đó được lưu vào liên hệ của họ chính xác như thể họ đã tự nhập. - **Mọi thứ trong `data` đều được chuyển cho AI của bạn.** Bất cứ điều gì bạn đặt ở đó — gói dịch vụ, số đơn hàng, ngày gia hạn, số dư tín dụng, số lượng chỗ ngồi họ có — đều trở thành một phần thông tin mà AI biết về người đó, vì vậy nó có thể trả lời "khi nào gói của tôi gia hạn?" mà không cần yêu cầu họ giải thích họ là ai trước. Hãy sử dụng bất kỳ tên trường nào có ý nghĩa với bạn; chúng sẽ xuất hiện trên liên hệ trong phần Trường tùy chỉnh (Custom Fields). Tối đa 20 giá trị, được gửi mới với mỗi tin nhắn, vì vậy nếu gói dịch vụ thay đổi giữa cuộc trò chuyện, AI sẽ thấy thông tin mới. Đối với các nhúng nội dòng (inline embeds), bạn có thể đặt cùng thông tin đó trên `

`, điều này rất tiện lợi khi một trang chứa nhiều cuộc trò chuyện: {% code overflow="wrap" %} ```html

``` {% endcode %} Nếu trang web của bạn chỉ biết khách truy cập là ai sau khi trang đã tải xong — ví dụ như ứng dụng một trang (single-page app) nơi việc đăng nhập diễn ra mà không cần tải lại trang — hãy gọi lệnh này bất cứ khi nào bạn có thông tin chi tiết và widget sẽ tự cập nhật: {% code overflow="wrap" %} ```html ``` {% endcode %} Một vài điều cần lưu ý: - Nếu hai người khác nhau đăng nhập trên cùng một máy tính, người thứ hai sẽ bắt đầu một cuộc trò chuyện mới thay vì nhìn thấy cuộc trò chuyện của người thứ nhất. Tiện ích sẽ nhận thấy sự thay đổi người dùng và tự đặt lại. - Về bản chất, điều này phục vụ mục đích ngữ cảnh, không phải để đăng nhập cho ai đó. Các cuộc trò chuyện vẫn được giữ riêng biệt như trước đây, vì vậy việc truyền `id` không cho phép bất kỳ ai mở cuộc trò chuyện của người khác và người dùng sử dụng thiết bị hoặc trình duyệt khác sẽ bắt đầu một cuộc trò chuyện mới ở đó. Để tiếp tục cuộc trò chuyện trên các thiết bị, hãy đăng nhập `id` như được mô tả tiếp theo. - Đây là tùy chọn. Một tiện ích trên trang công cộng thông thường không cần bất kỳ điều này và hoạt động chính xác như trước. #### Tiếp tục cùng một cuộc trò chuyện trên mọi thiết bị (ID khách truy cập đã đăng nhập) Nếu khách hàng của bạn có tài khoản, bạn có thể làm cho cuộc trò chuyện của họ theo chân họ: đăng nhập trên điện thoại, tiếp tục trên máy tính xách tay, và đó vẫn là cùng một cuộc trò chuyện với cùng một liên hệ trong hộp thư đến của bạn, và AI vẫn biết mọi thứ đã được trao đổi. Để làm được điều đó, DM Champ cần bằng chứng rằng khách truy cập thực sự là người mà trang của bạn xác nhận, nếu không bất kỳ ai cũng có thể nhập số khách hàng vào trình duyệt của họ và đọc cuộc trò chuyện của khách hàng đó. Bằng chứng là một chữ ký bạn tính toán trên máy chủ của mình. 1. Trong bảng **Manage** (Quản lý) của tiện ích, tại mục **Channels & Embed** (Kênh & Nhúng), hãy tìm **Signed-in visitors** (Khách truy cập đã đăng nhập) và nhấp vào **Generate secret** (Tạo bí mật). Sao chép mã bí mật định danh. Chỉ lưu giữ nó trên máy chủ của bạn; không bao giờ đặt nó trực tiếp trên trang. ::: master-only

Dòng Khách truy cập đã đăng nhập trong bảng Quản lý của tiện ích trò chuyện, hiển thị mã bí mật định danh bị ẩn với các nút Hiển thị, Sao chép và Tạo lại, cùng đoạn mã cài đặt với các trường id và hash bên dưới — Dòng Khách truy cập đã đăng nhập trong mục Kênh & Nhúng. Mã bí mật sẽ bị ẩn cho đến khi bạn nhấp vào Hiển thị; đoạn mã bên dưới cho thấy nơi đặt id và chữ ký của nó trên trang của bạn.

::: 2. Khi máy chủ của bạn hiển thị trang cho khách hàng đã đăng nhập, hãy tính toán HMAC-SHA256 của ID khách hàng đó bằng cách sử dụng mã bí mật, dưới dạng chuỗi thập lục phân viết thường: {% code overflow="wrap" %} ```js // Node.js const hash = require("crypto").createHmac("sha256", IDENTITY_SECRET).update(customerId).digest("hex"); ``` {% endcode %} {% code overflow="wrap" %} ```php // PHP $hash = hash_hmac('sha256', $customerId, IDENTITY_SECRET); ``` {% endcode %} {% code overflow="wrap" %} ```python # Python import hmac, hashlib hash = hmac.new(IDENTITY_SECRET.encode(), customer_id.encode(), hashlib.sha256).hexdigest() ``` {% endcode %} 3. Đặt ID và mã băm vào khối cài đặt, bên cạnh tên và email mà bạn đã truyền: {% code overflow="wrap" %} ```html ``` {% endcode %} Nhúng nội dòng (inline embed) nhận cùng giá trị với `data-visitor-hash` trên `

`, và `window.chatWidget.setVisitor({ visitor: { id, hash } })` hoạt động cho các ứng dụng đăng nhập người dùng mà không cần tải lại trang. Điều gì xảy ra khi chữ ký được xác thực: - Cuộc trò chuyện của khách hàng được lưu trữ theo tài khoản của họ thay vì theo trình duyệt, vì vậy đó là cùng một cuộc trò chuyện trên mọi thiết bị và mọi trình duyệt mà họ đăng nhập, và là một liên hệ duy nhất trong hộp thư đến của bạn. - Các tin nhắn trước đó của họ sẽ tải trên thiết bị mới và AI sẽ tiếp tục từ nơi họ đã dừng lại. - Nếu chữ ký không chính xác, tiện ích sẽ âm thầm hoạt động như trước đây, dưới dạng trò chuyện thông thường theo trình duyệt và in lý do trong bảng điều khiển trình duyệt để nhà phát triển có thể phát hiện. Khách truy cập của bạn sẽ không bao giờ thấy lỗi. - ID được so sánh chính xác như bạn đã gửi, vì vậy hãy ký cùng giá trị mà bạn truyền dưới dạng `id` và sử dụng cùng một ID cho cùng một người ở mọi nơi. Hai điều cần biết: - **Tạo lại** trong bảng Quản lý sẽ cung cấp cho bạn một bí mật mới. Các trang vẫn ký bằng bí mật cũ sẽ quay lại trò chuyện bình thường theo trình duyệt cho đến khi máy chủ của bạn sử dụng bí mật mới. Các cuộc trò chuyện hiện có vẫn được giữ nguyên; chúng được gắn với ID của khách hàng, không phải với bí mật. - Một cuộc trò chuyện mà ai đó đã có trước khi đăng nhập, với tư cách là khách truy cập ẩn danh, vẫn là một cuộc trò chuyện riêng biệt. Cuộc trò chuyện dựa trên tài khoản bắt đầu với tin nhắn đầu tiên họ gửi khi đã đăng nhập. ### Thay đổi cài đặt Widget từ mã của riêng bạn (API) Mọi thứ trên bảng **Quản lý** (Manage) của widget cũng có thể được thay đổi thông qua [REST API](../api/reference.md), điều này rất hữu ích nếu bạn quản lý nhiều trang web hoặc muốn nút đính kèm tự động tắt cho khách hàng. Gửi một `PATCH` đến `https://api.dmchamp.com/v1/chat-widget-configs/CONFIG_ID` cùng với khóa API của bạn và chỉ các trường bạn muốn thay đổi — ví dụ: `{"show_upload_button": false}` ẩn nút đính kèm, `{"show_emoji_button": false}` ẩn bộ chọn biểu tượng cảm xúc và `{"launcher_icon": "chat-dots"}` thay đổi biểu tượng trình khởi chạy. `CONFIG_ID` là cùng một định danh như trong tập lệnh nhúng của bạn. Danh sách đầy đủ các trường được chấp nhận (tên, tin nhắn chào mừng, màu sắc, biểu tượng trình khởi chạy, tên miền được phép, biểu mẫu thông tin khách truy cập, thông báo quyền riêng tư, chủ đề, góc và kiểu phông chữ) có trong [Tài liệu tham khảo API](../api/reference.md) tại mục **Chat Widget**. Các trang web sẽ cập nhật thay đổi vào lần tải trang tiếp theo. ### Những gì sẽ xảy ra sau khi cài đặt Sau khi bạn đã thêm tập lệnh vào trang web của mình, tiện ích trò chuyện sẽ tự động tạo một nút trò chuyện ở góc trang web của bạn (mặc định là góc dưới bên phải). Tiện ích vẫn ở vị trí cố định khi người dùng cuộn qua các trang của bạn, đảm bảo rằng nó luôn có thể truy cập được. ::: master-only

Bong bóng trò chuyện nổi ở góc dưới bên phải của một trang web trực tiếp, trước khi khách truy cập nhấp vào nó — Đây là những gì khách truy cập thấy trên trang web của bạn trước khi họ mở trò chuyện — chỉ là nút nổi, được định vị theo cài đặt Giao diện của bạn.

::: Khi khách truy cập nhấp vào nút này, nó sẽ mở rộng thành một cửa sổ trò chuyện đầy đủ, nơi họ có thể bắt đầu cuộc trò chuyện, hiển thị tin nhắn mở đầu của bạn. Nếu Thu thập thông tin khách truy cập được bật, một biểu mẫu nhỏ sẽ xuất hiện trước tiên để yêu cầu tên và email (và tùy chọn là số điện thoại) của họ trước khi họ có thể nhập tin nhắn. ::: master-only

Bảng trò chuyện đã mở hiển thị tin nhắn mở đầu ở nền và biểu mẫu thu thập khách hàng tiềm năng Trước khi chúng ta bắt đầu (Tên, Email, Điện thoại) ở phía trước — Bảng trò chuyện đã mở. Ở đây Thu thập thông tin khách truy cập đang bật, vì vậy biểu mẫu "Trước khi chúng ta bắt đầu..." xuất hiện trên cuộc trò chuyện — khách truy cập điền vào một lần, sau đó trò chuyện bình thường.

::: Giao diện trò chuyện tự động thích ứng với các kích thước màn hình khác nhau, vì vậy nó hoạt động liền mạch trên cả máy tính để bàn và thiết bị di động. ### Kiểm tra việc triển khai của bạn Sau khi thêm tiện ích vào trang web của bạn, hãy kiểm tra xem nó có hoạt động không: 1. Mở trang web của bạn trong trình duyệt. 2. Nhấp vào nút trò chuyện để mở tiện ích. 3. Gửi tin nhắn kiểm tra và xác nhận rằng bạn nhận được phản hồi. 4. Lặp lại trên một thiết bị hoặc trình duyệt khác để xác nhận nó hoạt động ở mọi nơi. ::: master-only

Bảng trò chuyện sau khi khách truy cập gửi tin nhắn thử nghiệm, hiển thị bong bóng tin nhắn gửi đi của họ bên dưới tin nhắn mở đầu — Sau khi gửi tin nhắn, nó xuất hiện dưới dạng bong bóng gửi đi trong chuỗi — AI hoặc nhóm của bạn trả lời trong cùng một cửa sổ.

::: Nếu tiện ích trò chuyện không xuất hiện trên trang web của bạn, hãy kiểm tra các mục sau: 1. Đảm bảo bạn đã thay thế `CONFIG_ID` bằng mã định danh cấu hình thực tế của mình. 2. Đảm bảo thẻ tập lệnh được đặt trước thẻ đóng ``. 3. Kiểm tra mã xem có lỗi đánh máy không. ### Phía sau Tường lửa Doanh nghiệp Nếu tiện ích tải được cho công chúng nhưng không tải được cho nhân viên trong mạng văn phòng, thì gần như chắc chắn mạng đó đang chặn tên miền mà tiện ích tải từ đó. Hãy yêu cầu nhóm CNTT của bạn cho phép truy cập qua HTTPS thông thường trên cổng 443: - **Tên miền trong đoạn mã nhúng của bạn** — địa chỉ trong dòng `