如需扩大 Business Messages 代理的覆盖面,您可以使用 Business Messages 微件在网站上添加对话入口点。
Business Messages 微件仅支持搭载 Android 5 及更高版本的移动设备。不支持其他移动操作系统和桌面环境。
向网站添加 Business Messages 微件
如需从网站启用对话功能,您需要加载 Business Messages JavaScript 库,在页面上配置 widget 放置位置,并在 widget 中指定上下文值。
如需查看可用性函数、属性和事件的列表,请参阅“商家信息”微件。如需查看有关样式和用法的建议,请参阅 Business Messages widget 样式指南。
创建微件
更新以下值以创建 Business Messages 微件,并将其插入到您的网站中。
值 | 说明 |
---|---|
LAYOUT | 该按钮在网站上的显示方式可以是 button 、floating 、inline 或 advanced 。若要使用您自己的样式,请使用 advanced ,将样式表复制到您的网页中,并根据需要进行修改。 |
AGENT_ID | 您的代理 ID。 |
BUTTON_TEXT | 您希望按钮显示的文字。 |
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js"></script>
微件示例
此 widget 由以下代码生成:
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js"></script>
自定义 Business Messages widget 集成
加载 JavaScript 库
如需加载 Business Messages JavaScript 库,请复制以下代码,并将其粘贴到您希望显示 Business Messages widget 的每个页面的 <head>
标记中。每个网页只需要添加一段 JavaScript 库。
<!-- Global Business Messages widget library reference - Business Messages -->
<script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js?cb=callback">
</script>
该代码段会下载并加载 JavaScript 库,该库会使用 data-bm-widget-agent-id
属性初始化现有页面元素。JavaScript 库会将识别出的网页元素转换为可点击的元素,这些元素会在点按时加载 Business Messages 对话界面。
可选的 cb
参数包含 JavaScript 库加载后自动调用的函数的名称。
配置微件放置位置
Business Messages JavaScript 库加载后,会扫描网站以查找具有 data-bm-widget-agent-id
属性的元素,并将这些元素转换为可点按的 Business Messages widget。您要转换为微件的每个元素都必须包含一个 data-bm-widget-agent-id
属性,其值对应于已发布代理的代理 ID。
示例:微件定义
<!-- 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>
传递上下文值
如需配置 widget 上下文并将其传递给 webhook,请在包含 data-bm-widget-agent-id
属性的 HTML 元素中添加可选的 data-bm-widget-context
属性。指定 data-bm-widget-context
的字符串值。发送到 webhook 的消息包含上下文值。
data-bm-widget-context
可以具有任何值,例如与页面上运行时微件显示的位置相关的值。在以下示例中,“eyJwcm9kdWN0IjoiZHJ5ZXIiLCJvZmZlci1jb2RlIjoiQVNEQURTQSJ9Cg=="”的属性值为 {"product":"dryer","offer-code":"ASDADSA"}
的 base64 编码 JSON 字符串。
data-bm-widget-context
的上限为 512 字节。
示例:包含上下文的微件定义
<!-- 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>
示例网站
以下示例会在 <head>
标记中加载 Business Messages JavaScript 库,该库随后会自动扫描 HTML 页面并将“myagentid”转换为 Business Messages widget。
<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>
程序化微件初始化
如需对您的设置进行精细控制,您可以选择以编程方式初始化 widget。如需以编程方式初始化元素,请在加载 Business Messages JavaScript 库后调用 bmwidget.init
。这种形式的初始化不需要您使用 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>
检查设备支持情况
使用 window.bmwidget.supported
验证设备是否支持 Business Messages。以下示例会先检查设备支持情况,然后再将 ID 为“myCustomButton”的 HTML 元素初始化为 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>
单页应用的微件初始化
对于单页应用,其中 data-bm-widget-agent-id
属性在运行时创建,Business Messages JavaScript 库公开了全局对象 window.bmwidget
。
每当向页面添加新元素时,都调用 window.bmwidget.scan()
以将新元素初始化为 Business Messages widget。
window.bmwidget.scan();
对 DOM 更新回调调用 window.bmwidget.scan()
,以确保 data-bm-widget-agent-id
属性在页面更改其状态时重新初始化。
Angular 示例
以下代码会在 Angular 的组件加载回调期间初始化 window.bmwidget.scan()
。
import { Component, OnInit} from '@angular/core'; export class AppComponent implements onInit { ngOnInit() { // Initialize tag on re-render window.bmwidget.scan(); } }
React 示例
以下代码用于在 React 中呈现元素期间初始化 window.bmwidget.scan()
函数。
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>); }
后续步骤
现在,您已将 Business Messages widget 与您的网站集成,您可以从网站开始 Business Messages 对话,并在来自用户的消息中接收特定于 widget 的上下文值。