Nhảy tới nội dung

Widget SDK cho Web

Giới thiệu​

Widget live chat của Chative cung cấp phương pháp đơn giản nhất để trang web của bạn thiết lập kênh giao tiếp trực tiếp với khách truy cập. SDK Widget có các tính năng cho phép tinh chỉnh hành vi và phong cách của chúng.

Cài đặt​

Để widget xuất hiện 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 vào 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', // Thay thế bằng ID người dùng của bạn
    user: {
        email: 'acme@example.com', // Địa chỉ email của người dùng của bạn
        first_name: 'John',
        last_name: 'Doe',
        phone: '+1234567890',
        custom_field: 'CUSTOMER_FIELD_VALUE' // Thay thế khóa và giá trị bằng trường tùy chỉnh của bạn
    },
    isHidden: true // Nếu bạn muốn ẩn widget ngay sau khi khởi động, đặt là true, ngược lại đặt là 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 điền thủ công địa chỉ email của họ. Cũng có thể cung cấp dữ liệu tùy chỉnh.

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');

Điều này sẽ tắt widget live chat. Dựa trên các quy tắc được cung cấp, phương thức này sẽ:

  • Xóa tất cả các sự kiện khỏi hàng đợi nếu nó xuất hiện sau sự kiện 'boot'.
  • Chỉ giữ các sự kiện tiếp theo trong hàng đợi nếu nó xuất hiện trước sự kiện 'boot'.

chativeApi('hide');

chativeApi('hide');

Điều này sẽ ẩn widget live chat.

chativeApi('show');

chativeApi('show');

Điều này sẽ hiển thị widget live chat.

chativeApi('openChatWindow');

chativeApi('openChatWindow');

Điều này sẽ hiển thị cửa sổ chat.

thông tin

Phương thức này chỉ có sẵn cho widget được cấu hình ở chế độ cửa sổ live chat.

chativeApi('closeChatWindow');

chativeApi('closeChatWindow');

Điều 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 ở chế độ cửa sổ live chat.

chativeApi('addEventListener')

chativeApi('addEventListener', {
    event: 'closed' | 'opened' | 'new-agent-message' | 'message-sent' | 'greeting-opened' | 'greeting-closed',
    callback: function(data) {
        // Thực hiện công việc...
    }
});

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

  • 'closed': Kích hoạt khi cửa sổ live chat được đóng.
  • 'opened': Xảy ra khi cửa sổ live 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 một tin nhắn được gửi từ cửa sổ live 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.

Nếu bạn có bất kỳ thắc mắc nào, vui lòng liên hệ với chúng tôi qua live chat. Để biết thêm chi tiết về cách chúng tôi đã giúp khách hàng phát triển kinh doanh, bạn có thể xem blog của chúng tôi hoặc tham gia cộng đồng Discord để học hỏi và chia sẻ những điều mới 😊