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.

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