Customer Chat Plugin (beta)

The Messenger Platform's customer 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 customer 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 customer 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

The customer chat plugin is supported for desktop and mobile with the following exception where it is not supported:
  • Messenger in-app browsers

Message Type & Template Support

Currently, the customer chat plugin supports the follow message types and structured message templates:
FeatureSupported
Text MessageYes
Video/Image/Audio/GIFYes
Generic/Button TemplateYes (Supported for limited button types)
Postback
URL Button
Call Button
Buy Button
Share Button
Log In Button
Log Out Button
Game Play Button
List/Media/Open Graph TemplateNo
Quick RepliesYes (Supported for limited quick reply types)
Text Quick Reply
User Phone Number Quick Reply
User Email Quick Reply
Location Quick Reply
Persistent MenuYes
Sender ActionsYes

Including the SDK

To use the customer chat plugin, you must include the Facebook JavaScript SDK in the page where the plugin will be rendered.
For instructions on including the SDK, see Facebook JavaScript SDK Quickstart.

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.

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 customer chat plugin on your webpage, you can either use the setup tool or setup using developer steps.

Option 1: Using the Setup Tool

For Page Admins, the Messenger Platform also provides an easy setup tool for customizing your customer chat plugin. To use the setup tool, do the following:
  1. Go to Page Settings > Messenger Platform
  2. In the 'Customer Chat Plugin' section, click the 'Set Up' Button.
The setup tool provides a simple UI for customizing the greeting message, theme color, displayed response time, and setting the whitelisted domains for the plugin.
On completion, the setup tool automatically generates the code snippets that you can copy/paste to include the customer chat plugin in your webpage.

Option 2: Setup Using Developer Steps

To include the customer 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 Messenger Platform 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 be hidden on 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 customer chat plugin from the bottom-right corner of your page.
    For a complete list of attributes, see the Customer 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 to your webhook when the user clicks the get started button.
    If the ref attribute is set in the include for the customer chat plugin, it will be included in the postback event.

  4. Optional. Handle the messaging_referrals event for existing conversations

    For existing conversations, if the ref attribute is set in the include for the customer 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.

Customizing the Plugin

The customer chat plugin supports the following customizations. All customizations are set as an attribute when the plugin is included on your webpage:
AttributeDescription
theme_colorOptional. The color to use as a theme for the plugin, including the background color of the customer chat plugin icon and the background color of any messages sent by users. Supports any hexadecimal color code with a leading number sign (e.g. #0084FF), except white. We highly recommend you choose a color that has a high contrast to white.
logged_in_greetingOptional. The greeting text that will be displayed if the user is currently logged in to Facebook. Maximum 80 characters.
logged_out_greetingOptional. The greeting text that will be displayed if the user is currently not logged in to Facebook. Maximum 80 characters.
greeting_dialog_displayOptional. Sets how the greeting dialog will be displayed. The following values are supported:

  • show: The greeting dialog is shown and remains open on desktop and mobile after the number of seconds set by the greeting_dialog_delayattribute.
  • hide: The greeting dialog is hidden until a user clicks on the plugin on desktop and mobile.
  • fade: The greeting dialog is shown briefly after the number of seconds set by the greeting_dialog_delay attribute, then fades away and is hidden on desktop. The dialog is hidden on mobile.
The plugin setting defaults to show on desktop and hide on mobile.
greeting_dialog_delayOptional. Sets the number of seconds of delay before the greeting dialog is shown after the plugin is loaded. This can be used to customize when you want the greeting dialog to appear.
minimized

Deprecation Notice

This attribute is now deprecated. Please use greeting_dialog_display to customize your plugin instead. The greeting_dialog_delay attribute will take precedence of the minimizedattribute.
Optional.
  • true When set to true, it will have the same effect of setting greeting_dialog_delay = "fade".
  • false When set to false, it will have the same effect of setting greeting_dialog_delay = "show".
refOptional. You may pass an optional ref parameter if you wish to include additional context to be passed back in the webhook event. This can be used for many purposes, such as tracking which page the user started the conversation on, directing the user to specific content or features available within the bot, or tying a Messenger user to a session or account on the website.

Disabling the Persistent Menu

There may be cases where it is preferable to disable the persistent menu for your bot in the customer chat plugin. To do this, add "disabled_surfaces": ["CUSTOMER_CHAT_PLUGIN"] when you set your persistent menu:
{
  "persistent_menu":[
    {
      "locale":"default",
      "disabled_surfaces": ["CUSTOMER_CHAT_PLUGIN"],
      "composer_input_disabled": false,      
      "call_to_actions":[
        {
          "title":"My Account",
          "type":"postback",
          "payload":"PAYBILL_PAYLOAD"
        }
      ]
    }
  ]
}

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.

Pages Using Age/Country Restrictions

If your Page has age or country restrictions set in Page settings, the customer chat plugin will not render for users who are not logged into their Facebook account when they visit your website.

Caching Behavior

By default, the greeting dialog will be shown on desktop and minimized on mobile. Users can also click to show or to minimize the dialog. This state is cached on the browser and persists even when the browser is closed and reopened.

Detecting Message Origin

At times, it may be necessary to determine whether a user is engaging with your business using the customer chat plugin. To enable this, the Messenger Platform will include a "source": "customer_chat_plugin" property for all postback events and in the tags array of the message payload for all messages sent from the plugin:
"message": {
  "mid":"mid.14577641449818:41d102a3e1ae206a38",
  "text":"hello, from customer chat!",
  "tags": [
    {
      "source": "customer_chat_plugin"
    }
  ]
}

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.

Comments

  1. UnknownMay 29, 2019 at 12:45 PM

    where I put the script to do the Detecting Message Origin?

    "message": {
    "mid":"mid.14577641449818:41d102a3e1ae206a38",
    "text":"hello, from customer chat!",
    "tags": [
    {
    "source": "customer_chat_plugin"
    }
    ]
    }

    ReplyDelete

Post a Comment

Popular posts from this blog

How to Add Categories and Tags for WordPress Pages

Image
https://www.wpbeginner.com/plugins/how-to-add-categories-and-tags-for-wordpress-pages/ Categories and tags help you sort your content and make it easier for users to find what they are looking for. When creating a WordPress post both categories and tags can come in very handy for organizing your content. In past we have covered how to use  Categories vs Tags . By default both categories and tags are only limited to posts, so when you create a new page in WordPress, you will notice that there is no option to add categories or tags to your WordPress page. Recently one of our readers asked us if there was a way to have categories and tags work with both post and pages. Like we always say, there’s a plugin for that. In this article we will show you how to add post tags and categories for WordPress pages. Video Tutorial Subscribe to WPBeginner If you don’t like the video or need more instructions, then continue reading. First thing you need to do is install and a...
Read more

GALLERY AND ALBUM MANAGEMENT

Image
- Add new album with name and description and album cover - Edit album name and details also album cover - Dynamic album and galley auto crop thumb images - in gallery upload multiple images with auto generate unique image name - In gallery change images or delete images - Album wise gallery management - Easy page number wise navigation buttons Download full source code ========================================================= https://www.dropbox.com/s/2hp4uqbqa64... fix bugs ================================================ go to & try it https://drive.google.com/file/d/0B0aa...
Read more