Tiện ích Chat #

Hướng dẫn tích hợp Tiện ích Chat trên Website #

Thêm một tiện ích chat thân thiện với người dùng vào trang web của bạn, cho phép khách truy cập giao tiếp trực tiếp thông qua giao diện trang web. Quy trình tích hợp rất đơn giản và sẽ cung cấp cho trang web của bạn các tính năng nhắn tin được tích hợp sẵn.

Tạo và Cấu hình Tiện ích Trò chuyện #

Cách truy cập:

1. Nhấp vào Settings (Cài đặt) gần cuối thanh bên trái. (Trên điện thoại, trước tiên hãy nhấn vào biểu tượng menu ☰ ở góc trên cùng để mở thanh bên.)
2. Trong thanh điều hướng bên trái của phần Cài đặt, dưới mục Channels (Kênh), nhấp vào Channels.
3. Tìm thẻ Website chat widget (Tiện ích trò chuyện trên trang web).
4. Nếu bạn chưa có tiện ích, hãy nhấp vào Connect (Kết nối) để tạo một tiện ích với tên hiển thị và tin nhắn chào mừng.
5. Sau khi tạo, bạn có thể nhấp vào Manage (Quản lý) bất cứ lúc nào để mở bảng cấu hình đầy đủ.

Các thay đổi bạn lưu sẽ tự động áp dụng cho tiện ích trực tuyến của bạn — không cần phải dán lại mã cài đặt sau khi thực hiện thay đổi.

Một Bản xem trước trực tiếp nằm ngay cạnh các cài đặt: một trang web mẫu với tiện ích thực tế của bạn đang chạy trên đó, hiển thị màu sắc, vị trí, logo, biểu tượng trình khởi chạy và cửa sổ bật lên chủ động chính xác như cách khách truy cập sẽ thấy. Nó theo dõi các chỉnh sửa của bạn khi bạn thực hiện, vì vậy bạn không cần phải lưu để xem thay đổi màu sắc hoặc chủ đề trông như thế nào. Bạn thậm chí có thể nhấp vào nút trò chuyện bên trong bản xem trước để mở tiện ích và dùng thử.

Những gì bạn có thể tùy chỉnh #

Bảng Quản lý được chia thành bốn phần.

Giao diện #

• Chủ đề kiểu dáng: Thay đổi kiểu dáng toàn bộ widget chỉ với một cú nhấp chuột. Sáu chủ đề, mỗi chủ đề thiết lập giao diện, màu sắc, góc bo và phông chữ cùng nhau: Classic (giao diện khối nguyên bản — thanh tiêu đề có màu trên bảng phẳng), Glass (bảng mờ, trong suốt làm mờ nhẹ trang phía sau, với tiêu đề và hộp tin nhắn nổi như các thẻ bo tròn bên trong), Midnight (Glass với tông màu tối), Bloom (hồng nhạt, bo tròn hơn), Ember (Glass tông cam ấm) và Mono (đen trắng, góc nhọn). Một chủ đề là điểm khởi đầu — sau khi chọn, bạn vẫn có thể thay đổi bất kỳ màu sắc hoặc tùy chỉnh nào một cách riêng biệt. Các widget mới bắt đầu với Glass; việc chuyển đổi diễn ra tức thì ở mọi nơi widget được nhúng mà không cần thay đổi mã trên trang web của bạn.
• Góc bo và Phông chữ: Hai tùy chỉnh kiểu dáng độc lập. Góc bo thiết lập độ bo tròn của bảng, bong bóng và nút (Tròn, Mềm hoặc Nhọn), và Phông chữ chọn kiểu chữ mà khách truy cập nhìn thấy (Mặc định, Serif, Tròn hoặc Mono) — phông chữ được lấy từ thiết bị của khách truy cập, vì vậy không có gì tải thêm trên trang web của bạn.
• Tên hiển thị: Được hiển thị trong tiêu đề widget.
• Logo: Tải lên một hình ảnh xuất hiện ở đầu cuộc trò chuyện. Sử dụng logo công ty hoặc ảnh đại diện thân thiện của bạn.
• Biểu tượng trình khởi chạy: Biểu tượng trên chính nút trò chuyện nổi. Chọn một trong các biểu tượng tích hợp (bong bóng trò chuyện, máy bay giấy, dấu hỏi, v.v.), sử dụng lại logo đã tải lên của bạn hoặc tải lên một hình ảnh riêng — rất tiện lợi nếu bạn muốn ảnh của một thành viên thực sự trong nhóm chào đón khách truy cập.
• Màu sắc: Năm màu, mỗi màu đặt tên cho phần của widget mà nó tô điểm. Màu thương hiệu là nút nổi, tiêu đề và tin nhắn của chính khách truy cập, với Văn bản thương hiệu cho văn bản nằm trên đó. Bong bóng bot là nền cho các câu trả lời của bot và chỉ báo đang nhập, với Văn bản bong bóng bot cho các từ bên trong chúng và các dấu chấm đang nhập hoạt hình. Cửa sổ trò chuyện là bảng phía sau tất cả các tin nhắn. Hãy chọn màu Bong bóng bot khác biệt rõ ràng với màu Thương hiệu của bạn — nếu hai màu này trùng nhau, cả hai phía của cuộc trò chuyện sẽ có cùng màu và khách truy cập không thể phân biệt câu trả lời của bot với tin nhắn của chính họ. Bong bóng bot màu xám nhạt với văn bản tối bên cạnh màu thương hiệu của bạn là sự kết hợp an toàn.
• Vị trí: Đặt nút trò chuyện nổi ở góc dưới bên phải hoặc dưới bên trái, với độ lệch ngang và dọc (tính bằng pixel) nếu nó chồng lên thứ gì đó khác trên trang của bạn.
• Câu hỏi gợi ý: Các gợi ý trả lời nhanh (các thẻ có thể nhấp) được hiển thị trong cuộc trò chuyện để khách truy cập có thể bắt đầu chỉ với một lần nhấn thay vì phải nhập — ví dụ: “Giá của bạn là bao nhiêu?” hoặc “Bạn có cung cấp hỗ trợ không?” — tối đa 10 câu.

Hành vi #

• Tin nhắn chào mừng: Tin nhắn đầu tiên khách truy cập nhìn thấy khi họ mở trò chuyện (ví dụ: “Tôi có thể giúp gì cho bạn?”).
• Âm thanh: Phát âm thanh khi có tin nhắn mới trong cuộc trò chuyện.
• Yêu cầu quyền thông báo: Tùy chọn nhắc khách truy cập cho phép thông báo trình duyệt, để họ được cảnh báo về các phản hồi ngay cả khi họ đã chuyển sang tab khác.
• Bong bóng bật lên chủ động: Một bong bóng nhỏ tùy chọn bật lên bên cạnh nút trò chuyện để mời mọi người tham gia. Bật tính năng này để thiết lập tin nhắn, văn bản nút chấp nhận/từ chối và số giây chờ trước khi nó xuất hiện. Bong bóng sẽ tự ẩn sau 20 giây nếu không ai nhấp vào (số đó là cố định), và khi khách truy cập nhấp vào Để sau, nó sẽ không xuất hiện nữa trong suốt thời gian họ truy cập. Bản thân cửa sổ trò chuyện không bao giờ tự mở: nó chỉ mở khi khách truy cập nhấp vào nút trò chuyện hoặc bong bóng, và vẫn mở cho đến khi họ đóng lại.
• Tốc độ phản hồi của AI: Một thanh trượt giữa Chậm hơn (giống con người hơn — AI mất một chút thời gian trước khi trả lời) và Tốc độ tối đa (giống robot hơn — phản hồi trả về nhanh nhất có thể). Cân bằng nằm ở giữa.

Ngôn ngữ #

Tiện ích này tự động hỗ trợ đa ngôn ngữ — bạn không cần phải bật bất kỳ cài đặt nào.

• Nó tự động chọn ngôn ngữ của khách truy cập. Đầu tiên, nó xem xét ngôn ngữ mà trang của bạn khai báo trong HTML (<html lang="it">), sau đó nó sẽ quay lại sử dụng ngôn ngữ trình duyệt của khách truy cập. Nếu không có ngôn ngữ nào trong số đó được chúng tôi hỗ trợ, nó sẽ hiển thị tiếng Anh.
• Hoặc tự chọn một ngôn ngữ. Trường Ngôn ngữ tiện ích trong phần Hành vi được đặt thành Tự động theo mặc định, đó là quá trình phát hiện ở trên. Chọn một ngôn ngữ ở đó và các nhãn của tiện ích (các trường Tên, Email và Điện thoại của biểu mẫu khách truy cập cùng văn bản ví dụ của chúng, thông báo quyền riêng tư, các nút) sẽ giữ nguyên ngôn ngữ đó bất kể trang hoặc trình duyệt hiển thị gì. Sử dụng tính năng này khi trình tạo trang web của bạn không khai báo đúng ngôn ngữ hoặc khi bạn muốn một ngôn ngữ cố định cho mọi khách truy cập.
• Các ngôn ngữ được hỗ trợ: Tiếng Anh, tiếng Hà Lan, tiếng Đức, tiếng Pháp, tiếng Tây Ban Nha, tiếng Ý, tiếng Bồ Đào Nha, tiếng Rumani, tiếng Ba Lan, tiếng Ả Rập, tiếng Phần Lan và tiếng Philippines. Đây là danh sách cho các nút và nhãn của tiện ích.
• Tin nhắn của bạn được dịch cho bạn. Mỗi khi bạn lưu, tin nhắn chào mừng, bong bóng bật lên chủ động và các câu hỏi bắt đầu của bạn sẽ được dịch sang tất cả mười hai ngôn ngữ ở trên. Bạn chỉ cần viết chúng một lần, bằng bất kỳ ngôn ngữ nào bạn thích.
• Viết mỗi tin nhắn chỉ bằng một ngôn ngữ. Nếu bạn đặt hai ngôn ngữ trong cùng một trường — ví dụ: một dòng tiếng Anh và một dòng tiếng Ý — toàn bộ nội dung sẽ được coi là một tin nhắn duy nhất và được dịch nguyên trạng, vì vậy khách truy cập người Ý sẽ thấy cùng một câu hai lần. Hãy viết một lần, bằng bất kỳ ngôn ngữ nào bạn thích.
• AI trả lời bằng ngôn ngữ của khách truy cập. Bất kể ai đó nhập bằng ngôn ngữ nào, tác nhân của bạn sẽ trả lời bằng ngôn ngữ đó, bất kể nhãn của tiện ích đang hiển thị ngôn ngữ nào. Nếu bạn muốn nó luôn trả lời bằng một ngôn ngữ cố định, hãy nêu rõ điều đó trong hướng dẫn cho tác nhân của bạn.

Mẹo: nếu trang web của bạn không đặt thuộc tính lang trên thẻ <html>, hãy thêm thuộc tính đó vào. Đây là tín hiệu mạnh nhất mà chúng tôi có để chọn đúng ngôn ngữ, đặc biệt là đối với những khách truy cập đang duyệt web từ nước ngoài.

Thu thập Khách hàng tiềm năng & Quyền riêng tư #

• Thu thập thông tin khách truy cập: Mặc định là Tắt. Khi Bật, khách truy cập sẽ được yêu cầu cung cấp tên và email (và tùy chọn số điện thoại) trước khi cuộc trò chuyện bắt đầu, nhờ đó bạn có thể thu thập thông tin khách hàng tiềm năng ngay cả khi họ rời đi giữa chừng.
• Tiêu đề biểu mẫu và Phụ đề biểu mẫu: Tùy chỉnh tiêu đề và lời giải thích ngắn hiển thị phía trên biểu mẫu.
• Thu thập số điện thoại: Bật để yêu cầu thêm số điện thoại; tắt nếu chỉ muốn thu thập tên và email.

Khách truy cập đã để lại số điện thoại và rời khỏi trang web của bạn — tôi có thể tiếp tục trên WhatsApp không? Có. Hãy mở cuộc trò chuyện của họ và chọn Tiếp tục trên WhatsApp từ menu ba chấm (cần kết nối WhatsApp Web hoặc WhatsApp Business). Your AI Connector tạo một cuộc trò chuyện WhatsApp được liên kết cho cùng một người, sao chép tên, email và thông tin chi tiết của họ, đồng thời AI sẽ chuyển tiếp những gì họ đã nói trên trang web của bạn, vì vậy không ai phải lặp lại những gì đã nói. Cuộc trò chuyện trên trang web vẫn giữ nguyên và cả hai cuộc trò chuyện đều trỏ đến nhau trong phần Các cuộc trò chuyện được liên kết trong bảng điều khiển liên hệ. Xem Giao diện trò chuyện.

Tác nhân AI có thể tự đề nghị chuyển sang WhatsApp không? Có, và không cần thêm tính năng nào — chỉ cần một dòng trong hướng dẫn của tác nhân là đủ. Tạo một Liên kết rút gọn cho số WhatsApp của bạn với tin nhắn soạn sẵn như “Xin chào, tôi đang trò chuyện trên trang web của bạn và muốn tiếp tục tại đây”, sau đó cho tác nhân biết khi nào cần gửi tin nhắn đó, ví dụ: “Nếu khách truy cập cần rời đi, muốn tiếp tục sau hoặc yêu cầu dùng WhatsApp, hãy đề nghị tiếp tục ở đó và gửi liên kết này: (liên kết rút gọn của bạn)”. Các liên kết trong tiện ích có thể nhấn vào được, vì vậy khách truy cập sẽ chuyển đến WhatsApp với số của bạn đã được chọn và tin nhắn đã được soạn sẵn, và tin nhắn đầu tiên của họ sẽ mở một cuộc trò chuyện WhatsApp trong hộp thư đến của bạn. Nếu khách truy cập đã để lại số điện thoại mà họ dùng để nhắn tin (kèm mã quốc gia) trong biểu mẫu tiện ích, Your AI Connector sẽ tự động liên kết hai cuộc trò chuyện và AI trên WhatsApp sẽ biết về cuộc trò chuyện trên trang web, giống hệt như với Tiếp tục trên WhatsApp. Nếu không có số điện thoại nào được thu thập, hai cuộc trò chuyện sẽ không được liên kết, vì vậy hãy giữ tin nhắn soạn sẵn đủ cụ thể để tác nhân WhatsApp biết người đó đến từ đâu.

• Yêu cầu xác nhận chính sách quyền riêng tư: Tùy chọn yêu cầu khách truy cập chấp nhận chính sách quyền riêng tư của bạn trước khi trò chuyện và đặt URL mà chính sách đó trỏ đến.

Widget lưu trữ những gì trong trình duyệt của khách truy cập và tôi có cần đặt nó sau biểu ngữ cookie không? Không có gì được lưu trữ chỉ bằng việc tải trang. Widget không ghi cookie và không sử dụng bộ nhớ trình duyệt cho đến khi khách truy cập chọn trò chuyện: gửi tin nhắn đầu tiên, điền vào biểu mẫu thông tin khách truy cập hoặc chấp nhận chính sách quyền riêng tư của bạn. Kể từ thời điểm đó, nó giữ một ID cuộc trò chuyện ngẫu nhiên và một bản sao của cuộc trò chuyện trong trình duyệt đó, dưới dạng bộ nhớ bên thứ nhất trên tên miền của riêng bạn, để cuộc trò chuyện vẫn còn đó khi họ quay lại. Nó không tải bất kỳ tập lệnh phân tích hoặc theo dõi nào và không đặt cookie của bên thứ ba. Vì không có gì được ghi lại cho đến khi khách truy cập yêu cầu trò chuyện, nên nó thuộc loại bộ nhớ hoàn toàn cần thiết cho dịch vụ mà khách truy cập đã yêu cầu, vì vậy bạn có thể tải nó mà không cần đặt nó sau biểu ngữ đồng ý. Nếu trang web của bạn vẫn sử dụng công cụ đồng ý, bạn hoàn toàn có thể đặt widget sau công cụ đó; cuộc trò chuyện sẽ chỉ xuất hiện khi khách truy cập chấp nhận.

Kênh & Nhúng #

• Nút đính kèm: Cho phép khách truy cập gửi hình ảnh và tệp trong cuộc trò chuyện.
• Bộ chọn biểu tượng cảm xúc: Thêm bộ chọn biểu tượng cảm xúc bên cạnh hộp tin nhắn.
• Liên kết kênh: Tùy chọn bao gồm các liên kết WhatsApp, Instagram hoặc Messenger để khách truy cập có thể tiếp tục cuộc trò chuyện trên nền tảng họ ưa thích. Phần này chỉ xuất hiện sau khi bạn đã kết nối số WhatsApp, Instagram hoặc Messenger.
• Nút hành động: Một hàng phím tắt ở đầu cuộc trò chuyện giúp đưa khách truy cập đến một nơi nào đó thay vì vào cuộc trò chuyện — xem Nút hành động bên dưới.
• Danh sách trắng tên miền: Hạn chế các trang web được phép nhúng tiện ích của bạn. Thêm các tên miền nơi bạn đã cài đặt tiện ích (ví dụ: example.com hoặc *.example.com); để trống để cho phép bất kỳ tên miền nào.
• Chuyển các cuộc trò chuyện này đến: Chọn chiến dịch hoặc nhân viên sẽ xử lý các cuộc trò chuyện đến từ mã bạn sắp sao chép. Để ở chế độ Mặc định của tài khoản để sử dụng định tuyến tiện ích trò chuyện thông thường của bạn. Xem Gửi các trang khác nhau đến các chiến dịch khác nhau bên dưới.
• Đoạn mã nhúng: Chọn Bong bóng nổi hoặc Nhúng và sao chép mã cài đặt (xem bên dưới).
• Liên kết demo khách hàng: Dán bất kỳ địa chỉ trang web nào để nhận liên kết có thể chia sẻ, mở trang web đó với tiện ích của bạn chạy trên đó — không cần cài đặt gì ở phía họ. Xem Hiển thị tiện ích trên trang web của người khác bên dưới.

Ở cuối bảng, hành động Delete chat widget (Xóa tiện ích trò chuyện) sẽ xóa tiện ích khỏi trang web của bạn ngay lập tức — thao tác này không thể hoàn tác và khách truy cập sẽ không còn thấy bong bóng trò chuyện nữa.

Nút hành động #

Một số khách truy cập không muốn trò chuyện. Họ muốn số điện thoại, địa chỉ hoặc email của bạn và họ muốn có được thông tin đó chỉ bằng một lần nhấn. Các nút hành động là một hàng phím tắt ở đầu bảng trò chuyện dành riêng cho mục đích đó.

Thêm tối đa sáu nút. Mỗi nút có một nhãn (từ ngữ trên nút) và một đích đến, và đích đến phụ thuộc vào hành động bạn chọn:

Các nút này không sử dụng tín dụng. Việc nhấn vào một nút không gửi tin nhắn và không bắt đầu cuộc trò chuyện — nó chỉ đưa khách truy cập đến nơi họ muốn. Chỉ một cuộc trò chuyện thực sự với tác nhân AI của bạn mới sử dụng tín dụng, giống như trước đây.

Một vài điều cần lưu ý:

• Các nút vẫn hiển thị trong khi khách truy cập trò chuyện. Ai đó có thể đặt hai câu hỏi và vẫn nhấn Chỉ đường sau đó mà không cần tải lại trang.
• Nhãn của bạn được hiển thị chính xác như bạn đã viết. Không giống như tin nhắn chào mừng và câu hỏi gợi ý, nhãn nút không được tự động dịch, vì vậy nếu bạn phục vụ khách truy cập bằng nhiều ngôn ngữ, hãy giữ cho nhãn ngắn gọn và dễ hiểu (hoặc viết chúng bằng ngôn ngữ chính của bạn).
• Điền thông tin nút đúng cách nếu không nó sẽ không lưu. Nếu số điện thoại, địa chỉ email hoặc liên kết không hợp lệ, bảng điều khiển sẽ thông báo và chặn Lưu thay đổi thay vì xuất bản một nút không có tác dụng gì trên trang web của bạn.
• Chúng không phải là câu trả lời FAQ. Các nút hành động chỉ gửi mọi người đến nơi khác; chúng không trả lời bằng văn bản soạn sẵn. Câu hỏi là công việc của tác nhân AI của bạn và nó sẽ trả lời từ cơ sở kiến thức của bạn. Nếu bạn muốn gợi ý những gì cần hỏi, hãy sử dụng câu hỏi gợi ý trong phần Giao diện.

Những gì bạn không thể tùy chỉnh #

Bảng Manage (Quản lý) là toàn bộ các tùy chọn có sẵn. Cụ thể:

• Không có CSS hoặc tệp kiểu tùy chỉnh. Kiểu dáng là những gì mà các bộ chọn chủ đề, góc, phông chữ và màu sắc cung cấp — bạn không thể chèn CSS của riêng mình vào tiện ích và các quy tắc trên trang của bạn sẽ không tác động vào bên trong nó.
• Không có văn bản giữ chỗ tùy chỉnh trong hộp tin nhắn.
• Không có hạn chế về quốc gia hoặc địa lý. Danh sách trắng tên miền giới hạn những trang web nào có thể nhúng tiện ích; không có cách nào để hiển thị hoặc ẩn nó dựa trên vị trí của khách truy cập. Nếu bạn cần điều đó, hãy tự ẩn đoạn mã nhúng trên các trang hoặc cho các đối tượng mà bạn không muốn hiển thị.
• Không nhúng video bên trong cuộc trò chuyện.
• Không có bộ hẹn giờ tự ẩn. Bong bóng lời mời tự biến mất sau 20 giây và số đó không thể thay đổi; cửa sổ trò chuyện đang mở không bao giờ tự đóng lại. Nếu bong bóng nằm đè lên nội dung trang của bạn, hãy di chuyển tiện ích bằng các phần bù Vị trí hoặc tắt bong bóng và chỉ giữ lại nút khởi chạy.

Nếu một trong những điều trên là rào cản đối với bạn, nhúng nội dòng sẽ cung cấp cho bạn quyền kiểm soát tối đa: tiện ích nằm trong một vùng chứa trên trang của riêng bạn, nơi bạn tự định kích thước và vị trí.

Hướng dẫn Cài đặt #

Để thêm tiện ích trò chuyện vào trang web của bạn, hãy thêm một dòng mã vào HTML của trang web.

1. Mở tệp HTML trên trang web của bạn bằng trình soạn thảo văn bản.
2. Tìm thẻ đóng </body> — thẻ này thường nằm ở cuối tệp.
3. Dán dòng mã này ngay trước thẻ </body> để phần còn lại của trang web được tải trước:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID"></script>

4. Thay thế CONFIG_ID bằng mã định danh cấu hình duy nhất của bạn, được hiển thị trong phần Channels & Embed (Kênh & Nhúng) của bảng Quản lý (Manage panel). Mã định danh này dành riêng cho tài khoản của bạn và kết nối tiện ích với hệ thống nhắn tin của bạn.

Đoạn mã này sẽ không làm chậm trang web của bạn: nó là một trình tải nhỏ gọn và bản thân tiện ích sẽ được tải xuống trong nền mà không chặn trang. Nếu bạn vẫn muốn tiện ích chờ cho đến khi trang của bạn tải xong hoàn toàn, bạn có thể bao bọc cùng một URL như thế này:

<script>
window.addEventListener('load', function () {
  var s = document.createElement('script');
  s.src = 'https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID';
  s.async = true;
  document.body.appendChild(s);
});
</script>

Và nếu điều bạn muốn trì hoãn là bong bóng lời mời nhỏ thay vì việc tải tiện ích, đó chính là độ trễ Bong bóng bật lên chủ động trong phần Hành vi ở trên — không cần mã.

Dưới đây là ví dụ hoàn chỉnh về cách tệp HTML của bạn sẽ trông như thế nào khi đã triển khai tiện ích chat:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your existing website content would be here -->

    <!-- Chat Widget Integration -->
    <script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID"></script>
</body>
</html>

Nhúng nội dòng trên trang (Nâng cao) #

Nếu bạn muốn khung trò chuyện xuất hiện như một phần của trang web — ví dụ: bên trong phần “Liên hệ với chúng tôi”, tab trợ giúp hoặc thanh bên — thay vì là một bong bóng nổi ở góc, hãy chuyển Embed snippet (Đoạn mã nhúng) sang Inline (Nội dòng) trong bảng Quản lý và sao chép đoạn mã nội dòng.

Nó trông như thế này:

<div data-chat-widget="CONFIG_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

<div> 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ẻ <script> trên trang, ngay cả khi bạn đang nhúng nhiều tiện ích trò chuyện. Tập lệnh sẽ quét trang để tìm mọi <div data-chat-widget="…"> và gắn một bảng trò chuyện vào mỗi thẻ đó.

Khi nào nên chọn nhúng nội dòng (inline) so với nổi (floating):

• Bong bóng nổi phù hợp cho nút “Cần trợ giúp?” luôn hiển thị trên toàn trang web.
• Nhúng nội dòng phù hợp khi trò chuyện cần nằm ở một vị trí cụ thể — trang hỗ trợ, thanh bên của cơ sở kiến thức, tab trợ giúp trong ứng dụng — và tạo cảm giác như một phần tự nhiên của trang đó.

Tiện ích nhúng nội dòng sử dụng lại cùng một cấu hình như bong bóng nổi (logo, tin nhắn chào mừng, thu thập thông tin khách hàng tiềm năng, câu hỏi bắt đầu, v.v.), vì vậy bạn không cần phải thiết lập bất cứ điều gì hai lần.

Hiển thị tiện ích trên trang web của người khác #

Bạn có thể hiển thị tiện ích trò chuyện của mình chạy trên một trang web mà bạn không kiểm soát — không cần mã, không cần quyền truy cập vào trang web của họ. Đây là cách nhanh nhất để cho khách hàng tiềm năng thấy trợ lý sẽ trông như thế nào trên các trang của chính họ.

1. Mở bảng Quản lý và cuộn đến Kênh & Nhúng.
2. Trong Liên kết bản demo cho khách hàng, nhập địa chỉ trang web (ví dụ: www.theircompany.com).
3. Nhấp vào Sao chép để sao chép liên kết hoặc Mở để tự mình xem trước.
4. Gửi liên kết cho bất kỳ ai bạn muốn hiển thị.

Việc mở liên kết sẽ tải trang web đó với tiện ích trò chuyện của bạn nổi bên trên, chính xác như cách nó hiển thị nếu được cài đặt. Bất kỳ ai có liên kết đều có thể mở nó — không cần đăng nhập gì cả.

Một vài điều cần lưu ý:

• Các cuộc trò chuyện từ bản demo là thật. Tin nhắn mà khách truy cập gửi trong bản demo sẽ đến hộp thư đến của bạn và được tác nhân của bạn trả lời, đồng thời chúng sử dụng tín dụng như bất kỳ cuộc trò chuyện nào khác.
• Trang này không có thương hiệu. Nó chỉ hiển thị trang web của họ và tiện ích của bạn, không có gì khác.
• Một số trang web không thể được đóng khung. Một số trang web (ngân hàng, nhà bán lẻ lớn, bất kỳ trang nào có cài đặt bảo mật nghiêm ngặt) chặn các trang khác hiển thị chúng. Khi điều đó xảy ra, liên kết vẫn hoạt động: nó hiển thị một cửa sổ trình duyệt giả lập trung lập thay vì trang web thực, với tiện ích của bạn vẫn hoạt động bên trên để bản demo vẫn thực hiện được chức năng của nó.
• Nó không thay đổi trang web của họ. Không có gì được cài đặt và không có gì bị sửa đổi — bản demo chỉ tồn tại bên trong liên kết đó.

Liên kết bản demo luôn sử dụng định tuyến mặc định tài khoản của bạn, bất kể Chuyển hướng các cuộc trò chuyện này đến được đặt là gì. Nếu bạn muốn các cuộc trò chuyện demo được xử lý bởi một tác nhân cụ thể, trước tiên hãy đặt tác nhân đó làm mặc định cho tiện ích trò chuyện của bạn.

Gửi các trang khác nhau đến các chiến dịch khác nhau #

Theo mặc định, mọi cuộc trò chuyện đến qua tiện ích của bạn đều được xử lý bởi cùng một chiến dịch hoặc tác nhân. Bạn có thể ghi đè điều đó cho từng trang, để khách truy cập trên trang giá của bạn trò chuyện với chiến dịch bán hàng trong khi khách truy cập trên trang trợ giúp trò chuyện với tác nhân hỗ trợ của bạn — tất cả đều từ một tiện ích trò chuyện duy nhất.

Có hai cách để lấy mã:

• Từ chiến dịch hoặc tác nhân. Trên trang Chiến dịch, hãy mở menu ⋮ trên một chiến dịch và chọn Thêm vào trang web. Trên trang Tác nhân, hãy nhấp vào nút </> trên hàng đó, hoặc mở tác nhân và đi tới tab Điểm truy cập của nó. Dù bằng cách nào, bạn cũng sẽ nhận được một đoạn mã sẵn sàng để dán, đã được trỏ đến chiến dịch hoặc tác nhân đó.

  Tab Điểm truy cập của tác nhân cũng có bảng Tiện ích trò chuyện trên trang web hiển thị số lượng cuộc trò chuyện trên trang web mà tác nhân đó đang xử lý. Các cuộc trò chuyện từ mã nhúng sẽ tiếp cận trực tiếp tác nhân, vì vậy bạn không cần tạo quy tắc điểm truy cập cho chúng — một tác nhân không có bất kỳ quy tắc nào vẫn sẽ trả lời mã nhúng của nó.

  Thêm vào trang web chỉ xuất hiện trên các chiến dịch đang hoạt động và được thiết lập để xử lý các cuộc trò chuyện đến. Một chiến dịch nháp chưa thể nhận khách truy cập, vì vậy tùy chọn này sẽ bị ẩn cho đến khi bạn xuất bản chiến dịch đó. Trên trang Đại lý, tùy chọn này xuất hiện trên các đại lý đang hoạt động. Một đại lý bị tạm dừng sẽ nhận được cuộc trò chuyện nhưng không bao giờ trả lời, vì vậy tùy chọn này sẽ bị ẩn cho đến khi bạn bật lại. Không có kênh nào cần thiết lập cho đại lý — một đại lý có thể nhận cuộc trò chuyện từ bất kỳ kênh nào.

• Từ cài đặt tiện ích. Trong Cài đặt → Kênh → Quản lý trên tiện ích trò chuyện của bạn, hãy đặt Chuyển các cuộc trò chuyện này đến và sao chép đoạn mã bên dưới. Việc thay đổi menu thả xuống sẽ viết lại đoạn mã đó.

Đoạn mã nổi mang thông tin đích trong địa chỉ:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID?campaign=CAMPAIGN_ID"></script>

Đoạn mã nhúng trực tiếp mang thông tin đó trên <div> 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:

<div data-chat-widget="CONFIG_ID" data-campaign="CAMPAIGN_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Đố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:

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      name: "Maria",
      email: "maria@example.com",
      phone: "+391234567890"
    },
    data: {
      plan: "Professional",
      customer_since: "2024",
      last_order: "A-2291"
    }
  };
</script>
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID"></script>

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 <div>, điều này rất tiện lợi khi một trang chứa nhiều cuộc trò chuyện:

<div data-chat-widget="CONFIG_ID"
     data-visitor-name="Maria"
     data-visitor-email="maria@example.com"
     data-visitor-data='{"plan":"Professional"}'
     style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

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:

<script>
  window.chatWidget.setVisitor({
    visitor: { id: "12345", name: "Maria", email: "maria@example.com" },
    data: { plan: "Professional" }
  });
</script>

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. Widget sẽ nhận thấy sự thay đổi người dùng và tự đặt lại.
• Điều này dành cho 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 chuyể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 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 ở đó.
• Đây là tùy chọn. Một widget trên trang công cộng bình thường không cần bất kỳ điều nào trong số này và hoạt động chính xác như trước.

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, đ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.youraiconnector.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 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.

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.

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.

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 </body>.
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 <script src="..."> mà bạn đã sao chép từ bảng Manage.
• api.youraiconnector.com — tiện ích cũng gửi tin nhắn của nó đến đây.

Không cần mở thêm bất cứ thứ gì khác: không cần thêm cổng và không cần quy tắc gửi đến. Nếu tiện ích vẫn không xuất hiện sau đó, hãy mở bảng điều khiển dành cho nhà phát triển của trình duyệt trên trang đó và gửi cho chúng tôi những gì nó báo cáo — một yêu cầu bị chặn sẽ nêu tên miền bị từ chối, đó thường là câu trả lời đầy đủ.