ShopMessage's Inline Optin Plugins allow merchants to embed a Facebook Send-To-Messenger button or the Checkbox widget directly onto your page, banners or modals. You should use these plugins if you want to customize the placement, timing, or appearance of a growth plugin beyond ShopMessage's native overlays.

This guide covers how to embed a Messenger Checkbox Plugin or Send to Messenger Button into your site.

Send to Messenger Button

The Send to Messenger button allows websites visitors to opt in to receive messages from a page with a single click. You may want to embed

Live Example

You can find a live code example that demonstrates the Checkbox Plugin's capabilities here: https://bklyn-demo.myshopify.com/pages/send-to-messenger-demo

Step 1: Show the Plugin

To show a send-to-messenger plugin, first add markup to the page, then render it with Javascript. If the markup is included in the initial page load, then ShopMessage will try to render it automatically. Otherwise, you must render it manually.

You must first use the ShopMessage dashboard to create the plugin and get the unique plugin ID.

<!-- insert this markup somewhere on the page -->
<div id="myCustomButton" data-shopmsg-plugin="28798"></div>

// execute this code when your button markup is
// available in the DOM
var myCheckbox = document.getElementById('myCustomButton');
_shopmsg('plugin.render', myCheckbox);

Step 2 (Optional): Show a Modal Conditionally

You can use the ShopMessage SDK to determine if a visitor is logged in to Facebook. You can also use the SDK to determine if they have already opted-in or not.

You can optionally build logic that offers a Messenger optin only to customers who are logged into Facebook in their browser and have not already opted in previously. For all other cases, you can fall back to collecting some other contact method like email.

function onLoggedIn() {
  _shopmsg('visitor.optinStatus', function ifOptedIn(hasOptin) {
    if (hasOptin) {
      console.log('visitor already opted in, but showing modal anyways');
    }
    showModal();
  });
}
_shopmsg('facebook.loginStatus', onLoggedIn);

You can learn more about these functions in the ShopMessage JavaScript SDK documentation.

Step 3: Wait for Optin Click

Subscribe to the SendToMessengerClicked event to know when the user has opted in.

In this example, you may want to dismiss an optin modal after the user clicks the Send to Messenger button.

function onClickedButton(data) {
  if (28798 == data.widget_id) {
    // if the visitor clicks the button
    // then dismiss the modal
    vex.closeAll();
  }
}
_shopmsg('addEventListener', 'SendToMessengerClicked', onClickedButton);

Checkbox Plugin

The checkbox plugin allows you to display a checkbox in forms on your website that allows users to opt-in to receive messages from your bot in Messenger. If the person is currently logged in to Facebook, their profile photo and name will be displayed next to the checkbox.

Live Example

You can find a live code example that demonstrates the Checkbox Plugin's capabilities here: https://bklyn-demo.myshopify.com/pages/checkbox-demo

Step 1: Rendering the Checkbox

First, insert the markup on your page. The plugin ID is the value provided by ShopMessage in the merchant tools when you create the plugin.

<div id="myCustomPlugin" data-shopmsg-plugin="{replace-with-your-plugin-id}"></div>

<!-- for example, if the id=535 -->
<div id="myCustomPlugin" data-shopmsg-plugin="535"></div>

If the markup is on the page before the ShopMessage JS has loaded and initialized, then it will render automatically. In some cases though, the markup won't be in the DOM until much later (e.g. in a Popup Modal that appears after the user performs some action). In these cases, you'll need to find the element and render it explicitly.

var plugin = document.getElementById('myCustomPlugin');
_shopmsg('plugin.render', plugin);

Note that the Checkbox Plugin will only show if the user is logged into Facebook in the browser.

Step 2: (Optional) Subscribe to Events

You can optionally listen to events when your widget is shown, checked, or unchecked.

Event names:

  • ShowPlugin : Called when a Checkbox Plugin is shown on the page. NOTE: the plugin by default is only shown if the user is logged in to Facebook in the browser session.
  • FBCheckboxChecked : Called when the checkbox becomes checked.
  • FBCheckboxUnchecked: Called when the checkbox becomes unchecked.

As an example, you can get an event when the Checkbox Plugin is shown.

_shopmsg('addEventListener', 'ShowPlugin', function(data){
   console.log('Checkbox plugin is shown.');
});

Step 3: Confirming the Optin

If you are using an inline checkbox, a visitor must check the box and confirm the optin with a separate button click. 

<button onclick="_shopmsg('confirmOptin', 535)">Confirm Optin</button>

Note, Facebook's Platform Policy requires that the button must be in close proximity to the checkbox and you must not confirm the opt-in until the visitor clicks or take some other explicit, affirmative action.

Tips and Tricks

You can use the ShopMessage Chrome Extension to verify your integration.

Did this answer your question?