How to build a Facebook bot for your travel startup in under than 30 minutes
You want to give the chance to your target users to find your products directly from the Facebook Messenger application. This is the place to be. Here there are few steps to take into account in order to achieve what you are looking for.
The flow of a bot interaction is quite simple, but it is better to state it in order to clear things up. You target users will connect to a Facebook page, that by exposing the “Send a message” service will let them chat with your page itself. At this point the bot plays its role by answering to the users, and this can be achieved thanks to web hooks. No magic.
Bot environment setup — Facebook App Page
If you do not already have it, create a Facebook page for your App. You can achieve this by reaching https://www.facebook.com/pages/create/ and under the section Brand or product select App Page. Put a name and follow the wizard.
Once you land on your freshly created Facebook Page we need to enable the Send a message service. We can achieve this by clicking on the blue call to action Add a button. Once in the modal select Send a message under the Get in touch section.
We are few clicks away from being ready to give birth to our first bot. What we miss is the attachment of the bot itself to the page, but in order to perform this we need to have it listening on a reachable address. Let us start with writing the first few lines of it, we are going to head back to the Facebook part later.
The bot code — few lines for attaching it to Facebook
In order to attach the Bot to the page, we first need to have a piece of reachable service echoing back a given code. This is the component needed to complete the Facebook Bot registration. To speed things up we need two modules: express, body-parser and request. Go to the folder containing your code and fire these commands:
npm install express body-parser request
We can now start writing our. Open with your favorite text editor the server.js file, and place these lines:
A few words on the code we just wrote. In order to correctly attach the bot to the messaging service, Facebook first needs to verify it by sending to a given endpoint a code (hub.challenge) and expecting to receive it back, along with the code, Facebook will send a shared secret to authenticate the receiver (WEBHOOK_TOKEN). Note that this token is created by us, developers of the bot. Start the server by firing the command:
If everything went fine you should see “Listening on http://localhost:3000” on you console.
Unless you have a domain // public ip attached to your host, we need to be reachable from the internet. A quick and dirty solution is to use https://ngrok.com. It will create a tunnel directed to your local server. Please follow their tutorials on how to install it, but once ready fire this command in your console:
ngrok http 3000
You should see a black screen. Write down the host on the second Forwaring line. It should be something like https://<your id>.ngrok.io -> localhost:3000. We are going to signal to Facebook https://<your id>.ngrok.io along with our WEBHOOK_TOKEN.
Attaching the bot to Facebook
Fourth of our five points journey is to register the bot to our Facebook Page. We can easily achieve this by going to the Facebook developer portal and registering a new App. Just click on the button My Apps in the upper-right conner of the screen and select Add a new App. Fill the requirements in the modal and head to the application page for the webhook registration.
In the Add a Product screen select Set Up under the voice Messenger.
Head to the Webhooks section and click on Setup Webhooks:
Fill the input of the wizard with the public host and the WEBHOOK_TOKEN and select Messages from the Subscription fields as in the following screen:
If everything has been set up correctly we should see something like this in the Webhooks section:
In the menu below Select a page to subscribe your webhook to the page events, select the page you have created in the previous steps.
Before heading back to the code we need to write down the page access token needed by our bot to reply to the users on behalf of the page. The token can be generated in the section Token Generation, above the Webhooks section. Just select the page we have created in the first chapter from the dropdown menu and write down the token, we are going to refer to this code as PAGE_ACCESS_TOKEN.
Replying to the users — back to the bot
We are going to implement now the front-end part of our bot, namely the reply process. It is important to state that this is an asynchronous process, thus we are going to let Facebook know we have received the message, and then we are going to send a reply. As a good starting point we can reply with the same message sent.
Facebook will send as a post request to our endpoint the payload. Before being able to answer to the user, we need to perform a few checks. Consider first that the received payload might cover different use cases, hence it is needed to check if the media is set to page and then if the broadcasted events are of type message. Place this piece of code in server.js after the verification endpoint declaration:
As you can see the answer to the user is sent with the usage of the sendTextMessage function, whose code is the following:
Remember to declare your page access token at the beginning of the script with the one you have obtained from the Facebook App Page. Restart your node process and head to the Facebook page you have created to chat with your bot. If everything went fine you should start receiving back your messages.
Please note that the actual response time might change on the base of the bot code deployment and infrastructure. By removing the ngrok tunnel it will speed up things, in the next episodes I might show you some free-of-charge solutions for hosting your bots.
We are the end of this part 1. In this moment we have set up a bot sending back to the user his own messages. In the next part we are going to spice things up with different response type and with some intention detection.
If you cannot wait, do not hesitate to get in touch with me here or on LinkedIn
This tutorial code can be found here https://github.com/Sh1n/facebook-bot-part-1
Stay tuned for the next chapters