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 for Javascript SDK.

Contents

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>"
 ref="<OPTIONAL_WEBHOOK_PARAM>"
 theme_color="<HEX_COLOR_CODE>"
 logged_in_greeting="<GREETING_MESSAGE_FOR_LOGGED_IN_USERS>"
 logged_out_greeting="<GREETING_MESSAGE_FOR_LOGGED_OUT_USERS>">
</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.

minimized

String

Optional. Specifies whether the plugin should be minimized or shown. Defaults to false on desktop and true on mobile browsers.

theme_color

String

Optional. Specifies a hexidecimal color code to use as a theme for the plugin, including the customer chat icon and the background color of messages sent by users. All colors except white are supported. The color code has to start with a leading number sign, e.g. #0084FF.

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 not currently logged in to Facebook. Maximum 80 characters.

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>"
  size="<standard | large | xlarge>">
</div>

Attributes

Attribute HTML5 attribute Type Description

class

String

Value must be fb-messengermessageus.

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.

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

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.

data-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 data-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. Can be opt-in or opt-out.

For usage details, see Checkbox Plugin.

Include Format

<div class="fb-messenger-checkbox"  
  origin=<PAGE_DOMAIN>
  page_id=<PAGE_ID>
  messenger_app_id=<APP_ID>
  user_ref="<UNIQUE_REF_PARAM>"
  prechecked="<true | false>"
  allow_login="<true>"
  size="<small | medium | large | standard | xlarge>">
</div>

Attributes

Attribute Type Description

class

String

Value must be fb-messenger-checkbox

origin

String

Base domain of the URL where the plugin is loaded.

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 +/=-.:_

prechecked

Boolean

Optional. Specifies if the checkbox is checked by default. Defaults to true

allow_login

Boolean

Optional. Enables people to login if no existing session is present. Also enables the 'Not You' option. Defaults to true.

size

String

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


Defaults to large.