我们将于 2024 年 7 月 31 日逐步淘汰 Google Business Messages。点击此处了解详情。

此页面由 Cloud Translation API 翻译。

与网站集成

如需扩大 Business Messages 代理的覆盖面，您可以添加对话借助 Business Messages 微件在您的网站上创建入口点。

Business Messages 小组件仅支持搭载 Android 5 及更高版本的移动设备。其他移动操作系统和桌面环境不受支持。

向网站添加 Business Messages 微件

若要启用网站上的对话功能，您需要加载 Business Messages JavaScript 库、配置 widget 在页面上的位置以及指定上下文值。

如需查看可用性函数、属性和事件的列表，请参阅业务私信数量微件。请参阅 Business Messages 微件样式指南获取有关样式和。

创建微件

更新以下值以创建要插入的 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 网页 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 微件集成

加载 JavaScript 库

如需加载 Business Messages JavaScript 库，请复制以下代码并将此代码粘贴到每个要<head> 显示 Business Messages 微件。您只需要一个 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 库会将确定的网页元素转换为可点击的元素。

可选的 cb 形参包含在 JavaScript 库加载后自动调用

配置 widget 放置

Business Messages JavaScript 库加载时，会扫描网站以查找具有 data-bm-widget-agent-id 属性的元素，并将这些元素转换为转换为可点按的 Business Messages 微件。你希望转换的每个元素必须包含带有值的 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 上下文并将其传递给网络钩子，请添加可选的 data-bm-widget-context 属性（包含 data-bm-widget-agent-id 属性。为以下对象指定一个字符串值： data-bm-widget-context。发送到网络钩子的消息包含上下文值。

data-bm-widget-context 可以具有任何值，例如一个值与 widget 在运行时在页面上的显示位置相关。在以下示例， “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> 代码，然后该代码会自动扫描 HTML 网页并转换 "myagentid"移到 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>

程序化微件初始化

要对您的设置进行精细控制，您可以选择初始化以编程方式创建 widget。要以编程方式初始化元素，请调用 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 初始化 HTML 元素之前）获取设备支持信息 “myCustomButton”用作 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>

单页应用的 widget 初始化

对于单页应用，其中 data-bm-widget-agent-id 属性在运行时创建，Business Messages JavaScript 库会公开一个全局对象 window.bmwidget。

每当向网页添加新元素时，系统都会调用 window.bmwidget.scan() 将新元素初始化为 Business Messages 微件。

window.bmwidget.scan();

对 DOM 更新回调调用 window.bmwidget.scan()，以确保 data-bm-widget-agent-id 属性会在页面更改其状态时重新初始化。

Angular 示例

以下代码会在组件加载期间初始化 window.bmwidget.scan() Angular 中的回调函数。

import { Component, OnInit} from '@angular/core';

export class AppComponent implements onInit {
  ngOnInit() {
    // Initialize tag on re-render
    window.bmwidget.scan();
  }
}

React 示例

以下代码会在创建过程中初始化 window.bmwidget.scan() 函数， 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>);
}

后续步骤

现在，您已将 Business Messages 微件与您的网站集成，您可以在您的网站上开始 Business Messages 对话，并接收用户消息中特定于 widget 的上下文值。