The next step is to use these values in the server.js file to make an instance of a bot, and create a server through which your bot can communicate with your Facebook page. The following code in server.js does just this:

The code above uses the messenger-bot module, which we use throughout the rest of the guide. Check out the docs here.

To complete the webhooks setup:

Select Messenger from Products on the left hand side of your app page

from on the left hand side of your app page Scroll down to Webhooks and select Setup Webhooks

and select In the New Page Subscription dialogue, copy and paste your Glitch project URL into the Callback URL input

dialogue, copy and paste your Glitch project URL into the input Enter the Verify Token you chose for your bot in .env

you chose for your bot in .env Select messages and messaging_postbacks in Subscription Fields

and in Select Verify and Save

New page subscription dialogue

Then, to subscribe your page:

Select Messenger from the right navigation under Products.

from the right navigation under Under Webhooks select the page you created for your app and press subscribe.

Subscribe your page to the webhook

Your Facebook page and bot should now be linked!

Adding a Get Started Button

A Get Started button is displayed when a conversation between a user and your bot is first opened and is a great way to initialise interaction. When a user hits the get started button Facebook sends a postback with the user’s ID and a developer defined payload.

Get started button and resulting interaction

To add a get started button, make the post request below in terminal. This tells Facebook to add a get started button to your bot whenever a user starts a new conversation.

curl -X POST -H "Content-Type: application/json" -d '{

"get_started":{

"payload":"GET_STARTED_PAYLOAD"

}

}' "https://graph.facebook.com/v2.6/me/messenger_profile?access_token=PAGE_ACCESS_TOKEN"

You’ll need to paste in your page access token, but the payload can be left as it is.

The code below adds a listener to the postback event in the Glitch project. The listener callback checks the payload for the GET_STARTED_PAYLOAD message, then adds the users details to a local database and sends the user a message notifying them to this.

Once you’ve made the request to add the button, clicking the Get Started button on your bot will add your details to the user-base and send you a registration message.

Registration confirmation from Get Started interaction.

News Bot

This section will explain how the bot sends a user the top posts from the Hacker News website when they send the message ‘news’.

There are several different message templates that you can send to users, and the Chatbot Magazine provides a great cheat sheet explaining how each one works. Our Glitch project uses the list template, as it allows multiple elements to be displayed, each containing a title, subtitle, image and a URL button, which is ideal for displaying posts.

For information on how to format message templates check out Facebook’s Send API reference.

In the Glitch project, the code below adds the ‘send news list’ functionality:

This code does three things. The first is adding a listener to the message event, with the callback checking for the message ‘news’ or ‘News’.

A GET request to the News API then returns an object consisting of the top ten posts from Hacker News. Within the callback function of the request the returned posts object is mapped over and each post transformed into an element ready for the list message.

The list message template only allows four elements to be sent, so the returned array of elements is reduced from ten to four. For details about the list template format, check out the list template reference.

The final part of the code sends the list to the user with the bot.sendMessage(…) function. The message attachment follows the list template format, complete with the elements array created in the previous step.

To get your Glitch project working add your News API key to the apiUrl constant in the Glitch project, then send the message ‘news’ to your bot. Changing the news source is as easy as changing the GET request!

News bot

This method can also be easily adapted to carry out other tasks. Why not send a user recommended artists using the Spotify API, or inform people which channels are hot right now with the YouTube API?