Google Business Messages 功能將於 2024 年 7 月 31 日終止服務。請按這裡瞭解詳情。

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

與網站整合

如要擴大 Business Messages 服務專員的觸及範圍，可以新增對話 Business Messages 小工具可讓你在網站上加入訊息。

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

在網站上加入 Business Messages 小工具

如要啟用網站的對話功能，請載入 Business Messages 以及指定與程式碼相關的 JavaScript 程式庫值。

如需有空與否的函式、房源和事件清單，請參閱「商務商家」訊息小工具。詳情請見 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 程式庫，請複製下列程式碼，並將程式碼貼在需要的每個網頁 <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 程式庫會將找到的網頁元素轉換為可點擊元素會在使用者輕觸時載入 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，請加入 HTML 元素中的 data-bm-widget-context 屬性 data-bm-widget-agent-id 屬性。指定字串值 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> 標記。這種代碼會自動掃描 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>

程式輔助小工具初始化

如要精細控管設定，您可以選擇初始化新增小工具如要透過程式輔助方式初始化元素，請呼叫 bmwidget.init敬上 Business Messages JavaScript 程式庫載入後。形式執行初始化時，您不必使用 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 元素之前，裝置支援。「我的自訂按鈕」導入 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 範例

以下程式碼會在元件載入期間初始化 window.bmwidget.scan() 回呼。

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

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

反應範例

下列程式碼會在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 對話。接收使用者所傳訊息中的小工具專屬背景值。