Developing a Facebook Messenger Bot (Part 1)
Many people have been talking about bots and conversational UI for quite some time now. I can remember, that an employee at a former startup of mine once developed an IRC bot to gather daily time tracking data from the team, since noone wanted to use the UI of the time tracking tool — that was many years ago!
Today the hype about bots is just about to hit mainstream. With Facebook revealing their bot platform for Messenger during this week’s F8, there is no excuse anymore for not knowing about conversational UI. Mark Zuckerberg made it very clear, that a chat bot can — in many cases — deliver a much better customer experience than apps or websites. Sure, people will push it too far and use conversational UI even in places, where a traditional GUI would make more sense — but there are still a lot of sensible use cases for conversational UI and bots.
I plan to document my progress in creating a Facebook Messenger bot in a few articles. I hope that following my struggles can save you some time once you want to get started on the same adventure. So let’s begin…
Where to start?
After watching the F8 keynote, I was excited to see the first session on Messenger bots that day. Sadly, there was no code in that session and the information was just a marketing extension of the keynote (the videos for the session are not up, yet, but will be available soon at the Facebook for developers website). But you can find a nice introduction on Facebook’s website.
Set up an app
The Getting Started section looked promisingly easy. So I went ahead and created a Facebook app. The first pitfall for me was, that the screenshots in the documentation are from the new interface, which is not yet available for most developers; so the instructions were misleading and I had to guess and search a lot. I finally found out, that I did NOT have to add the Messenger product to my app, because there was already an entry in the navigation on the left. However, when I clicked that entry, I only saw a blank page. I decided to ignore this fact for now and go on with the getting started guide.
In the second step you have set up a webhook. This was also totally not obvious to do from the instructions in the documentation. Instead of going through settings, I had to find the entry “Webhooks” (right above “Messenger”) in the left navigation. There I had to add a “New Subscription” and choose “User” (not “Application”) from the dropdown menu. I could then enter the URL of my application and choose the appropriate subscriptions as listed in the documentation. Remember that the URL has to be secure https. As I planned to use Heroku, I got https for free.
Before continuing with the configuration of the app, Facebook wants to validate your URL — so you actually have to have an app up and running there already! At this point I wished that their tutorial would have been structured more clearly: first write your hello world bot, second configure the app on Facebook. But they chose a hybrid tutorial approach, where you have to jump between configuring inside Facebook to writing and deploying code. So, the next step in the getting started guide was to write a validating webhook…
Facebook presents some snippets of Node.js code, but I decided to spin up a simple Ruby on Rails app for that. I could have used the rails-api gem , but since this was just a tutorial, I went for a vanilla Rails app and simply called rails new mybot.
A naked controller named “bot” with just one action named “webhook” will do for now. In this webhook action, we simply need to look at the params for hub.verify_token and compare it to the token we chose in the Facebook configuration. If the token matches, we return the challenge, that we received as param hub.challenge, as simple text.
class BotController < ApplicationController
if params[‘hub.verify_token’] == “mytoken”
render text: params[‘hub.challenge’] and return
render text: ‘error’ and return
Commit this stuff and push it to a new Heroku app. Now you’re finally ready to validate your link: go back to where we left off with the configuration in Facebook (adding a webhook subscription) and hit save there. After a few seconds, your webhook should have been called, returned the challenge and finally be validated.
Fantastic, I thought, now I can finally start to play around with some bot interactions. But Facebook disappointed me. According to their getting started guide I had to go to the Message “tab” (which was a navigation entry to the left in my interface) and get a page access token. But as I mentioned earlier, the Message page was merely a blank page for me. I tried everything, from logging in again to creating a completely new app — no luck. It turned out, Facebook still had a bug there and noone could actually start developing Messenger bots — grrr. After all F8 had just ended a few hours ago and they will probably fix it in the coming days, I thought. So I called it a day and checked back today, two days after F8 was over. And hallelujah, the Messenger page for developers shows up now!
I will continue my journey towards my first Facebook Messenger bot in another article in the near future, so stay tuned.