Send To Messenger Demo

Force Show Modal

(modal will show automatically if you are logged into Facebook)

Step 1: Render 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.

<!-- insert this markup somehwere 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.

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);

Step 3: Wait for Optin Click

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