diff --git a/README.md b/README.md index d6684a57..c89c96fd 100644 --- a/README.md +++ b/README.md @@ -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. @@ -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. @@ -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 @@ -192,7 +192,7 @@ 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 @@ -200,7 +200,7 @@ Now that Facebook and Heroku can talk to each other we can code out the bot. 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. @@ -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 diff --git a/demo/Demo.gif b/demo/Demo.gif new file mode 100755 index 00000000..3c033e36 Binary files /dev/null and b/demo/Demo.gif differ diff --git a/demo/config_vars.jpg b/demo/config_vars.jpg new file mode 100755 index 00000000..f9f4488b Binary files /dev/null and b/demo/config_vars.jpg differ diff --git a/demo/shot1.jpg b/demo/shot1.jpg new file mode 100755 index 00000000..4396bb0c Binary files /dev/null and b/demo/shot1.jpg differ diff --git a/demo/shot2.jpg b/demo/shot2.jpg new file mode 100755 index 00000000..3c9cc265 Binary files /dev/null and b/demo/shot2.jpg differ diff --git a/demo/shot3.jpg b/demo/shot3.jpg new file mode 100755 index 00000000..7f8086a7 Binary files /dev/null and b/demo/shot3.jpg differ diff --git a/demo/shot4.jpg b/demo/shot4.jpg new file mode 100755 index 00000000..d7b1286e Binary files /dev/null and b/demo/shot4.jpg differ diff --git a/demo/shot5.jpg b/demo/shot5.jpg new file mode 100755 index 00000000..346b2425 Binary files /dev/null and b/demo/shot5.jpg differ diff --git a/demo/shot6.jpg b/demo/shot6.jpg new file mode 100755 index 00000000..9f86553c Binary files /dev/null and b/demo/shot6.jpg differ