πŸ€– AI Bots Academy πŸ€“

Inspiration

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.

🏁Let's start!

Step 1:

Go to DF

Step 2:

πŸ€– Create new agent and import our project πŸ‘‡πŸΌ


Step 3: πŸ‘‡πŸΌ

Go to DF integrations:


Step 4:

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" βœ…

Step 10

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 βœ…

Step 11

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
  • privacy policy url ,
  • 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.

Step 15

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! βœ…

Step 16

πŸ€– Submit your for Bot for the App Review and to be Available for everyone.

Resources:

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:

  • One-time-notification,
  • Handover Protocol,
  • External APIs integrations,
  • Many others!
Share this project:

Updates