Gửi thông tin tới AhaSpot

Thông tin bổ sung về một liên hệ luôn hữu ích. SDK trang web AhaSpot đảm bảo rằng bạn có thể gửi thông tin bổ sung mà bạn có về người dùng.

Nếu bạn đã cài đặt mã của chúng tôi trên trang web của mình, SDK sẽ hiển thị đối tượng window.$chatwoot.

Để đảm bảo SDK đã được tải hoàn toàn, vui lòng đảm bảo chatwoot:ready sự kiện như sau::

window.addEventListener("chatwoot:ready", function () {
  // Use window.$chatwoot here
  // ...
});

Nếu bạn muốn nghe tin nhắn trong tiện ích, bạn có thể sử dụng sự kiện sau.

window.addEventListener("chatwoot:on-message", function (e) {
  console.log("chatwoot:on-message", e.detail);
});

Cài đặt SDK

Để ẩn bong bóng, bạn có thể sử dụng cài đặt được đề cập bên dưới.

Lưu ý: Nếu bạn sử dụng tính năng này thì bạn cũng sẽ phải kích hoạt tiện ích này.

window.chatwootSettings = {
  hideMessageBubble: false,
  position: "left", // This can be left or right
  locale: "en", // Language to be set
  useBrowserLanguage: false, // Set widget language from user's browser
  baseDomain: '.mydomain.com'
  type: "standard", // [standard, expanded_bubble]
  darkMode: "auto", // [light, auto]
};

Phiên trò chuyện liên tục trên các tên miền phụ

Cấu hình này baseDomain giữ lại các phiên trò chuyện của người dùng trên các tên miền phụ, đảm bảo trải nghiệm trò chuyện liền mạch khi người dùng điều hướng qua các trang trong tên miền của bạn.

Thiết lập

Thêm cấu hình baseDomain vào window.chatwootSettings

window.chatwootSettings = {
  //other settings
  baseDomain: ".yourdomain.com",
};

Thay thế yourdomain.com bằng tên miền của bạn, giữ nguyên dấu chấm trước đó.

Ghi chú

• Đảm bảo SSL được đặt cho tất cả các tên miền phụ.
• Cấu hình áp dụng cho các tên miền phụ, không áp dụng cho các tên miền khác nhau.

Ví dụ:

baseDomain: '.chatwoot.com'

Tự động sử dụng ngôn ngữ trình duyệt trong tiện ích trò chuyện trực tiếp của bạn

Để hiển thị tiện ích trò chuyện trực tiếp trong ngôn ngữ trình duyệt của người dùng, hãy đặt useBrowserLanguage thành true

Lưu ý: Nếu useBrowserLanguage được đặt thành true, Nội dung locale được đề cập sẽ bị bỏ qua. Nếu ngôn ngữ trình duyệt không được AhaSpot hỗ trợ thì ngôn ngữ được đề cập bên dưới locale sẽ được sử dụng. Nếu thiếu điều đó, tiện ích sẽ quay trở lại localebảng thông tin của tổng đài viên.

Chế độ tối

Tiện ích trò chuyện trực tiếp AhaSpot hỗ trợ chế độ tối từ v2.4.0. Để bật chế độ tối, hãy làm theo các bước được đề cập tại đây.

Thiết kế tiện ích

Chatwoot hỗ trợ hai thiết kế cho widget.

1. Tiêu chuẩn (mặc định)

2. Bong bóng mở rộng

Nếu bạn đang sử dụng bong bóng mở rộng, bạn có thể tùy chỉnh văn bản được sử dụng trong bong bóng bằng cách đặt tham số launcherTitle trên chatwootSettings như mô tả bên dưới.

window.chatwootSettings = {
  type: "expanded_bubble",
  launcherTitle: "Chat with us",
};

Bật cửa sổ popout

Để bật cửa sổ popout, hãy thêm cấu hình sau vào chatwootSettings. Tùy chọn này được tắt theo mặc định.

window.chatwootSettings = {
  // ...Other Config
  showPopoutButton: true,
}

You can also popout the chat window programatically with the `popoutChatWindow()` method.

Lập trình mở cửa sổ popout

Bạn có thể mở cửa sổ popout theo chương trình bằng phương thức này popoutChatWindow().

Để bắt đầu việc này, hãy gọi phương thức như bên dưới.

window.$chatwoot.popoutChatWindow();

Chuyển đổi chế độ hiển thị bong bóng tiện ích

Nếu bạn muốn ẩn/hiện bong bóng tiện ích AhaSpot, bạn có thể làm như vậy với toggleBubbleVisibility('show/hide')

Ví dụ

window.$chatwoot.toggleBubbleVisibility("show"); // to display the bubble
window.$chatwoot.toggleBubbleVisibility("hide"); // to hide the bubble

Tiện ích kích hoạt mà không hiển thị bong bóng

window.$chatwoot.toggle();

// Toggle widget by passing state
window.$chatwoot.toggle("open"); // To open widget
window.$chatwoot.toggle("close"); // To close widget

Đặt người dùng trong tiện ích

window.$chatwoot.setUser("<unique-identifier-key-of-the-user>", {
  email: "<[email protected]>",
  name: "<name-of-the-user>",
  avatar_url: "<avatar-url-of-the-user>",
  phone_number: "<phone-number-of-the-user>",
});

setUser chấp nhận mã định danh có thể là một user_id trong cơ sở dữ liệu của bạn hoặc bất kỳ tham số duy nhất nào đại diện cho người dùng. Bạn có thể chuyển email, tên, avatar_url, phone_number làm thông số. Hỗ trợ cho các tham số bổ sung đang được tiến hành.

Đảm bảo rằng bạn đặt lại phiên khi người dùng đăng xuất khỏi ứng dụng của bạn.

Xác thực danh tính bằng HMAC

Để không cho phép mạo danh và giữ kín cuộc trò chuyện với khách hàng, chúng tôi khuyên bạn nên thiết lập xác thực danh tính trong Chatwoot. Xác thực danh tính được bật bằng cách tạo HMAC (mã xác thực tin nhắn dựa trên hàm băm) dựa trên identifier thuộc tính, sử dụng SHA256. Cùng với đó, identifier bạn cũng có thể chuyển identifier_hash như hình bên dưới để đảm bảo rằng người dùng đã đúng.

window.$chatwoot.setUser(`<unique-identifier-key-of-the-user>`, {
  name: "", // Name of the user
  avatar_url: "", // Avatar URL
  email: "", // Email of the user
  identifier_hash: "", // Identifier Hash generated based on the webwidget hmac_token
  phone_number: "", // Phone Number of the user
  description: "", // description about the user
  country_code: "", // Two letter country code
  city: "", // City of the user
  company_name: "", // company name
  social_profiles: {
    twitter: "", // Twitter user name
    linkedin: "", // LinkedIn user name
    facebook: "", // Facebook user name
    github: "", // Github user name
  },
});

Để tạo HMAC, hãy đọc Xác thực danh tính

Lưu ý rằng việc triển khai xác thực HMAC sẽ cho phép lịch sử trò chuyện tồn tại qua các phiên.

Đặt thuộc tính tùy chỉnh

Cho liên hệ

Để đặt lệnh gọi thuộc tính tùy chỉnh setCustomAttributes như sau

window.$chatwoot.setCustomAttributes({
  accountId: 1,
  pricingPlan: "paid",

  // Here the key which is already defined in custom attribute
  // Value should be based on type (Currently support Number, Date, String and Number)
});

Bạn có thể xem những thông tin này trong bảng điều khiển bên của cuộc trò chuyện.

Để xóa một thuộc tính tùy chỉnh, sử dụng deleteCustomAttribute như sau

window.$chatwoot.deleteCustomAttribute("attribute-key");

Cho một cuộc trò chuyện

Bạn cũng có thể đặt thuộc tính tùy chỉnh cho cuộc trò chuyện đang diễn ra từ SDK. Để đặt thuộc tính tùy chỉnh, hãy gọi setConversationCustomAttributes như sau.

window.$chatwoot.setConversationCustomAttributes({
  productName: "iPhone",
  productCategory: "Smartphone",
});

Bạn có thể xem thông tin này trong bảng điều khiển bên của cuộc trò chuyện.

Để xóa một thuộc tính tùy chỉnh, hãy sử dụng deleteConversationCustomAttribute như sau.

window.$chatwoot.deleteConversationCustomAttribute("productName");

Đặt ngôn ngữ theo cách thủ công

window.$chatwoot.setLocale("en");

Để đặt ngôn ngữ theo cách thủ công, hãy sử dụng chức năng setLocale.

Đặt nhãn cho cuộc trò chuyện

Xin lưu ý rằng nhãn sẽ được đặt cho cuộc trò chuyện nếu người dùng chưa bắt đầu cuộc trò chuyện. Trong trường hợp đó, các mục sau sẽ không có tác dụng gì:

window.$chatwoot.setLabel("support-ticket");

window.$chatwoot.removeLabel("support-ticket");

Làm mới phiên (sử dụng tính năng này khi bạn đăng xuất người dùng khỏi ứng dụng của mình)

window.$chatwoot.reset();

Lỗi tiện ích

Để xem bất kỳ lỗi nào trong tiện ích, vui lòng đảm bảo rằng bạn nghe chatwoot:event sự kiện như sau:

window.addEventListener("chatwoot:error", function () {
  // ...
});

Lưu ý: Tính năng này có sẵn ở phiên bản v2.3.0 trở lên.