Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# 🤖 Creating your own Facebook Messenger bot

![Alt text](/demo/Demo.gif)
![A demo showing a barebones Facebook Messenger bot](/demo/Demo.gif)

Facebook recently opened up their Messenger platform to enable bots to converse with users through Facebook Apps and on Facebook Pages.

You can read the [documentation](https://developers.facebook.com/docs/messenger-platform/quickstart) the Messenger team prepared but it's not very clear for beginners and intermediate hackers.
You can read the [documentation](https://developers.facebook.com/docs/messenger-platform/quickstart) the Messenger team prepared but it's not very clear for beginners and intermediate hackers.

So instead here is how to create your own messenger bot in 15 minutes.

Expand Down Expand Up @@ -93,15 +93,15 @@ You can also skip the whole thing by git cloning this repository, running npm in

1. Create or configure a Facebook App or Page here https://developers.facebook.com/apps/

![Alt text](/demo/shot1.jpg)
![Add a new app in Facebook for developers](/demo/shot1.jpg)

2. In the app go to Messenger tab then click Setup Webhook. Here you will put in the URL of your Heroku server and a token. Make sure to check all the subscription fields.

![Alt text](/demo/shot3.jpg)
![Paste in callback url and token](/demo/shot3.jpg)

3. Get a Page Access Token and save this somewhere.

![Alt text](/demo/shot2.jpg)
![Generate a page token](/demo/shot2.jpg)

4. Go back to Terminal and type in this command to trigger the Facebook app to send messages. Remember to use the token you requested earlier.

Expand Down Expand Up @@ -134,7 +134,7 @@ Now that Facebook and Heroku can talk to each other we can code out the bot.

**Optional, but recommended**: keep your app secrets out of version control!
- On Heroku, its easy to create dynamic runtime variables (known as [config vars](https://devcenter.heroku.com/articles/config-vars)). This can be done in the Heroku dashboard UI for your app **or** from the command line:
![Alt text](/demo/config_vars.jpg)
![Configure Facebook page access token](/demo/config_vars.jpg)
```bash
heroku config:set FB_PAGE_ACCESS_TOKEN=fake-access-token-dhsa09uji4mlkasdfsd

Expand Down Expand Up @@ -192,15 +192,15 @@ Now that Facebook and Heroku can talk to each other we can code out the bot.

5. Go to the Facebook Page and click on Message to start chatting!

![Alt text](/demo/shot4.jpg)
![A Facebook chat box with our new bot](/demo/shot4.jpg)

## ⚙ Customize what the bot says

### *Send a Structured Message*

Facebook Messenger can send messages structured as cards or buttons.

![Alt text](/demo/shot5.jpg)
![Examples of rich Facebook Messenger messages, called cards] (/demo/shot5.jpg)

1. Copy the code below to index.js to send a test message back as two cards.

Expand Down Expand Up @@ -308,7 +308,7 @@ Git add, commit, and push to Heroku again.

Now when you chat with the bot and type 'Generic' you can see this.

![Alt text](/demo/shot6.jpg)
![A card from the bot in chat](/demo/shot6.jpg)

## 📡 How to share your bot

Expand Down
Binary file added demo/Demo.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/config_vars.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/shot1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/shot2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/shot3.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/shot4.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/shot5.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/shot6.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.