Facebook Messenger bot with checkbox plugin opt-in

Introduction

In this example, we are going to extend the functionality of the Simple Facebook Messenger bot you can find in a previous tutorial, by controlling events from the Facebook Messenger Checkbox Plugin in our flow.

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

Let’s imagine that we have in our store a checkout form as follows:

Once the checkout form is submitted and only if the messenger checkbox is checked, our Facebook Messenger Bot flow will be kicked off. This below is the new part that we are going to add to our flow:

Our bot will send a “Thank you!” message to the user on Facebook messenger and our flow will wait until it receives input from the user. When our bot receives a message from the user, we will simply tell him to call a telephone number.

Additionally, we will add the following URL button to the persistent menu on Facebook Messenger (we will configure it in our Facebook Messenger app):

When the user clicks on this button, the store will open.

Prerequisite

You will need first to add the checkbox plugin to your form in your website. You can find the official documentation here. For this example we are going to use:

<script>
  // Loading the Facebook JavaScript SDK
  window.fbAsyncInit = function() {
    FB.init({
      appId: '<APP_ID>',
      xfbml: true,
      version: 'v3.0'
    });
  };
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) { return; }
    js = d.createElement(s);
    js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

  // Send the opt-in to Facebook when the user submits the form
  function confirmOptIn() {
    FB.AppEvents.logEvent('MessengerCheckboxUserConfirmation', null, {
      'page_id': document.getElementById("optin").getAttribute("page_id"),
      'app_id': document.getElementById("optin").getAttribute("messenger_app_id"),
      'user_ref': document.getElementById("optin").getAttribute("user_ref")
    });
  }
</script>

<!-- Render the plugin -->
<div id="optin"
  class="fb-messenger-checkbox"
  origin="<PAGE_DOMAIN>"
  page_id="<PAGE_ID>"
  messenger_app_id="<APP_ID>"
  user_ref="<UNIQUE_REF_PARAM>">
</div>

<!-- Confirm opt-in -->
<button onclick="confirmOptIn()">Confirm Opt-in</button>

Steps to be covered

These are the steps that are going to be covered in this second part:

  1. Add URL button to the persistent menu
  2. Install all the needed webhooks
  3. Edit Facebook Messenger Bot flow
  4. Test the process

Add URL button to the persistent menu

The first thing that we need to do is to edit our Facebook Messenger app and add the URL button to the persistent menu.

If you don’t know how to configure an app, please refer to this link.

The configuration of this button should look as follows:

Install needed webhooks

We need to make sure that all needed webhooks of the Facebook Messenger app are correctly installed. To do this, we just need to go the fourth step of the app configuration wizard (Config Dynamic URL) and check that all webhooks are set up:

Edit Facebook Messenger Bot flow

As we mentioned in the introduction of this post, our bot will send a thank you message to the user on Facebook messenger and our flow will wait until it receives input from the user. When our bot receives a message from the user, we will simply tell him to call a telephone number.

To do this, we have to extend our Facebook Messenger Bot flow from the first part of the tutorial as follows:

The configuration of the needed objects is listed below. If you need to know more about the variables that are used in the input parameters of these objects, please visit this link.

  1. CHECKBOX OPTIN RECEIVED: this webhook will be called right after the user has checked the messenger checkbox in the checkout form of our store and submitted it. We reference our interface in the User Ref. value parameter as the optin.user_ref value is available in the payload that Facebook sends to our interface when the flow starts.
  2. SEND THANK YOU MESSAGE: this object will send our thank you message to the user. We reference the webhook in the User reference parameter as the optin.user_ref value is available in the payload that Facebook sends to our webhook.
  3. MESSAGE RECEIVED: this webhook will be called when the user sends a message to the bot in the Facebook messenger chat. We reference our interface in the User Ref value parameter as the optin.user_ref value is available in the payload that Facebook sends to our interface when the flow starts.
  4. MESSAGE CONTACT SUPPORT: this will tell the user to call the support department. We reference the webhook in the User reference parameter as the optin.user_ref value is available in the payload that Facebook sends to our webhook.

If you need more information on how to create a flow, please visit this link.

Test the process

Once the checkout form of our store has been submitted and only if the messenger checkbox is checked, our Facebook Messenger Bot flow will be kicked off. We will receive the thank you message from the bot:

If we now send a message, we will see that our bot answers with the expected message:

Finally, if we click on the URL button that we configured, we will see that Facebook Messenger will open our store.

Congratulations! You have successfully set up your bot.