2024 年 7 月 31 日をもって、Google ビジネスメッセージはご利用いただけなくなります。詳しくはこちらをご覧ください。

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

ウェブサイトと統合する

ビジネスメッセージエージェントの対応範囲を広げるには、会話を追加しますビジネスメッセージウィジェットを使って、ウェブサイトのエントリポイントを作成できます。

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

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

ウェブサイトからの会話を有効にするには、 JavaScript ライブラリ、ページ上でのウィジェットの配置を構成して、コンテキストを指定する値を入力することもできます。

可用性関数、プロパティ、イベントの一覧については、Business メッセージウィジェットを使用します。詳しくは、ビジネスメッセージウィジェットのスタイルガイドスタイルと推奨事項のあります。

ウィジェットを作成する

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

値	説明
`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 つのみページあたりの表示数です。

<!-- 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 ライブラリが読み込まれると、ウェブサイトをスキャンして data-bm-widget-agent-id 属性を持つ要素を変換し、タップ可能なビジネスメッセージウィジェットに組み込みます。変換するすべての要素 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=="は base64 でエンコードされた {"product":"dryer","offer-code":"ASDADSA"} の 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"ビジネスメッセージウィジェットに組み込まれました

<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 ビジネスメッセージ 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 でビジネスメッセージ機能がサポートされているかを確認します。次のサンプルチェックでは、 HTML 要素を ID で初期化する前のデバイスサポート用 myCustomButtonビジネスメッセージウィジェットとして利用できます。

<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 ビジネスメッセージの JavaScript ライブラリが実行時に作成され、グローバルオブジェクト window.bmwidget を公開します。

ページに新しい要素が追加されるたびに、 window.bmwidget.scan() を使用して、新しい要素をビジネスメッセージウィジェットとして初期化します。

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

次のステップ

ビジネスメッセージウィジェットをウェブサイトに組み込んだので、次のことができます。ウェブサイトからビジネスメッセージのスレッドを開始する受信ユーザーからのメッセージにおけるウィジェット固有のコンテキスト値。