Messenger Platform

Web Plugins Reference

The Messenger Platform provides a convenient set of web plugins that make it easy for you to start a conversation with people who visit you on the web. All plugins are implemented with the Facebook SDK for Javascript.

Customer Chat Plugin (beta)

The Messenger Platform's customer chat plugin allows you to integrate your Messenger bot 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.

For usage details, see Customer Chat Plugin.

Include Format

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

Attributes

Attribute Type Description

class

String

Value must be fb-customerchat.

page_id

String

Your page ID

ref

String

Optional. Custom string passed to your webhook in messaging_postbacks and messaging_referrals events.

theme_color

String

Optional. 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 hexidecimal 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_greeting

String

Optional. The greeting text that will be displayed if the user is currently logged in to Facebook. Maximum 80 characters.

logged_out_greeting

String

Optional. The greeting text that will be displayed if the user is currently not logged in to Facebook. Maximum 80 characters.

greeting_dialog_display

String

Optional. Sets how the greeting dialog will be displayed. The following values are supported:


  • show: The greeting dialog will always be shown when the plugin loads.
  • fade: The greeting dialog of the plugin will be shown, then fade away and stay hidden afterwards.
  • hide: The greeting dialog of the plugin will always be hidden until a user clicks on the plugin.

Defaults to show on desktop and hide on mobile.

greeting_dialog_delay

String

Optional. 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

Boolean

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 minimized attribute.

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".

Message Us Plugin

Bring a person directly into a conversation on Messenger.

For usage details, see Message Us Plugin.

Include Format

<div class="fb-messengermessageus" 
  messenger_app_id="{APP_ID}" 
  page_id="{PAGE_ID}"
  color="{blue | white}"
  ref="{PASS_THROUGH_PARAM}" 
  size="{standard | large | xlarge}">
  
</div>

Attributes

Attribute HTML5 attribute Type Description

class

String

Value must be fb-messengermessageus.

page_id

String

Your page ID

messenger_app_id

Number

Your Facebook App ID.

color

data-color

String

The button color: blue or white.


Defaults to blue.

size

data-size

String

The button size: standard, large or xlarge.


Defaults to large.

ref

String

Optional. Custom string passed to your webhook in messaging_postbacks and messaging_referrals events.

Send to Messenger Plugin

Send a message to a person from your Messenger bot in the background and opt them in.

For usage details, see Send to Messenger Plugin.

Include Format

<div class="fb-send-to-messenger" 
  messenger_app_id="{APP_ID};" 
  page_id="{PAGE_ID}" 
  ref="{PASS_THROUGH_PARAM}" 
  color="{blue | white}" 
  size="{standard | large | xlarge}">
  
</div>

Attributes

Attribute Type Description

class

String

Value must be fb-send-to-messenger.

page_id

String

Your page ID

messenger_app_id

Number

Your Facebook App ID.

color

String

Optional. Color of the button: blue or white.


Defaults to blue.

size

String

Optional. Size of the button: standard, large or xlarge.


Defaults to large.

ref

String

Optional. Custom state parameter. Max 250 characters.


Valid characters are a-z A-Z 0-9 +/=-._


It should be encoded and encrypted for security purposes.

enforce_login

Boolean

Optional. If true, logged-in users must login again when clicking the button. Defaults to false.

Use the ref param to pass state with the authentication. If you surface the plugin in multiple places, you may want to modify the state based on the place where the plugin is shown.

Checkbox Plugin

The checkbox plugin subscribes a person to your Messenger bot as part of a form, such as checkout or sign-up.

For usage details, see Checkbox Plugin.

Include Format

<div class="fb-messenger-checkbox"  
  page_id="{PAGE_ID}"
  messenger_app_id="{APP_ID}"
  user_ref="{UNIQUE_REF_PARAM}"
  allow_login="{true}"
  size="{small | medium | large | standard | xlarge}"
  skin="{light | dark}"
  center_align="{true|false}">
  
</div>

Attributes

Attribute Type Description

class

String

Value must be fb-messenger-checkbox

page_id

Number

Facebook Page ID associated with your bot.

messenger_app_id

Number

Your Facebook App ID.

user_ref

String

Unique parameter for referencing a user. Max 250 characters.


Valid characters are a-z A-Z 0-9 +/=-._

allow_login

Boolean

Optional. Enables people to login if no existing session is present. Defaults to true.

size

String

Optional. Size of plugin: small, medium, large, standard, xlarge.


Defaults to large.

skin

String

Optional. Sets the color theme for the plugin content. The following options are supported:

  • light: Plugin renders with dark text.
  • dark: Plugin renders with white text, transparent messenger icon and white lightning bolt.

Defaults to light.

center_align

Boolean

Optional. Sets whether the plugin content should be center aligned.


Defaults to false.