Build a Personal Facebook Messenger Bot in 10 minutes with Nodejs and Standard Library

Wouldn’t it be awesome to have a personal chatbot that will send you cool stuff throughout the day? Maybe update you on or send from ? the status of your home devices cute cat pics Reddit Let’s build one that sends you the . You can extend it of course with whatever content you want to send. top posts from your favourite subreddits 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 and sign in with your Facebook credentials. Once you’re signed in, click on and follow instructions to developers.facebook.com Get Started Add a New App. Create a new App on FB Developer Portal 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 tab on the left side bar menu. Scroll down to find and select . Before you can add your Messenger integration you’ll need to create a Facebook page. Dashboard Messenger Set Up On the Dashboard tab, choose Set Up on the Messenger card and then Create a new page This will take you to . Follow the instructions to create a page. Facebook Community or public figure Create a Community or public figure Facebook page Once your page has been created, and refresh the page. You should now see your page listed in the dropdown . switch back to FB Developer portal Select a Page Refresh the page and then choose your Facebook page name from the dropdown to generate a token Now let us setup . Click on and sign in with your Google credentials. Dialogflow Go to console Dialogflow uses Natural Language Processing to understand chat conversation Click on and fill in the details. Give your Agent a name. It can be the same name as your Facebook Page. Create Agent Give your agent a name and choose the right time zone When your agent is created, it will automatically add two Intents. Click on to edit it. Default Welcome Intent You can add more intents if you want. In the section, add the event FACEBOOK_WELCOME. This enables your bot to recognize user when he interacts with the bot for the first time. Events Add Facebook Welcome to Events Scroll down the page and by clicking the trash icon, as we will be responding to the user from our code. delete the default responses Click on the Trash icon to delete the default responses Scroll down further and . This makes sure that all requests are routed through our chatbot function on . enable Fulfillment Code on Standard Library Enable Fulfillment to receive messages on your webhook Next, we need to connect the Facebook Messenger to Dialogflow. Click on . Integrations Integrations allow the agent to work with a variety of different services including Facebook Messenger Turn on . This will open a modal window. You need to enter two things here. First is the which can be any text and second is the . Messenger Integration Verify Token Page Access Token and copy the Page Access Token. Switch to the Facebook Developer Portal Choose your Page name from the dropdown to generate a Page Access Token Paste the Page Access Token in Dialogflow modal window and enter your Verify Token. Click on button to start the integration. Now . START click on the clipboard icon to copy the Callback URL Click on the Clipboard icon to copy the Callback URL Now switch to Facebook Developer Portal. It’s time to setup the . Select found below the section. Paste the URL you copied into the field and enter your you specified in the previous step. Tick all Subscription Fields. Webhooks integration Setup Webhooks Token Generation Callback URL Verify Token Not all are required, but Dialogflow will take care of the unnecessary ones and send you only the relevant ones Click on and if you’ve setup everything correctly, you should see a . Now select your page name from the dropdown and click on . Verify and Save green tick with Complete Subscribe Choose your page name from the dropdown and then click on Subscribe to subscribe to your page There are a couple more things that you need to complete the setup. Go to > and add a and choose a for your app. The Privacy Policy URL can be any valid URL. Settings Basic Privacy Policy URL Category You can also use the Privacy Policy included with the code, as indicated in the Code on Standard Library section below Enter the Privacy URL and choose a category for your page Save changes and Toggle the to make your app go live. status button On The icon will show status as . You might be tempted to think that this means the and interact with it. . Live whole world can see your app Nope Your App is Live Setup Code on Standard Library This is where our code lives that will . When we send a message to our bot on Facebook, it’ll first go to . will route it to the right intent and then forward it to our function — this function. enable all the communication Dialogflow Dialogflow First search for in Community API Sources. Click on . fb-messenger-bot Create New API Once created, you will see three files in the folder. functions The main function and sends them to the users. Modify the object at the top of the function, to . __main__.js fetches the Reddit posts multi customise the subreddits This function will handle all the . Here is where you’ll add the custom intents if you want to functionality. webhook.js webhook requests from Dialogflow extend the bot Did you know functions can ? This is a that you can use on the . The URL will look something like . You should add your own email to the bottom of this document. privacy.js Code on Standard Library return HTML files Privacy File FB Developer Portal [https://username.lib.id/fb-messenger-bot@dev/](https://boetie.lib.id/tinkr-fb-messenger-bot@dev/)privacy Now, navigate to the file and populate the environments with your and . env.json Standard Library Token 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. Enter your FB Access Token and the Standard Library Token in your env.json file Once you have saved the file, click on . env.json Run Click Run to deploy the service Remember that every time you change any code, you need to and then it, to deploy the new code. save Run Once deployed, that’s shown. This is your webhook endpoint. copy the API Endpoint URL Now let us finish . Switch to and click on and turn on the Webhook. Dialogflow setup Dialogflow Fulfillment Enable the webhook and add URL Append the copied URL with and click on SAVE at the bottom of the page. Your webhook URL should look like /webhook/ [https://username.lib.id/fb-messenger-bot@dev/](https://boetie.lib.id/tinkr-fb-messenger-bot@dev/)webhook/ Append /webhook/ to your base URL We are almost done. All we need to do now, is to on the Facebook Page. Go to your Facebook page and click on . Choose , complete the details and save. enable our bot Add a Button Send Message Add a Send Message Button to your Facebook Page Now when you hover over the button, a dropdown will show. Click . Send Message Test button Click on Test button to Test your bot This will open a chat with a button. Click on it and if you have set everything up correctly, you will be greeted with “ ”. Get Started Woohoo!. Welcome {Name}. You have been added to the database. This means you have been in your function on local storage. added as a user Code on Standard Library 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 is . Setting up Tasks makes your on a specified schedule. Code on Standard Library Tasks code run automatically Click on Tasks to set up your code to run on a schedule I’ve currently setup the function for a day. You can change it to whatever number you prefer. Remember that you’ll also need to change at the top of the function and add the same number of repeatable tasks in the cron specification. four notifications max_notifications variable In the Tasks window, to add a schedule to it. choose your bot function Choose your function to add a Task schedule You can setup the task schedule using the Schedule dropdown. But we want a little more control, so let’s use . Advanced (cron) Click on Advanced (cron) to use cron expressions for task schedule The cron expression can be very confusing to understand. The expression takes 5 values — * * * * *. The first one is the value and the second is the value. minutes hours So if you enter , it translates to 4 tasks run at , , and , repeated every day. The times are in , so you’ll need to add or subtract your for the correct local time. 30 5,8,11,15 * * * 05:30 08:30 11:30 15:30 UTC timezone offset As I live in India and my timezone offset is , this schedule will run at , , and local time. +05:30 11:00 14:00 17:00 21:00 If the cron expression is valid, the next three invocation times are shown below it Click on and you’re all done. You should now receive notifications on your messenger at the scheduled times. Schedule Task 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. You have a now. . Congratulations! personal chatbot I’ll add more tutorials in the coming months on what other interesting things you can do with a chatbot Check out , if you want to with your personalized radio stations. Create an Alexa Radio Skill build an Alexa skill