このページは Cloud Translation API によって翻訳されました。

ウェブサイトと統合する

ビジネスメッセージウィジェットを使用すると、ウェブサイトに会話エントリポイントを追加して、ビジネスメッセージエージェントへのリーチを広げることができます。

ビジネスメッセージウィジェットは、Android 5 以降を搭載したモバイルデバイスのみに対応しています。その他のモバイルオペレーティングシステムとデスクトップ環境はサポートされていません。

ウェブサイトにビジネスメッセージウィジェットを追加する

ウェブサイトからの会話を有効にするには、ビジネスメッセージの JavaScript ライブラリを読み込み、ページにウィジェットの配置を構成し、ウィジェット内でコンテキスト値を指定します。

可用性関数、プロパティ、イベントのリストについては、ビジネスメッセージウィジェットをご覧ください。スタイルと使い方に関する推奨事項については、ビジネスメッセージウィジェットのスタイルガイドをご覧ください。

ウィジェットを作成する

次の値を更新して、ウェブサイトに挿入するビジネスメッセージウィジェットを作成します。

値	説明
`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>

ビジネスメッセージウィジェットの統合のカスタマイズ

JavaScript ライブラリを読み込む

ビジネスメッセージの JavaScript ライブラリを読み込むには、ビジネスメッセージウィジェットを表示するすべてのページで、次のコードをコピーして <head> タグ内に貼り付けます。JavaScript ライブラリのインクルージョンは、1 ページにつき 1 つだけ必要です。

<!-- 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 ライブラリの読み込み後に自動的に呼び出される関数の名前が含まれています。

ウィジェットの配置を設定する

ビジネスメッセージの JavaScript ライブラリが読み込まれると、ウェブサイトで data-bm-widget-agent-id 属性が指定された要素をスキャンし、これらの要素をタップ可能なビジネスメッセージウィジェットに変換します。ウィジェットに変換するすべての要素に、起動したエージェントのエージェント ID に対応する値を持つ data-bm-widget-agent-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」がビジネスメッセージウィジェットに変換されます。

<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 を使用して、デバイスがビジネスメッセージに対応しているかどうかを確認します。次のサンプルでは、ビジネスメッセージウィジェットとして ID「myCustomButton」を使用して HTML 要素を初期化する前に、デバイスのサポートを確認します。

<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() を呼び出して、新しい要素をビジネスメッセージウィジェットとして初期化します。

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>);
}

次のステップ

ビジネスメッセージウィジェットをウェブサイトに統合したら、ウェブサイトからビジネスメッセージの会話を開始し、ユーザーからのメッセージをウィジェット固有のコンテキスト値で受け取ることができます。