Chat Plugin

The Chat Plugin allows you to integrate your Messenger experience directly into your website. This allows your customers to interact with your business anytime with the same personalized, rich-media experience they get in Messenger.

The Chat Plugin automatically loads recent chat history between the person and your business, meaning recent interactions with your business on messenger.com, in the Messenger app, or in the Chat Plugin on your website will be visible. This helps create a single experience for your customers, and enables you to continue the conversation even after they have left your webpage. No need to capture their information to follow up, just use the same conversation in Messenger.

Contents

• Feature Support
  • Browser Support
  • Message Type & Template Support
• Including the SDK
  • Localization & Internationalization
• Setting Up the Plugin
• Customizing the Plugin
  • Using the Setup Tool
  • Disabling the Persistent Menu
• User Login
• Caching Behavior
• Detecting Message Origin
• Wordpress Plugin
• Troubleshooting Tips

Feature Support

Browser Support

The Chat Plugin supports modern popular desktop and mobile browsers except Messenger in-app browsers and Internet Explorer.

Message Type & Template Support

Currently, the Chat Plugin supports the follow message types and structured message templates:

Including the SDK

To use the Chat Plugin, you must include a version of the Facebook JavaScript SDK that contains the Customer Chat SDK in the page where the plugin will be rendered.

For instructions on including the SDK, see Customer Chat SDK.

Localization & Internationalization

To take advantage of internationalization, including automatic language translation, you need to change the locale of the SDK to match the locale of your site. Specifically, you need to change en_US to a supported locale code when initiating the SDK.

For more information, see Localization with Social Plugins and JavaScript SDK.

Dynamic Controls of the Plugin

We also provide APIs that allow you to dynamically control certain behaviors of the plugin such as opening and closing the dialog.

For more information, see Customer Chat SDK.

Setting Up the Plugin

To include the Chat Plugin on your webpage, you can either use the setup tool or setup using developer steps.

Option 1: Using the Setup Tool [Recommended]

For Page Admins, the Page settings also provides an easy setup tool for customizing your Chat Plugin. To use the setup tool, do the following:

1. Go to Page Settings > Messaging
2. In the 'Add Messenger to your website' section, click the 'Get Started' Button.

The setup tool provides a simple UI to customize various attributes of the Chat Plugin.

On completion, the setup tool automatically generates the code snippets that you can copy/paste to include the Chat Plugin in your webpage. If you need help pasting the code, you can find installation instructions for how to install on top website builders here.

Option 2: Setup Using Developer Steps

To include the Chat Plugin on your webpage, do the following:

1. Whitelist the domain of your website

   For security reasons, the plugin will only render when loaded on a domain that you have whitelisted. Refer to whitelisted_domains reference to learn how to whitelist your domain programmatically.

   Domain Name and HTTPS Required

   Domains must meet the following requirements to be whitelisted:

   • Served over HTTPS

   • Use a fully qualified domain name, such as https://www.messenger.com/. IP addresses and localhost are not supported for whitelisting.

   Businesses whose Messenger experience is provided by a service provider, will not have access to the page token generator in app settings because they do not own the Facebook app. In this case, you may add or remove whitelisted domains via Page settings. To whitelist a domain, do the following:

   

   1. Click Settings at the top of your Page
   2. Click Advance Messaging on the left
   3. Edit whitelisted domains for your page in the Whitelisted Domains section

2. Include the plugin on your webpage

   To add the plugin to your webpage, include a div with the following attributes in your HTML:

   <div class="fb-customerchat"
    page_id="<PAGE_ID>">
   </div>

   By default, the greeting dialog will be shown on desktop and mobile. To customize the greeting dialog behavior, you can use the greeting_dialog_display and 'greeting_dialog_delay' attributes.

   Recommended Positioning

   We highly suggest not changing the default position of the Chat Plugin from the bottom-right corner of your page.

   For a complete list of attributes, see the Chat Plugin reference.

3. Optional. Handle the messaging_postbacks event for new conversations

   If a new conversation is started via the plugin, and your bot has set up the get started button, we will send a messaging_postbacks webhook event when the user clicks the "Continue as [NAME]" or "Continue as Guest" button.

   If you are sending any automated welcome message when receiving the messaging_postbacks webhook event, you will need to make some adjustment to send the message using user_ref field instead of PSID.

   If the ref attribute is set in the include for the Chat Plugin, it will be included in the postback event.

   Breaking Change (May 5, 2020)

   Graph API v7.0+ messaging_postback webhook event from the chat plugin will not be returning sender.id field. It will return a new sender.user_ref field. This changes will take effect on all older Graph API versions starting Nov 2, 2020.

   New Messaging Postback Webhook Event (Graph API v7.0+ and all Graph API versions starting Nov 2, 2020)

   {
     "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",
       }
     }
   }    

   Old Messaging Postback Webhook Event (Graph API <= v6.0 - Available until Nov 2, 2020)

   {
     "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",
       }
     }
   }    

   With the new messaging_postback webhook format, you will leverage USER_REF to send messages. The following behavior applies for USER_REF:

   • User Profile API will not work on USER_REF.
   • You will get PSID when the user replies and can then used it for future Graph API calls.
   • Webhooks that contains PSID (echo, delivery, read receipt, etc) will not be delivered for USER_REF based messages.

   Send API with USER_REF

   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/v10.0/me/messages?access_token=<PAGE_ACCESS_TOKEN>"
   

4. Optional. Handle the messaging_referrals event for existing conversations

   For existing conversations, if the ref attribute is set in the include for the Chat Plugin, a messaging_referrals webhook event will be sent to your webhook when the conversation is continued via the plugin.

   The ref can be any string and can be used for a variety of purposes. For example, you could use it to keep track of which customers have engaged with your business via the plugin.

   Breaking Change (May 5, 2020)

   Graph API v7.0+ messaging_referrals webhook event from the chat plugin will not be returning sender.id field. It will return a new sender.user_ref field. This changes will take effect on all older Graph API versions starting Nov 2, 2020.

   New Referral Webhook Event (Graph API v7.0+ and all Graph API versions starting Nov 2, 2020)

   {
       "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>"
                       }
                   }
               ]
           }
       ]
   }
   

   Old Referral Webhook Event (Graph API <= v6.0 - Available until Nov 2, 2020)

   {
       "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>"
                       }
                   }
               ]
           }
       ]
   }
   

   With the new messaging_referrals webhook format, you will leverage USER_REF to send messages. USER_REF will not work on User Profile API. You will get the PSID when the user replies and can then use it on Send API and User Profile API.

   Send API with USER_REF

   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/v10.0/me/messages?access_token=<PAGE_ACCESS_TOKEN>"
   

Customizing the Plugin

The Chat Plugin supports the following customizations. There are several ways for developers to apply customization.

Page settings setup tool

Most of the customizations (theme color, greeting, locale, guest mode, alignment and automatically expand) can be set directly via the plugin setup tool (FB page settings --> Messaging --> Add Messenger to your website --> Get Started).

The following customizations are currently supported:

• Greeting message
• Language/locale
• Guest mode feature
• Theme color
• Positioning (left, right, bottom spacing)
• Auto hide/expand during load

Via an attribute when the plugin is included on your webpage.

We recommend that developers only use this method for customizations that are not available via Page settings setup tool.

Disabling the Persistent Menu

There may be cases where it is preferable to disable the persistent menu for your bot in the Chat Plugin. To do this, add "disabled_surfaces": ["CUSTOMER_CHAT_PLUGIN"] when you set your persistent menu:

Example Messenger Profile API Payload

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

Guest Mode

Starting on August 4, 2020, people can start chatting with businesses via the Chat Plugin in guest mode without logging into their Facebook account. This allows businesses to seamlessly connect with more customers, regardless of their browser, device, or Facebook login status. These “guest users” are temporary accounts that can receive messages when the user is on your website. “Guest chats” will end when the user decides to end the chat from the More menu, or 24 hours from the start of the conversation, whichever comes first. The guest name will appear as “Guest” followed by a short numeric string.

If the business tries to send a message to this guest user when the guest accounts have been terminated, they will see an error message, “This Person Cannot Receive Messages: This person isn't receiving messages from you right now.” The transcript of these “guest chats” will remain on the guest user's browser for up to 24 hours. Businesses, however, will retain a copy of the conversation in their inbox even after the chat expires until they delete it.

The following changes in Plugin implementation will take effect as a result of this update:

• Messaging Referrals webhook: messaging_referrals webhook will include an is_guest_user=true flag to indicate a guest user. We recommend that developers read this webhook and give businesses the option to treat guest users different from logged in users in designing their conversation flow.
• Termination webhook: when a guest user chooses to end the conversation, we will send a webhook notification to let the business know that the guest is no longer available. Future messages to that GuestID will fail and the error message #100 No matching user found will be sent. We recommend that developers read this webhook, notify the live agent and stop the conversation flow when a guest conversation is terminated.

Messaging Referrals Webhook

messaging_referrals webhook from guest users now include the is_guest_user=true flag, indicating this is a webhook from a guest user. Developer can refer to Handle the messaging_referrals event for existing conversations section for instructions on how to setup referral webhooks.

{
  "sender":{
    "id":"<GUEST_ID>"
  },
  "recipient":{
    "id":"<PAGE_ID>>"
  },
  "timestamp":1458692752478,
  "referral": {
     "ref": "<REF_DATA_PASSED_IN_CODE>",
     "source": "CUSTOMER_CHAT_PLUGIN",
     "type": "OPEN_THREAD",
     "referer_uri": "<WEBSITE_URL>",
     "is_guest_user": "true"
  }
}

Termination Webhook

When a guest user ends the conversation on the Chat Plugin, we will send a webhook to let developers know that the GUEST_ID is no longer valid and will no longer be receiving messages. Developers should make sure their environment prevents future messages to this conversation.

{
  "sender":{
    "id":"<GUEST_ID>"
  },
  "recipient":{
    "id":"<PAGE_ID>"
  },
  "timestamp":1458692752478,
  "referral": {
     "ref": "<REF_DATA_PASSED_IN_CODE>",
     "source": "CUSTOMER_CHAT_PLUGIN",
     "type": "END_CHAT",
     "referer_uri": "<WEBSITE_URL>"
     "is_guest_user": "true" #this is optional
  }
}

User Profile API

Locale, gender and timezone information aren't available for guest users.

curl -X GET "https://graph.facebook.com/v7.0/<GUEST_ID>?fields=first_name,last_name,profile_pic,is_guest_user"
  
{
    "first_name": "Guest",
    "last_name": "1234",
    "profile_pic": "https://example.com/profile.jpg",
    "is_guest_user": "true"
}

Conversation API

Conversation API user_id parameter will also accept GUEST_ID to allow developers to get the thread history of a guest user.

curl -i -X GET \
 "https://graph.facebook.com/v7.0/me/conversations?user_id=<PSID/GUEST_ID>"

Send API

Send API id parameter will also accept GUEST_ID to allow developers to send messages to guest user.

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

Issues With Guest Users

Businesses experiencing issues with guest users have the following control:

• Turn guest mode on/off from Page Settings → Messaging → Add Messenger to your website → Get Started → Toggle Guest Mode off
• Block a guest-user on Facebook’s Page Inbox
• Report a repeat guest-user offender by submitting this form

Guest Mode Upgrade

Guest users will have the option to log in to Messenger to continue their chat with businesses. We call this the "upgrade" moment for the guest user.

A guest user can be prompted to log in to Facebook under three circumstances:

• When the business sets their status as “Away” in Page Inbox: this allows the user to get a response from the business in their Messenger when the business is back
• When the business and the user have had three back-and-forths: this signals the user is engaging with the business and is likely to want to remain in contact with the business.
• When the user tries to send the business an attachment: sending attachments isn’t allowed for guest users at the moment, users will have to log in to send the attachment.

Pages that are not linked to any developer app will have guest upgrade feature available by default. Pages that are linked to a developer app will have the option to turn on guest upgrade via app dashboard under Messenger -> Settings -> Chat Plugin -> Guest Upgrade toggle. There are a couple of changes in the webhooks and API in order to support the "upgrade" moment.

Guest Upgrade Webhook

When a guest user upgrades, a new webhook with GUEST_UPGRADE type will be sent to allow developers to know that the guest user has upgraded and the associated PSID of the logged in user. Subsequent message webhooks after the guest user has upgraded will only contain PSID.

{
  "sender":{
    "id": "<GUEST_ID>"
  },
  "recipient":{
    "id": "<PAGE_ID>"
  },
  "timestamp": 1458692752478,
  "referral": {
     "ref": "<LOGGED_IN_USER_PSID>",
     "source": "CUSTOMER_CHAT_PLUGIN",
     "type": "GUEST_UPGRADE",
     "referer_uri": "<WEBSITE_URL>"
  }
}  

User Profile API

When a guest user upgrades, querying User Profile API with GUEST_ID will return an additional psid field to allow developers to associate/link GUEST_ID with PSID. The psid field will return a PSID_EDGE with the name and PSID of the user by default.

curl -X GET "https://graph.facebook.com/v7.0/<GUEST_ID>?fields=first_name,last_name,profile_pic,psid"
  
{
    "first_name": "Guest",
    "last_name": "1234",
    "profile_pic": "https://example.com/profile.jpg",
    "psid": <PSID_EDGE>
}

<PSID_EDGE>
{
    "name": "John Doe",
    "id": "<PSID>"
}

Conversation API

With Conversation API now accepting GUEST_ID there will be 3 different scenarios depending on the state of the guest user.

Scenario 1 - Guest user has upgraded and Conversation API is called using PSID.

"data": [
    {
      "id": "<logged_in_user_thread_id>", 
      "link": "<link>",
      "updated_time": "<updated_time>"   
    }
 ]

Scenario 2 - Guest user has not upgraded and Conversation API is called using GUEST_ID

"data": [
    {
      "id": "<guest_user_thread_id>", 
      "link": "<link>",
      "updated_time": "<updated_time>"   
    }
 ]

Scenario 3 - Guest user has upgraded and Conversation API is called using GUEST_ID

"data": [
    {
      "id": "<guest_user_thread_id>", 
      "link": "<link>",
      "updated_time": "<updated_time>"   
    },
    {
      "id": "<logged_in_user_thread_id>", 
      "link": "<link>",
      "updated_time": "<updated_time>"   
    }
 ]

User Login

If the user is already logged in to their Facebook account, they will be able to start chatting with your bot right away. If they are not logged in, a default welcome message will be display, and they will be prompted to log in or create a new Facebook account.

Caching Behavior

The greeting dialog state is cached on the browser and persists even when the browser is closed and reopened. The plugin will always default to the last state the user left the plugin based on the browser cache (with the exception of Safari 12+ and Firefox browsers).

By default for each new plugin request, the greeting dialog will be shown on desktop and mobile. Users may click the close button to minimize the dialog or you can override the request default with your own display preferences.

Detecting Message Origin

At times, it may be necessary to determine whether a user is engaging with your business using the Chat Plugin. To enable this, the Messenger Platform will include a "source": "customer_chat_plugin" property inside the message payload for all messages sent from the plugin

Example Messages Webhook Event

{
    "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 Plugin

To make it easier to integrate the Chat Plugin into Wordpress sites, we offer the official Facebook Chat Plugin on wordpress.org.

Troubleshooting Tips

If you're having trouble getting the plugin to render properly, try the tips below:

• If you see a console error like "Refused to display *** in a frame because an ancestor violates the following Content Security Policy directive: ***", check that the domain of the page the plugin is being rendered on has been whitelisted. Also make sure you didn't set the Referrer-Policy header to no-referrer.
• The Firefox Facebook Container Add-On prevents the plugin from showing up. Remove the add on if you want the plugin to render.
• Firefox desktop private browsers (version 63 and above) and Firefox mobile browsers block content tracking by default which will prevent the plugin from rendering. Turn off content blocking (click the gray shield in the search bar) to see the plugin render.