Build a Personal Facebook Messenger Bot in 10 minutes

A personal chatbot that will update you on the status of your home devices or maybe send cute cat pics from Reddit.

Let’s build one that sends you the top posts from your favourite subreddits. You can extend it of course with whatever content you want to send.

For this, we need three things:

Facebook Page
A Facebook Messenger bot is associated with a Facebook Page. You need to sign up as a Developer and then create a Page.

Dialogflow
A Google company, Dialogflow helps in NLP (Natural Language Processing). This will help later when you want to extend your bot to respond to specific things.

Code on Standard Library
The greatest thing since sliced bread, Code on Standard Library helps you run code in the cloud. This will be the brains of our operation.

Now, let’s get started.

Setup Facebook Page

Go to developers.facebook.com and sign in with your Facebook credentials. Once you’re signed in, click on Get Started and follow instructions to Add a New App.

Give your App a name. This is the name from which you’ll receive your notifications. Make it something cool, like Darth Vader.

Then navigate to the Dashboard tab on the left side bar menu. Scroll down to find Messenger and select Set Up. Before you can add your Messenger integration you’ll need to create a Facebook page.

This will take you to Facebook. Follow the instructions to create a Community or public figure page.

Once your page has been created, switch back to FB Developer portal and refresh the page. You should now see your page listed in the dropdown Select a Page.

Setup Dialogflow

Now let us setup Dialogflow. Click on Go to console and sign in with your Google credentials.

Click on Create Agent and fill in the details. Give your Agent a name. It can be the same name as your Facebook Page. When your agent is created, it will automatically add two Intents. Click on Default Welcome Intent to edit it.

In the Events section, add the event FACEBOOK_WELCOME. This enables your bot to recognize user when he interacts with the bot for the first time.

Scroll down the page and delete the default responses by clicking the trash icon, as we will be responding to the user from our code.

Scroll down further and enable Fulfillment. This makes sure that all requests are routed through our chatbot function on Code on Standard Library.

Next, we need to connect the Facebook Messenger to Dialogflow. Click on Integrations.

Turn on Messenger Integration. This will open a modal window. You need to enter two things here. First is the Verify Token which can be any text and second is the Page Access Token.

Switch to the Facebook Developer Portal and copy the Page Access Token.

Paste the Page Access Token in Dialogflow modal window and enter your Verify Token. Click on START button to start the integration. Now click on the clipboard icon to copy the Callback URL.

Now switch to Facebook Developer Portal. It’s time to setup the Webhooks integration. Select Setup Webhooks found below the Token Generation section. Paste the URL you copied into the Callback URL field and enter your Verify Token you specified in the previous step. Tick all Subscription Fields.

Click on Verify and Save and if you’ve setup everything correctly, you should see a green tick with Complete. Now select your page name from the dropdown and click on Subscribe.

There are a couple more things that you need to complete the setup. Go to Settings > Basic and add a Privacy Policy URL and choose a Category for your app. The Privacy Policy URL can be any valid URL.

You can also use the Privacy Policy included with the code, as indicated in the Code on Standard Library section below

Save changes and Toggle the status button On to make your app go live.

The icon will show status as Live. You might be tempted to think that this means the whole world can see your app and interact with it. Nope.

Code on Standard Library Setup

This is where our code lives that will enable all the communication. When we send a message to our bot on Facebook, it’ll first go to Dialogflow. Dialogflow will route it to the right intent and then forward it to our function — this function.

First search for fb-messenger-bot in Community API Sources. Click on Create New API.

Once created, you will see three files in the functions folder.

• __main__.jsThe main function fetches the Reddit posts and sends them to the users. Modify the multi object at the top of the function, to customise the subreddits.
• webhook.jsThis function will handle all the webhook requests from Dialogflow. Here is where you’ll add the custom intents if you want to extend the bot functionality.
• privacy.jsDid you know Code on Standard Library functions can return HTML files? This is a Privacy File that you can use on the FB Developer Portal. The URL will look something like https://username.lib.id/fb-messenger-bot@dev/privacy . You should add your own email to the bottom of this document.

Now, navigate to the env.json file and populate the environments with your Standard Library Token and Facebook Page Access Token.

To retrieve your Standard Library Token, place the cursor in between the yellow quotes and right click. Select your Standard Library Token from the drop-down menu and the variable should automatically populate.

Once you have saved the env.json file, click on Run.

Remember that every time you change any code, you need to save and then Run it, to deploy the new code.

Once deployed, copy the API Endpoint URL that’s shown. This is your webhook endpoint.

Now let us finish Dialogflow setup. Switch to Dialogflow and click on Fulfillment and turn on the Webhook.

Append the copied URL with /webhook/ and click on SAVE at the bottom of the page. Your webhook URL should look like https://username.lib.id/fb-messenger-bot@dev/webhook/

We are almost done. All we need to do now, is to enable our bot on the Facebook Page. Go to your Facebook page and click on Add a Button. Choose Send Message, complete the details and save.

Now when you hover over the Send Message button, a dropdown will show. Click Test button.

This will open a chat with a Get Started button.

Click on it and if you have set everything up correctly, you will be greeted with “Woohoo!. Welcome {Name}. You have been added to the database.”.

This means you have been added as a user in your function on Code on Standard Library local storage.

If you message your bot “Hi” again, it will reply with “Hi {Name}, you have already been added to the database.”

Now to setup tasks.

Tasks on Code on Standard Library

One of the coolest features of Code on Standard Library is Tasks. Setting up Tasks makes your code run automatically on a specified schedule.

I’ve currently setup the function for four notifications a day. You can change it to whatever number you prefer. Remember that you’ll also need to change max_notifications variable at the top of the function and add the same number of repeatable tasks in the cron specification.

In the Tasks window, choose your bot function to add a schedule to it.

You can setup the task schedule using the Schedule dropdown. But we want a little more control, so let’s use Advanced (cron).

The cron expression can be very confusing to understand. The expression takes 5 values — * * * * *. The first one is the minutes value and the second is the hours value.

So if you enter 30 5,8,11,15 * * *, it translates to 4 tasks run at 05:30, 08:30, 11:30 and 15:30, repeated every day. The times are in UTC, so you’ll need to add or subtract your timezone offset for the correct local time.

As I live in India and my timezone offset is +05:30, this schedule will run at 11:00, 14:00, 17:00 and 21:00 local time.

Click on Schedule Task and you’re all done. You should now receive notifications on your messenger at the scheduled times.

If you want to test out the tasks schedule, choose once every minute. Once you get the right messages, turn it off and use the above cron expression or something similar to customise the schedule.

Congratulations! You have a personal chatbot now. I’ll add more tutorials in the coming months on what other interesting things you can do with a chatbot.

Check out Create an Alexa Radio Skill, if you want to build an Alexa skill with your personalized radio stations.