本頁面由 Cloud Translation API 翻譯而成。

與網站整合

如要擴大 Business Messages 代理程式的觸及範圍，您可以使用 Business Messages 小工具在網站上新增對話進入點。

Business Messages 小工具僅支援搭載 Android 5 以上版本的行動裝置。不支援其他行動作業系統和桌面環境。

將 Business Messages 小工具新增至網站

如要啟用網站對話，請載入 Business Messages JavaScript 程式庫、在網頁上設定小工具的位置，並在小工具中指定內容值。

如需可用性函式、屬性和事件的清單，請參閱 Business Messages 小工具。如需樣式和使用方式的建議，請參閱 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>

小工具範例

這個小工具網頁小工具預覽是由以下程式碼產生：

    <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 程式庫，請複製下列程式碼，然後貼到您要顯示 Business Messages 小工具的每個網頁的 <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 小工具。每個要轉換為小工具的元素都必須包含 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>

傳送內容值

如要設定小工具結構定義並傳送至 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 小工具。

<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>

程式輔助小工具初始化

如要精確控制您的設定，您可以選擇透過程式初始化小工具。如要透過程式初始化元素，請在載入 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 小工具。

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 中的元素轉譯期間初始化 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 小工具整合至您的網站，可以開始從網站發起 Business Messages 對話，並在使用者訊息中接收小工具專用的情境值。