Create a Facebook Messenger Bot using Flowize

You can create a Facebook Messenger Bot using Flowize to automatically respond your customer queries or to send them their invoices, for example. Just follow these steps:

  • Create a Facebook Page and a Facebook Application in Facebook for developers platform.
  • Install and configure the Facebook Messenger app in Flowize.
  • Include the webhook URL in Facebook for developers platform.

Create a Facebook Page and a Facebook Application in Facebook for developers platform

First you need to create a Facebook Page. Go to facebook.com/pages/create. Choose a category and click Get Started.

After that you’ll need to create an App. Go to developers.facebook.com, where you can create a new Facebook App from the top menu:

Give your Facebook App a name, type in your e-mail, and then click the “Create App ID” button.

After creating the App, you have to select a product. In “Messenger” tile click on the “Set Up” button. This will redirect you to the Messenger configuration page.

Once you’re there, you must locate the “Token Generation” section. Select the page you already created, and it will give you the Page Access Token that we need to configure our app in Flowize.

Install and configure the Facebook Messenger app in Flowize

Now we need to install the Facebook Messenger app. Let’s go step by step:

Step 1 – Information

Modify here the name of the app if needed.

Step 2 – Authentication

Insert here the Page Access Token you got from Facebook.

Step 3 – Config Bot

Here we will be able to set up various aspects of our Facebook Messenger bot.

Welcome Screen

With this setting, we can set up the welcome screen of our bot that will be shown to the users on Facebook Messenger.

You can set a greeting text in different languages and the payload that will be sent back to our webhook when the user taps the “Get Started” button.

Domain Whitelist

This setting specifies a list of third-party domains that are accessible in the Messenger webview for use with the Messenger Extensions SDK, and for the checkbox plugin.

Persistent Menu

This lets us set up actions that the users can interact with at any point. For more information, please visit this link.

We can easily add a new menu option by clicking on the “Add Menu Option” button. These are the type of buttons you can add:

  • URL button: Specifes the item is a URL button.
  • Postback button: Specifies the item is a postback button.
  • Nested button: Specifies the item opens a nested menu.

Also, it is possible to edit any button that we have added by clicking on its “Edit” button.

Target Audience

This allows us to customize the audience that will see our bot in the Discover tab on Messenger.

Step 4 – Config Dynamic URL

This step will automatically create the Dynamic URL that we need to set in the Facebook Messenger Application as a webhook URL where we will receive the messages, opt-ins, etc.; but first we need to create an interface, a flow and needed webhooks; just clicking in the following buttons:

Interface

Just click on install interface button. Then, if you want to map the interface with your data scheme, click on “Edit Interface” button, go to “Incoming Request” tab and assign the parameters that you need.

Flow

Follow this tutorial in order to create a simple bot logic within a flow.

You can also create a more complex logic integrating the Facebook Messenger Checkbox Plugin following this tutorial.

Webhooks

Create the webhooks you need for your bot’s logic:

  • Checkbox Plugin Webhook: this webhook will receive the optin event from the Checkbox Plugin. Additionally, it will start a new data record if the user_ref parameter of the payload is not registered in the system.
  • Message from Checkbox Plugin Webhook: this webhook will receive all events (messages, postbacks, …) from the Facebook Messenger Bot if the user has used the Checkbox Plugin to start the conversation.
  • Generic Facebook Webhook: this webhook will receive all events (messages, postbacks, …) from the Facebook Messenger Bot if the user has manually started the conversation on Facebook Messenger. This is to say, all events except those related to the Checkbox Plugin.
    Additionally, it will start a new data record if the sender.id parameter of the payload is not registered in the system.

Dynamic URL

Once we have installed all the requirements, the option to create the dynamic URL will appear:

Once you click on the “Install dynamic URL” button, you’ll get the URL we need for the last step.

Include the webhook URL in Facebook for developers platform

Back to developers.facebook.com, in your newly created application, find the button “Setup Webhooks” in the Webhooks section under “Settings” left menu.

Fill-up the following in the pop-up that appears:

  • Callback URL: Insert your webhook or dynamic URL. You will use a dynamic URL instead of a webhook one just in case you want to insert a record for a certain ID if you don’t have a running one already.
  • Verify Token: It always have to be verified.
  • Subscription Fields: Choose messages, messaging_postbacks and messaging_deliveries. If you want to know more about webhook events read this information.

Click “Verify and Save” button.

Now our Facebook Application is well connected and working correctly, we are ready to create a flow with the bot’s logic.

Test your bot

For testing this example, we simply open a conversation with our Bot in Facebook Messenger. We will be able to see the welcome screen that we previously configured. If we tap on “GET STARTED” and then send a message, we will receive a feedback from our Bot.

Finally, we can test the postback functionality by clicking on one of the postback buttons that we configured in our persistent menu, the bot will reply to our postback.