Messenger Bottender

Assuming that you have set up a working node environment preferably with babel(well, if you are a newbie to node/babel, check this) and installed the proper packages such as Bottender, in order to create a chatbot and connect it to Facebook's Messenger, follow the steps below:

Setting up local server

import { MessengerBot } from 'bottender'
import { createServer } from 'bottender/express'

// Basic config to use later
const PORT         = 80,
      VERIFY_TOKEN = '<<Leave this blank for now>>',
      ACCESS_TOKEN = '<<Leave this blank for now>>',
      APP_SECRET   = '<<Leave this blank for now>>'
      
// Bot initialization
const bot = new MessengerBot({
    accessToken: ACCESS_TOKEN,
    appSecret: APP_SECRET
})

// Bot intents
bot.onEvent(async context => {
  // THIS IS WHERE U ADD ALL YOUR INTENTS
  await context.sendText('Hello World')
})

// Local server
const server = createServer(bot, {
  verifyToken: VERIFY_TOKEN
})

// Start the server
server.listen(PORT, () => {
  console.log(`server is running on port ${PORT}.`)
})

After setting the server up, move on to the next steps. I will come back and finish this up later. (Don't worry about the VERIFY_TOKEN, ACCESS_TOKEN, and APP_SECRET yet, just leave them as blank strings. )

Other Requirements

Facebook chatbots are linked directly to Facebook pages. Therefore, before getting a chatbot, you need a Facebook page.

Create Page

Click on Page and follow the guides until you get a working page.

Facebook Developer App

  1. Login to facebook for developers with your Facebook account.
  2. Once logged in, under My Apps, press Add New App.
  3. Fill in a name you want (it doesn't really matter), click Create App ID, and skip the Select a Scenario thing by clicking skip on the bottom right corner.
  4. In the App, under Settings > Basic, copy App Secret and paste it to APP_SECRET in your code.

Linking App to Messenger

I will give a general guide below. Check out the official docs if you're still confused.

  1. Once you have your Facebook app up, on the left-hand panel, click on the + sign next to PRODUCTS, and click Set Up for Messenger.

  1. Within PRODUCTS > Messenger > Settings, go to the Access Token section and select your page in the Select a Page dropdown. Facebook will then ask you to edit permission, so click on the blue Edit Permission button and give the app access to the page you created.
  2. Once that's done, copy the Page Access Token and place it into ACCESS_TOKEN in the code you wrote in the first part.
  3. In the official docs the next step is to set up the Webhooks section. However, that requires you to have a public url, which means you'll have to port forward your localhost to the outside world which will take up a lot of work and effort…

Luckily, with the help of ngrok, you can create a tunnel between your localhost and the outside world, saving you the time of communicating with your router.

Ngrok Setup

  1. Navigate to the offical site for ngrok
  2. Sign up/login to the website (it's safe don't worry)
  3. Follow the Setup & Installation and get ngrok ready
  4. run ./ngrok http 80 so the outer world can connect to your localhost

Facebook App Webhooks Setup

Go back to your Facebook App page and under PRODUCTS > Messenger > Settings:

  1. In the Webhooks section, click Subscribe To Events
    • For Callback URL, fill in the link ngrok provided (https://<something>.ngrok.io). Note: It's "https". Don't copy the "http" one.
    • Fill in whatever you want for Verify Token, and copy that token to replace VERIFY_TOKEN in the code you wrote
    • Check everything except message_deliveries, message_reads and message_echoes as they may cause endless self-responding texts
  2. Click Verify and Save
  3. After finish loading, select your page under Select a page to subscribe your webhook to the page events and click subscribe

If you are annoyed by the facebook GUI or constantly changing your webhook url while developing, you can also try out the bottender cli, create a config named bottender.config.js in your project root dir as following format:

module.exports = {
  messenger: {
    accessToken: 'YOUR_ACCESS_TOKEN',
    verifyToken: 'YOUR_VERIFY_TOKEN',
    appId: 'YOUR_APP_ID',
    appSecret: 'YOUR_APP_SECRET',
  },
};

And key in the following cli command (btd is an alias of bottender):

$npx btd messenger webhook set -w https://<something>.ngrok.io

And bottender will show your app and page info and make sure you are about to subscribe your page and the bot you are setting. If every thing seems right, input y and sit back, bottender will set everything up for you!

Start Talking to Your Chatbot

Go back to your Facebook page, under Settings on the top right corner, Messenger Platform > Your Messenger Link, navigate to the link and start chatting with your chatbot that only says Hello World!

Wrapping Up

Now that you have a working messenger chatbot, you can read the bottender docs and start customizing your own bot!

Credits

Select a repo