Facebookチャットプラグイン(ベータ)

Facebookチャットプラグインを使用すると、Messengerのエクスペリエンスを直接ウェブサイトに統合できます。これによりカスタマーは、Messengerと同様の、パーソナライズされたリッチメディアエクスペリエンスで、事業者といつでもやり取りできるようになります。

Facebookチャットプラグインは、個人と事業者間の最新のチャット履歴を自動的に読み込みます。つまり、messenger.com、Messengerアプリ、ウェブサイトのFacebookチャットプラグインで最近やり取りした内容が表示されます。これにより、すべてのやり取りが1つのエクスペリエンスにまとめられ、カスタマーがウェブページから離れた後もスレッドを続行できます。フォローアップのために情報を集める必要もなく、Messenger内の同じスレッドを使用できます。

内容

機能のサポート

ブラウザーのサポート

Facebookチャットプラグインは、Messengerアプリ内ブラウザー以外のすべてのデスクトップブラウザーおよびモバイルブラウザーをサポートしています。

メッセージタイプとテンプレートのサポート

現在、Facebookチャットプラグインは、次のメッセージタイプとフォーマット済みメッセージテンプレートをサポートしています。

機能 サポート

SMS

はい

動画/画像/音声/GIF

はい

一般/ボタンテンプレート

はい(一部のボタンタイプのみサポート)

ポストバック

URLボタン

通話ボタン

購入ボタン

シェアボタン

ログインボタン

ログアウトボタン

ゲームプレイボタン

リスト/メディア/Open Graphテンプレート

いいえ

クイック返信

はい(一部のクイック返信タイプのみサポート)

テキストのクイック返信

利用者の携帯電話番号のクイック返信

利用者のメールアドレスのクイック返信

位置情報のクイック返信

固定メニュー

はい

送信者のアクション

はい

SDKを含める

Facebookチャットプラグインを使用するには、プラグインが表示されるページに、カスタマーチャットSDKを含むFacebook JavaScript SDKバージョンを組み込む必要があります。

SDKを組み込む手順については、カスタマーチャットSDKをご覧ください。

ローカリゼーションとインターナショナリゼーション

自動翻訳を含むインターナショナリゼーションを利用するには、SDKのロケールをサイトと同じロケールに変更する必要があります。具体的には、SDKを開始するときに、en_USをサポートされているロケールコードに変更する必要があります。

詳しくは、ソーシャルプラグインとJavaScript SDKを利用したローカライズをご覧ください。

プラグインの動的なコントロール

プラグインの特定の動作(ダイアログの開閉など)を動的にコントロールできるAPIも用意されています。

詳しくは、カスタマーチャットSDKをご覧ください。

プラグインのセットアップ

Facebookチャットプラグインをウェブページに組み込むには、セットアップツールを使用するか、開発者のセットアップ手順を実施します。

オプション1: セットアップツールを使用する

ページ設定には、ページ管理者向けに、Facebookチャットプラグインを簡単にカスタマイズできるセットアップツールも用意されています。セットアップツールを使用するには、以下の操作を行います。

  1. [ページ設定] > [メッセージ]に移動します。
  2. [ウェブサイトにMessengerを追加]セクションで、[スタート]ボタンをクリックします。

セットアップツールでは、簡単なUIを使用して、あいさつメッセージ、テーマカラー、表示される返信時間のカスタマイズや、プラグイン用にホワイトリストに登録されたドメインの設定が行えます。

完了すると、セットアップツールによって自動的にコードスニペットが生成されます。これをコピー/ペーストして、ウェブページにFacebookチャットプラグインを組み込みます。

オプション2: 開発者の手順に従ってセットアップする

ウェブページにFacebookチャットプラグインを組み込むには、以下の手順を実施します。

  1. ウェブサイトのドメインをホワイトリストに追加する

    セキュリティ上の理由から、プラグインはホワイトリストに登録されているドメインで読み込まれた場合にのみ表示されます。プログラムを使用してドメインをホワイトリストに登録する方法について詳しくは、whitelisted_domainsのリファレンスをご覧ください。

    ドメイン名とHTTPが必要

    ドメインをホワイトリストに登録するには、以下の要件を満たす必要があります。

    • HTTPSを経由すること

    • 完全修飾ドメイン名を使用すること(https://www.messenger.com/など)。ホワイトリスト登録では、IPアドレスとlocalhostはサポートされていません。

    ビジネスのMessengerエクスペリエンスがサービスプロバイダーから提供されている場合、そのビジネスはFacebookアプリの所有者ではないため、アプリの設定でページトークンを生成できません。この場合、ホワイトリストに追加されたドメインをページ設定経由で追加または削除できます。ドメインをホワイトリストに追加するには、以下の操作を行います。

    1. ページ上部の[設定]をクリックします。
    2. 左側の[Messengerプラットフォーム]をクリックします。
    3. [ホワイトリストに追加されたドメイン]セクションで、あなたのページのホワイトリストに追加されたドメインを編集します。
  2. ウェブページにプラグインを組み込む

    ウェブページにプラグインを追加するには、HTMLに以下の属性が付いたdivを含めてください。
    <div class="fb-customerchat"
     page_id="<PAGE_ID>">
    </div>

    デフォルトでは、あいさつダイアログがデスクトップでもモバイルでも表示されます。あいさつダイアログの動作は、greeting_dialog_displayと'greeting_dialog_delay'属性を使用してカスタマイズできます。

    推奨される位置

    Facebookチャットプラグインの位置を、デフォルトのページの右下隅から変更しないことを強くおすすめします。

    属性の全リストは、Facebookチャットプラグインのリファレンスでご確認ください。

  3. 任意。新しいスレッドのmessaging_postbacksイベントを処理する

    新しいスレッドがプラグイン経由で開始され、ボットがスタートボタンをセットアップすると、利用者がスタートボタンをクリックしたときに、messaging_postbacks WebhookイベントがWebhookに送信されます。

    Facebookチャットプラグインを組み込む際にref属性を設定すると、この属性がポストバックイベントに追加されます。

    重要な変更(2020年5月5日)

    グラフAPI v7.0以上では、チャットプラグインからのmessaging_postback Webhookイベントはsender.idフィールドを返しません。代わりに、新しいsender.user_refフィールドを返します。この変更は、2020年11月2日以降、v7.0より前のすべてのグラフAPIバージョンでも有効になります。

    新しいメッセージングポストバックWebhookイベント(グラフAPI v7.0以上 - 2020年11月2日以降はすべてのグラフAPIバージョンで使用可能)

    {
      "sender":{
        "user_ref":"<USER_REF>" // new field
      },
      "recipient":{
        "id":"<PAGE_ID>"
      },
      "timestamp":1458692752478,
      "postback":{
        "title": "<TITLE_FOR_THE_CTA>",  
        "payload": "<USER_DEFINED_PAYLOAD>",
        "referral": {
          "ref": "<USER_DEFINED_REFERRAL_PARAM>",
          "source": "<SHORTLINK>",
          "type": "OPEN_THREAD",
        }
      }
    }    

    古いメッセージングポストバックWebhookイベント(グラフAPI v6.0以下 - 2020年11月2日まで使用可能)

    {
      "sender":{
        "id":"<PSID>"
      },
      "recipient":{
        "id":"<PAGE_ID>"
      },
      "timestamp":1458692752478,
      "postback":{
        "title": "<TITLE_FOR_THE_CTA>",  
        "payload": "<USER_DEFINED_PAYLOAD>",
        "referral": {
          "ref": "<USER_DEFINED_REFERRAL_PARAM>",
          "source": "<SHORTLINK>",
          "type": "OPEN_THREAD",
        }
      }
    }    

    新しいmessaging_postback Webhookフォーマットでは、USER_REFを利用してメッセージを送信します。USER_REFはユーザープロフィールAPIでは機能しなくなります。ユーザーが返信したときにPSIDを取得すれば、それを送信APIとユーザープロフィールAPIで使用できます。

    USER_REFを含む送信API

    curl -X POST -H "Content-Type: application/json" -d '{
      "messaging_type": "<MESSAGING_TYPE>",
      "recipient": {
        "user_ref": "<USER_REF>"
      },
      "message": {
        "text": "hello, world!"
      }
    }' "https://graph.facebook.com/v7.0/me/messages?access_token=<PAGE_ACCESS_TOKEN>"
    
  4. 任意。既存のスレッドのmessaging_referralsイベントを処理する

    既存のスレッドでは、ref属性がFacebookチャットプラグインの組み込みの際に設定されていると、スレッドがプラグイン経由で続行されたときにmessaging_referrals WebhookイベントがWebhookに送信されます。

    refは任意の文字列にすることができ、さまざまな用途に使用できます。たとえば、プラグイン経由でビジネスとやり取りしたカスタマーをトラッキングするために使用できます。

    重要な変更(2020年5月5日)

    グラフAPI v7.0以上では、チャットプラグインからのmessaging_referrals Webhookイベントはsender.idフィールドを返しません。代わりに、新しいsender.user_refフィールドを返します。この変更は、2020年11月2日以降、v7.0より前のすべてのグラフAPIバージョンでも有効になります。

    新しいリファーラルWebhookイベント(グラフAPI v7.0以上 - 2020年11月2日以降はすべてのグラフAPIバージョンで使用可能)

    {
        "object": "page",
        "entry": [
            {
                "id": "<PAGE_ID>",
                "time": 1559598385735,
                "messaging": [
                    {
                        "recipient": {
                            "id": "<PAGE_ID>"
                        },
                        "timestamp": 1559598385735,
                        "sender": {
                            "user_ref":"<USER_REF>" // new field
                        },
                        "referral": {
                            "ref": "<DEVELOPER_DEFINED_REFERRAL>",
                            "source": "CUSTOMER_CHAT_PLUGIN",
                            "type": "OPEN_THREAD",
                            "referer_uri": "<REFERRAL_URI>"
                        }
                    }
                ]
            }
        ]
    }
    

    古いリファーラルWebhookイベント(グラフAPI v6.0以下 - 2020年11月2日まで使用可能)

    {
        "object": "page",
        "entry": [
            {
                "id": "<PAGE_ID>",
                "time": 1559598385735,
                "messaging": [
                    {
                        "recipient": {
                            "id": "<PAGE_ID>"
                        },
                        "timestamp": 1559598385735,
                        "sender": {
                            "id": "<USER_PSID>"
                        },
                        "referral": {
                            "ref": "<DEVELOPER_DEFINED_REFERRAL>",
                            "source": "CUSTOMER_CHAT_PLUGIN",
                            "type": "OPEN_THREAD",
                            "referer_uri": "<REFERRAL_URI>"
                        }
                    }
                ]
            }
        ]
    }
    

    新しいmessaging_referrals Webhookフォーマットでは、USER_REFを利用してメッセージを送信します。USER_REFはユーザープロフィールAPIでは機能しなくなります。ユーザーが返信したときにPSIDを取得すれば、それを送信APIとユーザープロフィールAPIで使用できます。

    USER_REFを含む送信API

    curl -X POST -H "Content-Type: application/json" -d '{
      "messaging_type": "<MESSAGING_TYPE>",
      "recipient": {
        "user_ref": "<USER_REF>"
      },
      "message": {
        "text": "hello, world!"
      }
    }' "https://graph.facebook.com/v7.0/me/messages?access_token=<PAGE_ACCESS_TOKEN>"
    

プラグインのカスタマイズ

Facebookチャットプラグインでは、以下をカスタマイズできます。ウェブページにプラグインが組み込まれている場合、すべてのカスタマイズは属性として設定されます。

属性 説明

theme_color

任意。Facebookチャットプラグインアイコンの背景色やユーザーが送信するメッセージの背景色など、プラグインのテーマとして使用する色。先頭に番号記号が付いた16進数のカラーコード(白を除く)がサポートされています(例: #0084FF)。白とのコントラストが高い色を選ぶことを強くおすすめします。

logged_in_greeting

任意。ユーザーがFacebookにログインしている場合に表示されるあいさつメッセージ。80文字以内。

logged_out_greeting

任意。ユーザーがFacebookにログインしていない場合に表示されるあいさつメッセージ。80文字以内。

greeting_dialog_display

任意。あいさつダイアログの表示方法を設定します。サポートされている値は次のとおりです。


  • show:greeting_dialog_delay属性で指定された秒数が過ぎたら、デスクトップでもモバイルでもあいさつダイアログが表示され、開いたままの状態になります。
  • hide:あいさつダイアログは、デスクトップでもモバイルでも、ユーザーがプラグインをクリックするまで表示されません。
  • fade:greeting_dialog_delay属性で設定された秒数が過ぎたら、あいさつダイアログが少しの間表示され、デスクトップでは消えて非表示になります。

プラグインのデフォルト設定は、デスクトップでもモバイルでもshowになっています。詳しくは、後述の動作のキャッシングのセクションをご覧ください。

greeting_dialog_delay

任意。プラグインの読み込み後にあいさつダイアログが表示されるまでの秒数を設定します。この設定を使用して、あいさつダイアログが表示されるタイミングをカスタマイズできます。greeting_dialog_delayは設定されているがgreeting_dialog_displayは設定されていない場合、デスクトップではあいさつダイアログに遅延が考慮されますが、モバイルデバイスでは遅延が考慮されません。

ref

任意。webhookイベントで差し戻す追加のコンテキストを含めたい場合は、オプションで参照パラメーターを渡すことができます。これはさまざまな用途に使用することができます。たとえば、ユーザーがスレッドを開始したページをトラッキングして、そのユーザーをボット内からアクセスできる特定のコンテンツや機能に誘導したり、Messengerユーザーをウェブサイトのセッションやアカウントに結びつけたりすることができます。

固定メニューを無効にする

Facebookチャットプラグインのボットで固定メニューを無効にすることが望ましいケースがあります。これを行うには、固定メニューを設定するときに"disabled_surfaces": ["CUSTOMER_CHAT_PLUGIN"]を追加します。

MessengerプロフィールAPIペイロードの例

{
  "persistent_menu":[
    {
      "locale":"default",
      "disabled_surfaces": ["CUSTOMER_CHAT_PLUGIN"],
      "composer_input_disabled": false,      
      "call_to_actions":[
        {
          "title":"My Account",
          "type":"postback",
          "payload":"PAYBILL_PAYLOAD"
        }
      ]
    }
  ]
}

ユーザーログイン

ユーザーがすでにFacebookアカウントにログインしている場合は、すぐにボットとチャットを始められます。ログインしていない場合は、デフォルトのウェルカムメッセージが表示され、ログインするか、新しいFacebookアカウントを作成するよう求められます。

年齢/国制限を使用するページ

ページ設定で、年齢または国に制限を課しているページでは、ユーザーがウェブサイトにアクセスしても、FacebookアカウントにログインしていなければFacebookチャットプラグインは表示されません。

キャッシュの動作

あいさつダイアログの状態はブラウザーにキャッシュされ、ブラウザーを閉じて再度開いたときにも持続します。常にプラグインのデフォルトとなるのは、ユーザーがプラグインを離れた時点での最後の状態であり、ブラウザーのキャッシュに基づいて決まります(Safari 12のブラウザーを除く)。

デフォルトでは、デスクトップでもモバイルでも、新しいプラグインリクエストごとにあいさつダイアログが表示されます。ユーザーが閉じるボタンをクリックしてダイアログを最小化することも、開発者独自の表示設定によりリクエストデフォルトをオーバーライドすることもできます。

メッセージのソースの検出

ユーザーがFacebookチャットプラグインを使用して事業者とやり取りしているかどうかを判別しなければならない場合があります。これを可能にするために、Messengerプラットフォームは、プラグインから送信されるすべてのメッセージのメッセージペイロード内に"source": "customer_chat_plugin"プロパティを含めます。

メッセージWebhookイベントの例

{
    "object": "page",
    "entry": [
        {
            "id": "<PAGE_ID>",
            "time": 1559598624359,
            "messaging": [
                {
                    "sender": {
                        "id": "<USER_PSID>"
                    },
                    "recipient": {
                        "id": "<PAGE_ID>"
                    },
                    "timestamp": 1559598623749,
                    "message": {
                        "tags": {
                            "source": "customer_chat_plugin"
                        },
                        "mid": "nhEqs_THGoYyAhpK93uNCrIfLZD...",
                        "text": "hello, from customer chat!"
                    }
                }
            ]
        }
    ]
}

WordPressプラグイン

Facebookチャットプラグインを簡単にWordpressサイトに統合できるように、公式のMessengerカスタマーチャットWordpressプラグインをwordpress.orgで提供しています。

トラブルシューティングのヒント

プラグインが正しく表示されない場合は、次のヒントをお試しください。

  • 「***上位要素が次のコンテンツセキュリティポリシー指令に違反しているため、フレーム内の***表示が拒否されました」などのコンソールエラーが表示された場合は、プラグインが表示されているページのドメインがホワイトリストに登録されていることを確認してください。さらに、Referrer-Policyヘッダーをno-referrerに設定していないことも確認してください。
  • Firefox Facebook Container Add-Onがあると、プラグインが表示されません。プラグインを表示したい場合は、このアドオンを削除してください。
  • Firefoxデスクトップのプライベートブラウザー(バージョン63以降)とFirefoxモバイルブラウザーは、コンテンツトラッキングをデフォルトでブロックするため、プラグインが表示されません。プラグインを表示するには、コンテンツブロッキングをオフにしてください(検索バーのグレーのシールドをクリックする)。