The world’s leading publication for data science, AI, and ML professionals.

Add a Customized Rasa Chatbot for Your Facebook Page

A simple walkthrough for setting up a Rasa chatbot for your Facebook page

Photo by Volodymyr Hryshchenko on Unsplash
Photo by Volodymyr Hryshchenko on Unsplash

Over the past decade, Chatbots, or more formally known as virtual assistants, have become a popular choice for collecting and disseminating information. Also, the ability to integrate these chatbots into different social media platforms and websites have made it a viable and convenient option for communication.

Also, Facebook is one of the most popular social media platforms and it has become a prominent stage for advertising personal and cooperate businesses. And integrating a customized chatbot into a Facebook page may result in increased page visits and pleasant interactions from the users. This simplified step-by-step tutorial will guide you through the Rasa installation, setting up the development environment, and integration with the Facebook page. Most importantly, this procedure doesn’t contain any paid tools or software. So let’s get into the tutorial.


Setting up Rasa

Installing Python

First up, you have to install Python. You can install any of the versions from 3.6 to 3.9. Note that the 3.6 version will stop getting support by the end of 2021. 3.9 is the usual choice, but if you already have one of the other 3 mentioned versions already installed, things would work fine. You can install Python for Windows from here. It would be better if you can install Python through the Windows installer and make sure you check the option of "Add Python version to PATH" when installing.

Choosing an IDE

There are many viable options for an IDE, but I personally prefer VS Code. But you can use most of the popular IDEs that are available. You can download Visual Studio Code from here.

Setting up the virtual environment

First, create a folder where you will be creating the Rasa project. Now open the command prompt and go inside that created folder using the ‘cd’ option. Also, you can do this by opening your created folder in the file explorer and then typing in ‘cmd’ in the address bar and hitting Enter.

fig 1 : Alternate method for opening the command prompt at a target file path (Image by author)
fig 1 : Alternate method for opening the command prompt at a target file path (Image by author)

After you have opened the command prompt at the relevant folder’s address you can type ‘code .’ to open the VS Code IDE at the given target address. This shortcut is only for VS Code IDE on Windows. For other IDEs and OSs, you will have to manually open the IDE terminal and browse to the created folder.

Now, if you are using VS Code you have to open a new terminal by going to Terminal tab > New Terminal. After that, you can simply create a virtual environment with Python using the command ‘python -m venv ./venv’.

After creating the virtual environment, you can activate the virtual environment using the command ‘.venvScriptsactivate’.

Installing Rasa and other necessary components

Now we will be installing some components including Rasa inside the virtual environment. First, we have to get pip, which is a package manager for Python packages. You can install pip by using ‘python get-pip.py’ command. After that, by using pip we can download and install Rasa. Use ‘pip3 install rasa’. It will take a couple of minutes for the installation.

Creating the Rasa project

Create a subfolder inside the main folder you created. This new folder is where we will be creating our Rasa project. You can either do this through the file explorer or through the VS Code itself.

fig 2 : Creating a new folder for the Rasa project (Image by author)
fig 2 : Creating a new folder for the Rasa project (Image by author)

Now go into the newly created folder using the ‘cd folder name command. After that, you can type in the command ‘rasa init’ to create the new rasa project inside the given folder. This will also take a couple of minutes. There will be a couple of prompts when creating the project and you can reply to them according to your objectives.


Integrating with Facebook

Setting up a Facebook app

First of all, you have to set up a Facebook app. Head out to Facebook for Developers and go to ‘My Apps’ tab in the top right corner. Sign in with the Facebook account which was used to create the page which you are planning to integrate the chatbot into. Click on the ‘Create App’ button and select ‘Business’ for the app type.

fig 3 : Click on the Create App button (Image by author)
fig 3 : Click on the Create App button (Image by author)

Add an app display name and for the app purpose, choose ‘Yourself or your own business’ and click on ‘Create App’.

Now scroll down to find messenger on the products list and click on ‘Set Up’. Now under the Access Tokens section, click ‘Add or Remove Pages’ button and add the Facebook page which you want the chatbot in. Keep the Manage and access Page conversations in Messenger property enabled and continue.

fig 4 : After adding the Facebook page to the app (Image by author)
fig 4 : After adding the Facebook page to the app (Image by author)

Updating the Rasa project

Now we have to do some adjustments to link the Facebook app with our newly created Rasa project. For that, browse for the credintials.yml file in the Rasa project. Open the file and find the slot for Facebook and uncomment that block of code.

fig 5 : credintials.yml file (Image by author)
fig 5 : credintials.yml file (Image by author)

Now you have to head back to the Facebook app to get the and and later fill them in the credintials.yml file. In the Facebook app, under the Access Tokens section where we linked our Facebook page (fig 5), click on the ‘Generate Token’ button. Copy this long token and replace the tag in the credintials.yml file.

Next, go to Settings > Basic in the left side menu and you will be able to find an encrypted field with the label ‘App Secret’. This will be in the credintials.yml file. Copy the App Secret and replace the tag.

fig 7 : The App Secret (Image by author)
fig 7 : The App Secret (Image by author)

For the field, you can add a string which works as a verify token when setting up the webhook, so you can type any string you wish.

Finally, open the ‘endpoints.yml’ file in the Rasa project and uncomment the code block which mentions the action_endpoint.

fig 8 : endpoints.yml file (Image by author)
fig 8 : endpoints.yml file (Image by author)

Save the changes made in the credintials.yml and endpoints.yml files and restart the Rasa server. you can stop the server with Ctrl+C and start the server with the command ‘rasa run’.

Setting up the Webhook with ngrok

First, you have to download ngrok. ngrok is a cross-platform application which allows to expose a local development server to the Internet. Download and extract it to any location on your computer. Before proceeding further, you have to open the code IDE and check on which local port the Rasa project is running. You can find that among the details after the ‘rasa run’ command. Mine was port 5005. After confirming the port, open the ngrok.exe file, type in ‘ngrok http port no.. This will expose the mentioned local port to the internet. Usually the session should be limited to 2 hours which means after 2 hours the connection should be re-established and the forwarding URL will be changed. You can create a free account at ngrok.com and remove the session time limit by using the auth token provided to the created free account.

fig 9 : ngrok connection status (Image by author)
fig 9 : ngrok connection status (Image by author)

In here there are two forwarding URLs. You have to copy the URL with ‘https’. For me, it is https://bd0bcb258fc2.ngrok.io. Now go to the Facebook app and go to Messenger > Settings in the left side menu. Under the Webhooks section (right below the Access Tokens section), click on the ‘Add Callback URL’ button. For the Callback URL, you have to paste the copied URL in the format of : copied URL/webhooks/facebook/webhook. And the Verify Token as in the field of credintials.yml file.

fig 10 : Adding the Callback URL (Image by author)
fig 10 : Adding the Callback URL (Image by author)

After adding the above two fields, you can click on ‘Verify and Save’ and it will work fine if both the Rasa server and the ngrok connection is up and running. Upon successful verification, you will be able to see your Facebook page appearing under the Webhooks section with empty webhooks field. Click on the Edit button and add the ‘messaging’ and ‘messaging_postbacks’ subscription fields.

fig 11 : Editing page subscriptions (Image by author)
fig 11 : Editing page subscriptions (Image by author)

After completing these steps, you will be able to log into Facebook with the account that was used to create the page, and chat with the integrated chatbot of the page. If you want to allow a couple of others to chat as well, you have to add them as testers for your Facebook app by going to Roles > Roles in the left side menu of the Facebook app page. They will also have to register with Facebook developer accounts to accept the invitation and proceed with testing the page’s chatbot.

Now all you have to do is to customize the chatbot the way you need through the Rasa project. There are many codebases for formal chatbots that can be found on the internet if you don’t have an idea about Rasa developments. If you do, you can customize the chatbot according to your wishes and finally, you can submit your app for review, and once it’s passed, the page with your customized chatbot will be available for anyone over Facebook!

I did meet with a lot of issues during this integration process and that was the main reason I felt writing this article in a simplified step-by-step manner. So feel free to drop any additional errors you meet along the way and hopefully I will be able to lend a hand. Happy coding! Stay safe!


Related Articles