此页面由 Cloud Translation API 翻译。

与网站集成

如需扩大 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>
    <button data-bm-widget-layout="LAYOUT" data-bm-widget-agent-id="AGENT_ID">
      <span class="bm-widget-button-text">BUTTON_TEXT</span>
    </button>

微件示例

此 widget 网站微件预览由以下代码生成：

    <script crossorigin="use-credentials" src="https://businessmessages.google.com/widget/v2/js"></script>
    <button data-bm-widget-layout="button" data-bm-widget-agent-id="abcdefghijkl">
      <span class="bm-widget-button-text">Chat with us</span>
    </button>

自定义 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 的上下文值。