🤖 AI Bots Academy 🤓
Share with the Developer Circles community our Winner project of the AI Challenge at HackZurich which we built with Telegram and now we improved the project integrating Facebook Messenger. In this tutorial our goal is to show from the beginning how easy to use and setup your chatbot on Facebook Messenger, implement features such as Messaging, Quick Replies, Web Chat Plugin, Sending Attachments, Buttons, Webhook events, Analytics & more.
Toby bot is virtual assistant that rewards through our AI Loyalty program, all your purchase of products such as: food, beverage and many others products. This project was selected Winner of the AI Challenge at HackZurich.
What it does
We explain step-by-step the process of how to build a bot that rewards users for scanning their shopping tickets integrated with Facebook Messenger, and how to make it Public through the App Review.
How Toby Bot works? Testing Instructions 🤖
1) As simple as starting the conversation on Messenger with Toby.
2) Take a picture of your purchase.
3) Get points!
4) Redeem your points instantly!
How we built it?
🏆 The code sample for this tutorial is Toby Bot, our project Winner of the AI challenge at HackZurich 2020.
Go to DF
🤖 Create new agent and import our project 👇🏼
Step 3: 👇🏼
Go to DF integrations:
Turn on the Facebook Messenger service
Step 5: 👇🏼
Now go to https://developers.facebook.com
Step 6 👇🏼
Create an app on FB console > chose manage bussiness integration > add display name Add purpose > Select ypu bussiness manager account > And this will create your app id
Step 7: 👇🏼
Select the Messenger configuration (set up):
Step 8: 🤖 👇🏼
Create or add a Fan page for Toby Bot
Step 9 👇🏼
Generate access token > get this access token to dialogflow:
Then create a verify token in DF ("helloworld" in our case), Now copy the Callback url provided by DF, And Finally, Click on "start bot" ✅
Add the Callback URl from DF to Facebook for Developers console
Also copy/paste the verify token created on DF to Facebook Console Click on verify and save ✅
In the FB Messenger set up, add the following subscriptions to the webhooks (messeges):
- messages - messaging_postbacks - message_deliveries - message_reads
And Click on Save it ✅
Step 12 👇🏼
Try your bot integration> Go to your fan page > And click on the Get started button
Add Messenger to your Website > Set Up Chat Plugin 👇🏼
Try your Web Bot 👇🏼
Step 13 👇🏼
At Facebook developer console go to basic settings and add:
- your app domain
- your terms of service URL,
- Add you App icon
- Chose an category > Messenger bot for a bussines
- Finally add a platform > website > add your website URL and
- save changes ✅
Step 14: App Review 👇🏼
Go to app review > Click on request permissions and features Now go to pages_messaging > Request advanced access
Go back to Requests and provide the folloving information - Complete App verification
Provide detailed step-by-step instructions on how a reviewer can test your integration and how you are using the requested permissions or features. Include any testing credentials required to access your integration.
Edit your request permission features
Please provide a detailed description of how your app uses the permission or feature requested, how it adds value for a person using your app, and why it's necessary for app functionality.
Select your page
Provide a detailed step-by-step video walkthrough of how your app will use this permission or feature so we can confirm it is used correctly and does not violate our policies
Click > If approved I agree... and accept terms! ✅
🤖 Submit your for Bot for the App Review and to be Available for everyone.
- Getting started with Messenger Platform
- Sending Messages
- Submission Process
- Policy & Usage Guidelines
Accomplishments that I'm proud of
Live working bot tutorial for scanning shopping tickets on FB Messenger.
What's next for AI Bots Academy
Create intermediate and advances Tutorials/Docs, about how to add in our project more Messenger features such as:
- Handover Protocol,
- External APIs integrations,
- Many others!