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
xxxxxxxxxx
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
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
My Apps
, pressAdd New App
.Create App ID
, and skip theSelect a Scenario
thing by clickingskip
on the bottom right corner.Settings > Basic
, copyApp Secret
and paste it toAPP_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.
+
sign next toPRODUCTS
, and clickSet Up
for Messenger.PRODUCTS > Messenger > Settings
, go to theAccess Token
section and select your page in theSelect a Page
dropdown. Facebook will then ask you to edit permission, so click on the blueEdit Permission
button and give the app access to the page you created.Page Access Token
and place it intoACCESS_TOKEN
in the code you wrote in the first part.Webhooks
section. However, that requires you to have apublic 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
Setup & Installation
and get ngrok ready./ngrok http 80
so the outer world can connect to yourlocalhost
Facebook App Webhooks Setup
Go back to your Facebook App page and under
PRODUCTS > Messenger > Settings
:Webhooks
section, clickSubscribe 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 replaceVERIFY_TOKEN
in the code you wrotemessage_deliveries
,message_reads
andmessage_echoes
as they may cause endless self-responding textsVerify and Save
Select a page to subscribe your webhook to the page events
and clicksubscribe
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:And key in the following cli command (btd is an alias of bottender):
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 saysHello World
!Wrapping Up
Now that you have a working messenger chatbot, you can read the bottender docs and start customizing your own bot!
Credits