Để mở rộng phạm vi tiếp cận của nhân viên hỗ trợ Business Messages, bạn có thể thêm cuộc trò chuyện các điểm truy cập trên các trang web của bạn bằng tiện ích Business Messages.
Tiện ích Business Messages chỉ hỗ trợ thiết bị di động chạy Android 5 trở lên. Các hệ điều hành trên thiết bị di động và môi trường máy tính khác không được hỗ trợ.
Thêm tiện ích Business Messages vào trang web
Để bật các cuộc trò chuyện trên một trang web, bạn phải tải Business Messages Thư viện JavaScript, định cấu hình vị trí tiện ích trên trang và chỉ định ngữ cảnh các giá trị trong tiện ích.
Để biết danh sách các hàm về tình trạng rảnh/bận, cơ sở lưu trú và sự kiện, hãy xem bài viết Doanh nghiệp Tin nhắn tiện ích. Xem hướng dẫn về cách tiện ích Business Messages để đưa ra đề xuất về cách tạo kiểu và sử dụng.
Tạo tiện ích
Cập nhật các giá trị sau để tạo tiện ích Business Messages để chèn vào trang web của bạn.
| Giá trị | Mô tả |
|---|---|
| LAYOUT | Cách nút xuất hiện trên
trang web của bạn. Giá trị này có thể là button, floating, inline hoặc advanced. Người nhận
sử dụng kiểu của riêng bạn, sử dụng advanced, sao chép biểu định kiểu vào trang web,
và sửa đổi nếu cần. |
| AGENT_ID | Mã nhân viên hỗ trợ của bạn. |
| BUTTON_TEXT | Nội dung chẳng hạn như nút hiển thị. |
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js"></script>
Tiện ích mẫu
Tiện ích 
này được tạo bằng mã sau:
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js"></script>
Tuỳ chỉnh tính năng tích hợp tiện ích Business Messages
Tải thư viện JavaScript
Để tải thư viện JavaScript Business Messages, hãy sao chép mã sau và
hãy dán mã này ngay trong thẻ <head> trên mọi trang mà bạn muốn
hiển thị tiện ích Business Messages. Bạn chỉ cần một thư viện JavaScript
bao gồm trên mỗi trang.
<!-- Global Business Messages widget library reference - Business Messages -->
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js?cb=callback">
</script>
Đoạn mã tải xuống và tải thư viện JavaScript, thư viện này sẽ khởi chạy
phần tử trang hiện có với thuộc tính data-bm-widget-agent-id. Chiến lược phát hành đĩa đơn
Thư viện JavaScript chuyển đổi các phần tử trang đã xác định thành các phần tử có thể nhấp vào
để tải giao diện trò chuyện của Business Messages khi người dùng nhấn vào.
Tham số cb không bắt buộc chứa tên của một hàm
tự động được gọi sau khi thư viện JavaScript tải.
Định cấu hình vị trí tiện ích
Khi tải thư viện JavaScript Business Messages, thư viện này sẽ quét trang web để tìm
các phần tử có thuộc tính data-bm-widget-agent-id và chuyển đổi các phần tử này
vào các tiện ích có thể nhấn vào Business Messages. Mọi phần tử bạn muốn chuyển đổi
cho một tiện ích phải bao gồm thuộc tính data-bm-widget-agent-id có giá trị
tương ứng với mã nhân viên hỗ trợ của nhân viên hỗ trợ đã ra mắt.
Ví dụ: Định nghĩa tiện ích
<!-- Example div element that converts into a Business Messages widget -->
<div data-bm-widget-agent-id="myagentid">
Click for Business Messages
</div>
<!-- Example button element that converts into a Business Messages widget -->
<button data-bm-widget-agent-id="myagentid">
Click for Business Messages
</button>
Truyền các giá trị bối cảnh
Để định cấu hình ngữ cảnh tiện ích và chuyển ngữ cảnh đó đến webhook của bạn, hãy bao gồm thông tin không bắt buộc
data-bm-widget-context trong phần tử HTML có chứa thuộc tính
Thuộc tính data-bm-widget-agent-id. Chỉ định một giá trị chuỗi cho
data-bm-widget-context. Tin nhắn được gửi tới webhook của bạn bao gồm ngữ cảnh
giá trị.
data-bm-widget-context có thể có bất kỳ giá trị nào, chẳng hạn như giá trị
có liên quan đến vị trí hiển thị tiện ích trong thời gian chạy trên trang. Trong phần sau
Ví dụ: giá trị thuộc tính của
"eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1 phong bì2RlIjoiQVNEQURTQSJ9Cg==" là
Chuỗi JSON được mã hoá base64 của {"product":"dryer","offer-code":"ASDADSA"}.
data-bm-widget-context có giới hạn là 512 byte.
Ví dụ: Định nghĩa tiện ích kèm ngữ cảnh
<!-- Example div element that converts into a Business Messages widget -->
<div
data-bm-widget-agent-id="myagentid"
data-bm-widget-context="eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==">
Click for Business Messages
</div>
<!-- Example button element that converts into a Business Messages widget -->
<button
data-bm-widget-agent-id="myagentid"
data-bm-widget-context="eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==">
Click for Business Messages
</button>
Trang web mẫu
Mẫu sau đây tải thư viện JavaScript của Business Messages trong
Thẻ <head>, sau đó tự động quét trang HTML và chuyển đổi
"myagentid" vào các tiện ích Business Messages.
<html>
<head>
<script
crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js">
</script>
</head>
<body>
This is a test widget:
<div
data-bm-widget-agent-id="myagentid"
data-bm-widget-context="eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg==">
Click for Business Messages
</div>
Click it.
And this is a widget:
<button
data-bm-widget-agent-id="myagentid"
data-bm-widget-context="VGhpcyBpcyBhIGJ1dHRvbiB0ZXN0Lgo=">
Click for Business Messages
</button>
</body>
</html>
Khởi tạo tiện ích có lập trình
Để kiểm soát chi tiết chế độ thiết lập của mình, bạn có thể chọn khởi chạy
tiện ích theo phương thức lập trình. Để khởi chạy một phần tử theo phương thức lập trình, hãy gọi
bmwidget.init
sau khi thư viện JavaScript Business Messages tải. Biểu mẫu này của
để khởi chạy không yêu cầu bạn đánh dấu các phần tử bằng
Thuộc tính data-bm-widget-agent-id.
<head>
<!-- Global Business Messages widget library reference - Business Messages -->
<script
crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js?cb=initWidget">
</script>
<script type="text/javascript">
// Convert HTML element with ID = myCustomButton into a Business Messages widget
function initWidget() {
window.bmwidget.init(document.getElementById('myCustomButton'), {
'agentId': 'myagentid',
'context': 'eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg=='
});
};
</script>
</head>
Kiểm tra xem thiết bị có hỗ trợ không
Sử dụng
window.bmwidget.supported
để xác minh dịch vụ hỗ trợ Business Messages cho một thiết bị. Các bước kiểm tra mẫu sau đây
để hỗ trợ thiết bị trước khi khởi tạo phần tử HTML bằng mã nhận dạng
"myCustomButton" dưới dạng tiện ích Business Messages.
<head>
<!-- Global Business Messages widget library reference - Business Messages -->
<script
crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js?cb=initWidget">
</script>
<script type="text/javascript">
// Convert HTML element with ID = myCustomButton into a Business Messages widget
function initWidget() {
// Check that the user has a supported device
if (window.bmwidget.supported) {
window.bmwidget.init(document.getElementById('myCustomButton'), {
'agentId': 'myagentid',
'context': 'eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg=='
});
}
};
</script>
</head>
Khởi chạy tiện ích cho các ứng dụng trang đơn
Đối với các ứng dụng Ứng dụng trang đơn, trong đó data-bm-widget-agent-id
được tạo trong thời gian chạy, thư viện JavaScript Business Messages
hiển thị một đối tượng toàn cục window.bmwidget.
Bất cứ khi nào một phần tử mới được thêm vào trang, hãy gọi
window.bmwidget.scan()
để khởi tạo thành phần mới dưới dạng tiện ích Business Messages.
window.bmwidget.scan();
Gọi window.bmwidget.scan() trên lệnh gọi lại cập nhật DOM để đảm bảo
Thuộc tính data-bm-widget-agent-id khởi động lại khi trang thay đổi trạng thái.
Ví dụ về góc
Đoạn mã sau đây khởi chạy window.bmwidget.scan() trong quá trình tải thành phần
lệnh gọi lại trong Angular.
import { Component, OnInit} from '@angular/core';
export class AppComponent implements onInit {
ngOnInit() {
// Initialize tag on re-render
window.bmwidget.scan();
}
}
Ví dụ về phản ứng
Mã sau đây khởi chạy hàm window.bmwidget.scan() trong quá trình
kết xuất một phần tử trong React.
import React, { useState, useEffect } from 'react';
function WrapperComponent() {
...
useEffect(() => {
// Initialize on re-render
window.bmwidget.scan();
});
return (<div><button data-bm-widget-agent-id="myagentid">Chat with us</button></div>);
}
Các bước tiếp theo
Giờ đây, sau khi tích hợp tiện ích Business Messages với trang web của mình, bạn có thể bắt đầu các cuộc trò chuyện Business Messages từ trang web của bạn và nhận các giá trị ngữ cảnh cụ thể theo tiện ích trong tin nhắn từ người dùng.