[fa icon="calendar"] Publié le 16 February 2018 par Julien Nassar

Build your chatbot in 30 minutes


Developing your bot from scratch is often a hassle. Online tools are available, but hard to use or expensive, or both. The question is : can you build your bot for free and test it in under 30 minutes ?
Without delay, the answer is YES, I'm going to tell you HOW.

Step 1 : Draw your bot !

The first thing to do is to draw the canvas of your bot. It's the same as drawing the UX of an app or website. I recommend drawing the canvas of your bot like a graph. We will work on an easy example of a bot that makes movie recommendations :


In green we have the messages sent by the user, in violet the answers of the bot and the orange dots are the user's states. It will allow the bot to answer a user by taking into account keywords and the previous message (like a Markov chain).

The state 0 represents a user the bot never talked to. If a user in state 0 says 'hello', the bot we will reply with a different message than if he had said 'hello' but from the states 2, 3, 4 or 5.

Step 2 : Build your bot !

The code

To build our bot, we will be using flask, a python lightweight web Framework. On your computer, install python 3 and pip.
First install the web framework Flask and two other packages that will help us connect Facebook and google spreadsheet together to make our bot :

pip install flask
pip install git+git://github.com/juliennassar/fb_messenger.git#egg=fb_messenger
pip install git+git://github.com/juliennassar/gs_bot.git#egg=gs_bot

Now, create a file called app.py and copy the following code snippet inside :

# package imports
flask import Flask
from gs_bot import GSheetsBot
from fb_messenger import FbMessenger, Event

# setup of the environment variables, we will fill them later with values
= ''
# then create a Flask app
app = Flask('bot')

# enable the connection interface with Facebook

# enable the connection interface with Google SpreadSheet, which will contain the bot's flow

# Now define a custom reply function for the Facebook messenger interface to take into account the bot in the spreadsheet
reply(e: Event):
responses = bot.reply_graph(e.sender_id, e.content['text'])
for response in responses:

# setup the reply funtion above as the callback for the message event listener of the messenger_interface
messenger_interface.callback_manager.set_callback(reply, 'message')

# and run the app !
__name__ == '__main__':
app.run(host='', port=5000, debug=True)

Google Spreadsheet and google API setup

On the google developers console api dashboard, create a new project. We'll name it chatbot-test. In the credentials tab, create new credentials. Select service account key, setup your name, and give it the role "Project Viewer". Select the Json format then hit create. It should automatically download the credentials on your computer, save it next to your app.py file.

Copy the file's name and set the value of GOOGLE_CREDENTIALS_PATH to the file name you just downloaded. Next, create a google spreadsheet, give it a unique name and copy that name in the GOOGLE_SPREADSHEET_NAME variable.

Setting up the spreadsheet :

To build our bot as described in the draw your bot section, we take each combination of a set of previous states (orange dots), user message (key words that will trigger the response, in green), bot answer (violet) and a next state (orange dot) Each will give us a line in our spreadsheet. For example the group in the image below


translates into a line in the spreadsheet :

next state previous state(s) keywords responses
1 0 hello;hi Hi ! What kind of movie are you looking for ?

The keywords are the triggers to go from one state to another. You can setup mutiple keywords to detect as triggers by listing them and writing them separated with semicolons. For a better flexibility, you can also define muti-message answers by separating the messages with semicolons.

the full bot structure then translates into

next state previous state(s) keywords responses
1 0 hello;hi Hi ! What kind of movie are you looking for ?
2 1;6 horror How about Saw ?
3 1;6 funny Dumb and dumber
4 1;6 historical The Rise of Evil
5 1;6 documentary March of the Penguins
6 2;3;4;5 hello;hi Did you like last movie ?
What would you like for today ?

Our spreadsheet is now ready !

you can run your bot by starting your flask web server :

python3 app.py

Facebook messenger setup


Install Ngrok on your computer, launch a tunnel with the following command

ngrok http 5000

Copy the https link (which should look something like this : https://<some_id>.ngrok.io/).

Facebook app

On the facebook developers console, create a new messenger app. Select messenger and  link it to your Facebook page in the token generation section.

Screen Shot 2018-02-12 at 22.03.16.png

Copy the token and set the FACEBOOK_PAGE_ACCESS_TOKEN with this token.

Choose your custom FACEBOOK_VERIFY_TOKEN and set it in the corresponding variable in the code snippet. Now back on the facebook developers console, go to the webhook section and click on Setup Webhooks.

Screen Shot 2018-02-12 at 22.10.20.png

Fill the informations with your ngrok url https://<some_id>.ngrok.io/ and your FACEBOOK_VERIFY_TOKEN, select messages and click verify and save.

If the popup closes, it means everything went good !

Step 3 : Test it !

Your Bot is now online, you can go to your facebook page and start chating with it !

Try to make a few changes in your spreadsheet and go to https://<some_id>.ngrok.io/bot/reload to take into considerations your modifications, which will also reset all user states to 0.


This technique uses open source packages (fb_messenger and gs_bot) that I update and improve overtime.

It currently does not allow you to setup more complex features inside the spreadsheet like :

- real language analysis (it works by word detection only)
- database management for users and messages history
- api calls to get external ressource
- intent management

However, it will allow you to quickly MVP your bot !

Liked this article? Interested in building an app with us?

Contact a React Native expert in Paris

Want to rate this article?
Submit Rating