与网站集成

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

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

向网站添加 Business Messages 微件

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

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

创建微件

更新以下值以创建要插入的 Business Messages 微件 。

说明
LAYOUT 按钮在 上的显示方式 。可以是 buttonfloatinginlineadvanced。接收者 使用您自己的样式,使用 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 网页并转换 &quot;myagentid&quot;移到 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 的上下文值。