Nhảy tới nội dung

Hướng dẫn Cài đặt và Sử dụng Widget SDK cho Website

Cài đặt​

Để hiển thị widget trên ứng dụng web của bạn, chỉ cần sao chép và dán đoạn mã dưới đây trước thẻ <body> trên mỗi trang mà bạn muốn widget xuất hiện cho khách truy cập trang web.

<script>
const channelId = 'your-channel-id';

!function(t,e,i){e.chativeApi=function(t,i){e.ChativeApi?e.ChativeApi(t,i):(e.ChativeEvents||=[],e.ChativeEvents.push([t,i]))},function n(){if(t.body){const n=t.createElement("script");n.src=`https://messenger.svc.chative.io/static/v1.0/channels/${i}/script.js?mode=livechat&state=off&hostname=${e.location.hostname}`,n.async=!0,t.body.appendChild(n)}else setTimeout(n,100)}()}(document,window,channelId);
</script>

Phương thức​

chativeApi('boot');

const user = {
    user_id: 'UNIQUE_USER_ID', // Replace with your user ID
    user: {
        email: 'acme@example.com', // Your user's email address
        first_name: 'John',
        last_name: 'Doe',
        phone: '+1234567890',
        custom_field: 'CUSTOMER_FIELD_VALUE' // Replace key and value with your custom field
    },
    isHidden: true // If you want to hide the widget immediately after boot, set it to true, otherwise set it to false.
}

chativeApi('boot', user);

Bạn có thể đính kèm thông tin người dùng để khách hàng của bạn không cần phải nhập thủ công địa chỉ email của họ. Việc cung cấp dữ liệu tùy chỉnh cũng có thể thực hiện được.

thông tin

Các trường tùy chỉnh là tùy chọn và có thể được sử dụng để lưu trữ bất kỳ thông tin bổ sung nào về khách hàng. Các trường tùy chỉnh phải được tạo trước khi sử dụng chức năng này.

chativeApi('shutdown');

chativeApi('shutdown');

Phương thức này sẽ tắt cửa sổ chat. Dựa trên các quy tắc đã cung cấp, phương thức này sẽ:

  • Loại bỏ tất cả sự kiện khỏi hàng đợi nếu nó xuất hiện sau sự kiện 'boot'.
  • Giữ lại các sự kiện sau nếu nó xuất hiện trước sự kiện 'boot'.

chativeApi('hide');

chativeApi('hide');

Phương thức này sẽ ẩn cửa sổ chat.

chativeApi('show');

chativeApi('show');

Phương thức này sẽ hiển thị cửa sổ chat.

chativeApi('openChatWindow');

chativeApi('openChatWindow');

Phương thức này sẽ mở cửa sổ chat.

thông tin

Phương thức này chỉ dành cho widget được mở với chế độ cửa sổ chat.

chativeApi('closeChatWindow');

chativeApi('closeChatWindow');

Phương thức này sẽ đóng cửa sổ chat.

thông tin

Phương thức này chỉ có sẵn cho widget được cấu hình với chế độ cửa sổ chat trực tiếp.

chativeApi('addEventListener')

chativeApi('addEventListener', {
    event: 'closed' | 'opened' | 'new-agent-message' | 'message-sent' | 'greeting-opened' | 'greeting-closed',
    callback: function(data) {
        // Do stuff...
    }
});

Bạn có thể đăng ký các sự kiện khác nhau để tăng cường tương tác với cửa sổ chat. Các sự kiện này bao gồm:

  • 'closed': Kích hoạt khi cửa sổ chat được đóng lại.
  • 'opened': Xảy ra khi cửa sổ chat được mở.
  • 'new-agent-message': Kích hoạt khi nhận được tin nhắn mới từ nhân viên.
  • 'message-sent': Kích hoạt khi tin nhắn được gửi từ cửa sổ chat.
  • 'greeting-opened': Kích hoạt khi tin nhắn chào mừng được mở.
  • 'greeting-closed': Xảy ra khi tin nhắn chào mừng được đóng lại.