チャットプラグイン

このドキュメントでは、プログラムを使ってチャットプラグインをウェブサイト上のMessengerエクスペリエンスに追加する方法について説明します。

Meta Business Suiteを使用してチャットプラグインをウェブページに追加する場合(推奨)は、Metaビジネスヘルプセンターで詳しい情報をご覧ください。

処理の概要

JavaScript用Facebook SDKをウェブページにインストールすると、チャットプラグインがウェブページにレンダリングされます。デフォルトでは、デスクトップとモバイルにあいさつダイアログが表示され、閉じるボタンをクリックしてそのダイアログを最小化できます。プラグインのあいさつの言葉、外観(色など)やメッセージエクスペリエンス(メニューやクイック返信など)をカスタマイズできます。ダイアログの状態(最大化または最小化か)はキャッシュに入れられ、セッション間で引き継がれます。

ログイン

利用者がFacebookにログインすると、プラグインによって[[名前]として続行]ボタンと[ゲストとして続行]ボタンが表示されます。利用者がFacebookにログインしていないと、プラグインによって[Messengerにログインする]ボタンと[ゲストとして続行]ボタンが表示されます。

Webhook通知

ユーザーがプラグインをクリックしてビジネスとのチャットを開始するかチャットを継続すると、次の内容のWebhook通知がサーバーに送信されます。

• 利用者に関する情報(Page-scoped ID (PSID)またはUser-reference IDなど)
• チャットプラグインとしてのメッセージの送信元を特定する情報
• 通知に含まれるリファーラル情報

ようこそ画面がプラグインに実装されており、利用者が[スタート]ボタンをクリックしてビジネスとのスレッドを開始した場合、messaging_postbacks Wehbhook通知がサーバーに送信されます。その後ビジネスは、24時間の標準メッセージ時間枠内にユーザー参照IDを使ってメッセージを利用者に送信できます。

既存のスレッド

利用者とビジネスの間に既存のスレッドがある場合は、そのチャット履歴が自動的にプラグインに読み込まれます。利用者がそのスレッドを続行し、メッセージの送信、ボタンのクリック、スレッドに実装されているその他のアクションのいずれかを実行すると、messaging Webhook通知がサーバーに送信されます。リファーラル情報を含める場合は、messaging_referral Wehbhook通知が送信されます。その後ビジネスは、24時間の標準メッセージ時間枠内にPSIDを使用してメッセージをユーザーに送信できます。

チャットプラグインでサポートされるメッセージタイプ

プラグインでは次のものはサポートされていません。

開始する前に

以下の情報が必要です。

• pages_messagingアクセス許可
• FacebookページでMODERATEタスクを実行できる人からリクエストされたページアクセストークン
• messaging、messaging_postbacks、messaging_referrals Webhooksフィールドにサブスクリプション登録されてているFacebookページにリンクされたアプリ
• MessengerプロフィールAPI またはMeta Business Suiteを使って許可リストに追加されたウェブサイトのドメイン

チャットプラグインの使用に関連する行為には、Metaビジネスツール利用規約が適用されます。

制限

• ウェブサイトが有効になるか許可リストに追加されてからでなければ、プラグインを実装することはできません
• ビジネスのFacebookページがページ設定で年齢または国に制限を課している場合は、Facebookアカウントにログインしていなければウェブサイトにアクセスしてもチャットプラグインは表示されません。
• あいさつダイアログはSafari 12以降およびFirefoxブラウザーではキャッシュされません

チャットプラグインを追加する

ステップ1. SDKを追加する

JavaScript用Facebook SDKを、プラグインをレンダリングするウェブサイトの各ページに追加します。

<!-- Messenger Chat Plugin Code --> <div id="fb-root"></div> <div id="fb-customer-chat" class="fb-customerchat"></div> <script> var chatbox = document.getElementById('fb-customer-chat'); chatbox.setAttribute("page_id", "PAGE-ID"); chatbox.setAttribute("attribution", "biz_inbox"); </script> <script> window.fbAsyncInit = function() { FB.init({ xfbml : true, version : 'API-VERSION' }); }; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> 

ステップ2. プラグインをカスタマイズする

APIを使用する

/PAGE-ID/chat_pluginエンドポイントにPOSTリクエストを送信し、プラグインのあいさつ、色、アイコンなどをカスタマイズします。

リクエストの例

curl -i -X POST "https://graph.facebook.com/v21.0/PAGE-ID/chat_plugin
    ?welcome_screen_greeting:YOUR-WELCOME-TEXT
    &theme_color:553399
    &entry_point_icon:MESSENGER-ICON
    &entry_point_label:CHAT
    &access_token=PAGE-ACCESS-TOKEN"

プラグインのカスタマイズに使用するフィールドの詳細については、 チャットプラグインのリファレンスをご覧ください。

HTML属性を使用する

この方法は、ページ設定セットアップツールや前述のAPIでは対応できないカスタマイズに関してのみ利用することをおすすめします。

Webhooks通知

ビジネスにメッセージが送信されると、サーバーにWebhook通知が届きます。

既存のスレッド

ビジネスとの既存のスレッドにメッセージが送信されると、messaging Webhook通知が届きます。通知には、送信者のPage-scoped IDと、customer_chat_pluginに設定されたtags オブジェクトのsourceパラメーターが含まれます。

メッセージ通知

{
    "object": "page",
    "entry": [
        {
            "id": "PAGE-ID",
            "time": 1559598624359,
            "messaging": [
                {
                    "sender": {
                        "id": "PSID"
                    },
                    "recipient": {
                        "id": "PAGE-ID"
                    },
                    "timestamp": 1559598623749,
                    "message": {
                        "tags": {
                            "source": "customer_chat_plugin"
                        },
                        "mid": "nhEqs_THGoYyAhpK93uNCrIfLZD...",
                        "text": "hello, from customer chat!"
                    }
                }
            ]
        }
    ]
}

メッセージリファーラル通知

チャットプラグインのref属性が設定されている場合、サーバーにmessaging_referrals Webhook通知が届きます。

{
    "object": "page",
    "entry": [
        {
            "id": "PAGE-ID",
            "time": 1559598385735,
            "messaging": [
                {
                    "recipient": {
                        "id": "PAGE-ID"
                    },
                    "timestamp": 1559598385735,
                    "sender": {
                        "user_ref":"USER-REFERENCE-ID"
                    },
                    "referral": {
                        "ref": "REF-PARAMETER-INFORMATION",
                        "source": "CUSTOMER_CHAT_PLUGIN",
                        "type": "OPEN_THREAD",
                        "referer_uri": "REFERRAL-URI"
                    }
                }
            ]
        }
    ]
}

新しいスレッド

プラグインの[ようこそ]画面の[スタート]ボタンをクリックしてスレッドが始まると、messaging_postbacks Webhook通知が届きます。

メッセージポストバック通知

{
    "object": "page",
    "entry": [
        {
            "id": "PAGE-ID",
            "time": 1559598624359,
            "messaging": [
                {
                    "sender": {
                        "user_ref": "USER-REFERENCE-ID"
                    },
                    "recipient": {
                        "id": "PAGE-ID"
                    },
                    "timestamp": 1559598623749,
                    "postback":{
                        "title": "TITLE-FOR-THE-CTA",  
                        "payload": "PAYLOAD-DEFINED-BY-CTA",
                        "referral": {
                            "ref": "ADDITIONAL-INFORMATION",
                            "source": "CUSTOMER_CHAT_PLUGIN",
                            "type": "OPEN_THREAD",
                    }
                }
            ]
        }
    ]
}

マーケティングメッセージのオプトインリクエスト

マーケティングメッセージのオプトインリクエストの作成方法については、マーケティングメッセージガイドをご覧ください。

制限

チャットプラグインのマーケティングメッセージでサポートされているのは、アップデートとプロモーションのトピックだけです。

メッセージオプション通知

ビジネスからのマーケティングメッセージを受け取ることを利用者がオプトインすると、そのビジネスのサーバーにmessaging_optins Webhook通知が届きます。

"object": "page",
    "entry": [
        {
            "id": "PAGE-ID",
            "time": TIMESTAMP,
            "messaging": [
                {
                    "recipient": {
                        "id": "PAGE-ID"
                    },
                    "timestamp": TIMESTAMP,
                    "optin": {
                        "type": "notification_messages",
                        "payload": "empty_payload",
                        "notification_messages_token": "NOTIFICATION-MESSAGE-TOKEN",
                        "notification_messages_frequency": "MESSAGE-FREQUENCY",
                        "topic": "NOTIFICATION-MESSAGE-TOPIC",
                        "token_expiry_timestamp": EXPIRATION-DATE-TIMESTAMP,
                        "ref": "ADDITIONAL-INFORMATION",
                        "user_token_status": "NOT_REFRESHED",
                        "notification_messages_status": "RESUME_NOTIFICATIONS"
                    }
                }
            ]
        }
    ]
}

notification_messages_tokenの値をrecipientオブジェクト内のID値に設定して、マーケティングメッセージを利用者に送信できます。

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

• 表示が拒否されました...

  • ドメインがホワイトリストに登録されていることを確認します。
  • 参照元URLが送信されるようにReferrer-Policyヘッダーが設定されていることを確認します。

• Firefoxにチャットプラグインが表示されません

  • Firefox Facebook Container Add-Onを削除します。
  • プラグインを表示するには、コンテンツブロッキングをオフにしてください(検索バーのグレーのシールドをクリックする)。

次のステップ

• 返信する
• マーケティングメッセージを送信する

参考情報

• 固定メニューを無効にする
• JavaScript用Facebook SDK
• ゲストモード - Facebookにログインしていないユーザーがスレッドを開始できるようにします。
• Ice Breakers - ユーザーがよくある質問のリストを使ってビジネスとスレッドを開始できるようにします。
• 固定メニュー - ユーザーがスレッドのどこからでも機能を見つけ、より簡単にアクセスできるようにします。