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:
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. )
Facebook chatbots are linked directly to Facebook pages. Therefore, before getting a chatbot, you need a Facebook page.
Click on Page
and follow the guides until you get a working page.
My Apps
, press Add New App
.Create App ID
, and skip the Select a Scenario
thing by clicking skip
on the bottom right corner.Settings > Basic
, copy App Secret
and paste it to APP_SECRET
in your code.I will give a general guide below. Check out the official docs if you're still confused.
+
sign next to PRODUCTS
, and click Set Up
for Messenger.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.Page Access Token
and place it into ACCESS_TOKEN
in the code you wrote in the first part.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.
Setup & Installation
and get ngrok ready./ngrok http 80
so the outer world can connect to your localhost
Go back to your Facebook App page and under PRODUCTS > Messenger > Settings
:
Webhooks
section, click Subscribe To Events
Callback URL
, fill in the link ngrok provided (https://<something>.ngrok.io
). Note: It's "https". Don't copy the "http" one.Verify Token
, and copy that token to replace VERIFY_TOKEN
in the code you wrotemessage_deliveries
, message_reads
and message_echoes
as they may cause endless self-responding textsVerify and Save
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!
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
!
Now that you have a working messenger chatbot, you can read the bottender docs and start customizing your own bot!
or
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Syntax | Example | Reference | |
---|---|---|---|
# Header | Header | 基本排版 | |
- Unordered List |
|
||
1. Ordered List |
|
||
- [ ] Todo List |
|
||
> Blockquote | Blockquote |
||
**Bold font** | Bold font | ||
*Italics font* | Italics font | ||
~~Strikethrough~~ | |||
19^th^ | 19th | ||
H~2~O | H2O | ||
++Inserted text++ | Inserted text | ||
==Marked text== | Marked text | ||
[link text](https:// "title") | Link | ||
 | Image | ||
`Code` | Code |
在筆記中貼入程式碼 | |
```javascript var i = 0; ``` |
|
||
:smile: | ![]() |
Emoji list | |
{%youtube youtube_id %} | Externals | ||
$L^aT_eX$ | LaTeX | ||
:::info This is a alert area. ::: |
This is a alert area. |
On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?
Please give us some advice and help us improve HackMD.
Syncing