Checkbox Demo

Show Modal

Step 1: Render the checkbox

To show the checkbox, you need to add markup to your page and render the widget with javascript.

<!-- insert this markup on your page. the pluginId is unique to your site -->
<div id="myCustomCheckbox" data-shopmsg-plugin="28796"></div>

/*
 * if the markup is present on the initial page load, then ShopMessage will
 * render it automatically. otherwise, you need to find the element and render
 * the plugin manually.
 */
var myCheckbox = document.getElementById('myCustomCheckbox');
_shopmsg('plugin.render', myCheckbox);

Step 2 (optional): Subscribe to events

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

const CHECKBOX_PLUGIN_ID = 28796;

function onPluginShown(data) {
  if (CHECKBOX_PLUGIN_ID == data.widget_id) {
    let $submitButton = $('.vex-dialog-form button.vex-dialog-button[type=submit]');
    $submitButton
      .removeClass('vex-dialog-button-primary')
      .addClass('vex-dialog-button-secondary')
      .attr('disabled', true)
      .html('Check Messenger Box');
  }
}

function onCheckboxChecked(data) {
  if (CHECKBOX_PLUGIN_ID == data.widget_id) {
    let $submitButton = $('.vex-dialog-form button.vex-dialog-button[type=submit]');
    $submitButton
      .removeClass('vex-dialog-button-secondary')
      .addClass('vex-dialog-button-primary')
      .removeAttr('disabled')
      .html('Subscribe');
  }
}

_shopmsg('addEventListener', 'ShowPlugin', onPluginShown);
_shopmsg('addEventListener', 'FBCheckboxChecked', onCheckboxChecked);
_shopmsg('addEventListener', 'FBCheckboxUnchecked', onPluginShown);

Step 3: Confirm optin

When the user clicks, confirm that the user has opted in against your checkbox. If the checkbox is "unchecked", then confirming will do nothing. You can optionally set other visitor properties

function formSubmitted(formData) {
  if (!formData) {
    console.log('Cancelled')
  } else {
    console.log(`captured email = ${formData.email}`);
    _shopmsg('confirmOptin', CHECKBOX_PLUGIN_ID);
    _shopmsg('visitor.set', data);
  }
}