Messenger Setup
Enable Messenger Channel
Create a New Messenger Bottender App
Create Bottender App
is the best way to start building a new application in Bottender.
To create a project, run:
npx create-bottender-app my-app
Make sure that you checked the messenger
option:
After finishing the Create Bottender App
process, bottender.config.js,
a config file is generated automatically for further channel settings.
Enable Messenger Channel for Existing Apps
First, you need to have a bottender.config.js
file that sets channels.messenger.enabled
as true
:
module.exports = {
channels: {
messenger: {
enabled: true,
path: '/webhooks/messenger',
pageId: process.env.MESSENGER_PAGE_ID,
accessToken: process.env.MESSENGER_ACCESS_TOKEN,
appId: process.env.MESSENGER_APP_ID,
appSecret: process.env.MESSENGER_APP_SECRET,
verifyToken: process.env.MESSENGER_VERIFY_TOKEN,
},
},
};
By default, webhook listens on path - /webhooks/messenger
.
You can set your webhook path in the path
field.
Complete Messenger Channel Settings
When you run a Bottender app, Bottender loads environment variables in the config file, bottender.config.js
. Then, bottender.config.js
loads sensitive or environment-dependent variables in .env
.
To make a Messenger Bot works, you have to fill in the below environment variables in .env
.
# .env
MESSENGER_PAGE_ID=
MESSENGER_ACCESS_TOKEN=
MESSENGER_APP_ID=
MESSENGER_APP_SECRET=
MESSENGER_VERIFY_TOKEN=
Before going further, we assumed that you have already prepared:
- A Facebook Developer account
- A Facebook App for your Messenger Bot
- A Facebook Page for your Messenger Bot
- A Bottender Project
Note: If you are not familiar with Facebook App, you can refer to Facebook's official doc, Setting Up Your Facebook App.
Then you can open your App page and ready to prepare relevant environment variables. You can find detailed instructions in the following sections.
Prepare MESSENGER_APP_ID
and MESSENGER_APP_SECRET
Traverse to Your Facebook Apps → \${Your App Page} → Settings → Basic.
You can see your App ID and App Secret. Facebook will ask your Facebook password again before display your App Secret. Fill these two values to MESSENGER_APP_ID
and MESSENGER_APP_SECRET
in .env
.
Prepare MESSENGER_PAGE_ID
and MESSENGER_ACCESS_TOKEN
First, please make sure that you have added Messenger
as a product of your Facebook App.
Traverse to Your Facebook Apps → \${Your App Page} → Messenger → Settings → Access Tokens. Add your Facebook Page to your Facebook App.
Once you have added your Facebook Page for your App, you can find the Facebook ID
. Click the Generate Token
button to generate Messenger Access Token.
Facebook has a strict security policy. You can only have one chance to save your Access Token.
Remember to have your access token copied before closing the Token Generated
pop up. If you forgot or lost your Access Token,
the only thing you can do is to revoke a new one.
Prepare MESSENGER_VERIFY_TOKEN
You can define your Verify Token
in the filed of MESSENGER_VERIFY_TOKEN
in .env
. It is a token for Facebook to confirm the origin of the response is from your bot server.
Prepare Webhook
, and Subscriptions
Before going further, please make sure you have filled in the following fields: MESSENGER_PAGE_ID,
MESSENGER_ACCESS_TOKEN,
MESSENGER_APP_ID,
MESSENGER_APP_SECRET,
MESSENGER_VERIFY_TOKEN.
In Development
You can run your Bottender project by the following commands.
npm run dev
Then you can run the following commands to set webhook and enable bot related Messenger subscriptions.
npx bottender messenger webhook set
Finally, you are ready to test your bot on Messenger.
In Production
Run your Bottender project on your hosting by the following commands.
npm start
If you deployed your bot on https://example.com/
, your Messenger Bot webhook is https://example.com/webhooks/messenger
with the default settings.
Set Up Webhook and Enable Subscriptions by Command
You can set your webhook by the command below.
npx bottender telegram webhook set -w https://example.com/webhooks/messenger
Set Up Webhook and Enable Subscriptions on Facebook App Page
However, there are many more options and information on Facebook App page. You can also set up your webhook on Facebook App Page.
Traverse to Your Facebook Apps → \${Your App Page} → Messenger → Settings → Webhook. Click button Add Callback URL.
Fill your webhook URL in the Callback URL
and copy your MESSENGER_VERIFY_TOKEN
from .env
and paste to Verify Token.
Please make sure that you have enabled Subscriptions
you need by clicking Edit
Button. We usually recommend developers to enable the following subscriptions: messages, messaging_postbacks, messaging_optins, messaging_referrals, messaging_handovers, messaging_policy_enforcement.
Last but not least, let's echo again about Messenger's strict security policy. Before you release your bot to the public, you have to submit your App to Facebook to get relevant permissions, e.g., pages_message.
See Facebook's official document, Submitting Your Messenger App, for more information.