Sarufi messenger blueprint

A starter code to integrate sarufi chatbot with Facebook messenger. In the blueprint, we need to set up a webhook to receive new messages. This can be done in many ways but we shall use two ways namely ngrok and replit.

Messenger set-up

To get started using this blueprint, you will need credentials which you can get from Facebook Developer Portal after creating an app. Note that the bot will be used on a page so you will need to create a page.

Here are steps to follow for you to get started:

Go to your apps
create an app
On Which use case do you want to add to your app?, select Other >> Next
Select Business >> Business
It will prompt you to enter basic app informations
It will ask you to add products to your app. Add Messenger
Create a page if you have none as the bot will be used on the page
Get access token.

Deloying the bot

Using ngrok

Steps

Make sure you have ngrok installed in your machine.
Make Project folder.

Lets Make a project folder named messenger-bot. Navigate into it to create virtual evironment messsenger-bot-env. Activate the environment.

Run the command to make the magic happen
```
mkdir messenger-bot
cd messenger-bot
python3 -m venv messenger-bot-env
source  messenger-bot-env/bin/activate
```

Clone the repo

git clone https://github.com/Neurotech-HQ/sarufi-messenger-blueprint.git

Install requirements.

Make sure you are in activated environment, then run the following
```
cd sarufi-messenger-blueprint
pip3 install -r requiremnts.txt
```
Create .env file

We are going to keep our credentials in .env file. You can use either a text editor or command line to creat it. With messenger page access token, we covered it previously. Then for sarufi api key, just follow this to get sarufi credentials

In the file, we are going to add the following
```
SARUFI_API_KEY=Your sarufi API key
PAGE_ACCESS_TOKEN = Your facebook page token
SARUFI_BOT_ID= Id of bot to be deployed
VERIFY_TOKEN = A random string to be used as verification token
```
You can add optional variable PORT to specify the port number to be used. If you don't specify it, the default port number, 8000 will be used.

A VERIFY TOKEN is a random string that you will use to verify that the request is coming from Facebook. You can use any random string, but make sure you keep it because you will need to use the same string when we are setting up the webhook.
Run main.py and set ngrok
- Fire up your python script
```
python3 main.py
```
- Start ngrok
```
./ngrok http 8000
```
Note: Keep the port number the same as used in main.py.
Setting webhook

After starting ngrok, you will have a public url to access the local server. The url looks like https://xxxxxxxxxxx.ngrok.io. Navigate into your facebook developer account. On the webhooks section, click messenger >> settings.

Scroll down to webhook section of messenger, click Add callback url. Then paste the provided url into url section. Copy the VERIFY_TOKEN, paste it into verify token in messenger >> Verify and save.
webhook field subscription

We have to subscribe to webhook fields in order to receive messages sent by user. We shall subscribe to messages and messaging_postback topic.
Test your bot

Open your messenger app/web, search for your page name. Send messages to it. The messages will be redirected to your bot. Here is the sample of our pizza bot deployed.

Using replit

Way to go

Log into your Replit account.

Fork the repo Sarufi bot deployed on messenger into your account.

Navigate to Tools--> Secrets to create environment variables. We have discussed on how to get page access token at introduction part where as for sarufi view instructions here get sarufi credentials.

Create

Key	Description
SARUFI_API_KEY	Your sarufi API key
PAGE_ACCESS_TOKEN	Your facebook page token
SARUFI_BOT_ID	Id of bot to be deployed
VERIFY_TOKEN	A random string to be used as verification token

A VERIFY TOKEN is a random string that you will use to verify that the request is coming from Facebook. You can use any random string, but make sure you keep track of it because you will need to use the same string when we are setting up the webhook.

Run the script

After creating the secret keys, run your main.py. A small webview window will open up with a url that looks like https://{your repl name}.{your replit username}.repl.co.

With the url, Navigate into your facebook developer account. On the webhooks section, click messenger >> settings.

Scroll down to webhook section of messenger, click Add callback url. Then paste the provided url into url section. Copy the VERIFY_TOKEN, paste it into verify token in messenger >> Verify and save.
Webhook field subscription

We have to subscribe to webhook fields in order to receive messages sent by user. We shall subscribe to messages and messaging_postback topic.
Final touches

We are reaching at a good point with the set-up. Open your messenger app/web, search for your page name. Send messages to it. The messages will be redirected to your bot. Here is the sample of our pizza bot deployed.

getting sarufi credentials

To authorize our chabot, we are are going to use authorization keys from sarufi. Log in into your sarufi account. Go to your Profile to get API key.

Pizza Bot test

With a bot deployed in messenger, here is a sample of a pizza bot.

Issues

If you will face any issue, please raise one so as we can fix it as soon as possible.

Contribution

If there is something you would like to contribute, from typos to code to documentation, feel free to do so, JUST FORK IT.

Credits

All the credits to

kalebu
Jovine
All other contributors

Neurotech-HQ / sarufi-messenger-blueprint