Introduction:

A WhatsApp chatbot is an automated software powered by rules or artificial intelligence (AI) and runs on the WhatsApp platform. People communicate with a WhatsApp chatbot via the chat interface, like talking to a real person. It's a set of automated replies that simulates a human conversation on WhatsApp. In this blog, we are going to explain the steps for creating a WhatsApp chatbot with Twilio.

Flow diagram:

Prerequisites :

Twilio account
Twilio package
Python –  twilio

Steps:

Step 1: Signup/Login to Twilio

If you don't have a Twilio account (Twilio ), please proceed with the signup option. otherwise, log in with your existing credentials.

Step 2: Retrieve the Twilio Account SID, Auth Token

After login, you will redirected to the Twilio console

Copy your Account SID, and Auth token and paste it into a local file, it will be used later to connect Twilio with Python code.

Step 3: Django Backend Creation

Before creating a Django Project, please create a virtual environment and install the required dependencies

pip install virtualenv

python -m venv myenv

myenv\Scripts\activate

After creating a virtual environment install all the dependency python packages mentioned in the requirements.txt file.

A sample requirement.txt file can be found in the following git repository file.

whatsapp_bot_example_twilio_django_python/requirements.txt at main · episyche/whatsapp_bot_example_twilio_django_python

Create a Django project named twilio_whatsapp using the following command.

django-admin startproject twilio_whatsapp

Navigate to the project directory that you have created in the above step and create an app named chat using the following command.

cd twilio_whatsapp
python manage.py startapp chat

The project structure is given below

Install the Twilio Python package using the pip

pip install twilio

Update the django settings.py file with the following items.

In the INSTALLED_APPS section add your app name (i.e. chat)

Append TWILIO_ACCOUNT_SID and TWILIO_AUTH_TOKEN (i.e. from Step 2: Retrieve the Twilio Account SID , Auth Token ) at the end of settings.py file to allow Django to access Twilio.

#settings.py

ALLOWED_HOSTS = ['*']

INSTALLED_APPS = [
    .....
    'rest_framework',
    'chat'
]
.
.
.

#twilio
TWILIO_ACCOUNT_SID=<YOUR_TWILIO_ACCOUNT_SID>
TWILIO_AUTH_TOKEN=<YOUR_TWILIO_AUTH_TOKEN>

A sample settings.py file can be found in the following git repository file.

https://github.com/episyche/whatsapp_bot_example_twilio_django_python/blob/main/twilio_whatsapp/settings.py

Navigate to chat django app directory, and create a SendMessage class in views.py.

from django.shortcuts import render
from rest_framework.views import APIView
from django.http import HttpResponse
from django.conf import settings
# Create your views here.
from twilio.rest import Client
from twilio.twiml.messaging_response import MessagingResponse
class SendMessage(APIView):
    def post(self, request):
        try:
            data = request.data
            data_dict = data.dict()
            print('-----data_dict ' , data_dict)
            msg = data_dict['Body']
            resp = MessagingResponse()
            if (msg == 'Hi'):
                resp.message('''I am chatbot assisted designed to show the blogs of our compnay 
                             \n\nTo know more about Stripe payment gateway integration - https://episyche.com/blog/how-to-integrate-stripe-payment-gateway-in-django-and-react-for-the-subscription-use-case 
                             \n\nTo read all our blogs please visit https://episyche.com/blog''')
            else:
                resp.message('Msg is -- {}'.format(msg))
            return HttpResponse(resp ,  content_type='application/xml')
        except Exception as err:
            print('er----- ',err , '\n\n')
            return HttpResponse(err)

A sample views.py file can be found in the following git repository file.

https://github.com/episyche/whatsapp_bot_example_twilio_django_python/blob/main/chat/views.py

After creating the class add the urls.py file under your chat Django app.

In your core folder navigate to urls.py(core folder) and add your path with <appname> and <url_filename>(i.e. created in the above step). Your core urls.py settings file should be like the below one.

from django.contrib import admin
from django.urls import path , include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('chat/' , include('chat.urls'))
]

A sample urls.py(core folder) file can be found in the following git repository file.

https://github.com/episyche/whatsapp_bot_example_twilio_django_python/blob/main/twilio_whatsapp/urls.py

Now , In your chat app urls.py add your path with the class SendMessage

from .views import *
from django.urls import path
urlpatterns = [
    path('', SendMessage.as_view() ),
]

A sample urls.py(chat) file can be found in the following git repository file.

https://github.com/episyche/whatsapp_bot_example_twilio_django_python/blob/main/chat/urls.py

Complete Django example in the following github repo.

GitHub - episyche/whatsapp_bot_example_twilio_django_python

Step 4: Ngrok Configuration

Ngrok is a Secure Tunnel that allows you to instantly open access to remote systems without touching any of your network settings or opening any ports on your router. This means you get a secure, reliable tunnel for your developer box, IoT device, or just about anything that has access to the internet

To add ngrok to your django server , follow the steps

Download ngrok - Download ngrok

In my case I am using a Windows machine, therefore I Downloaded and ran the ngrok.exe file in my django project, based on your operating system download the appropriate ngrok package from the above link.

Run the following command to start the ngrok server

ngrok http 8000

After running the above command you will see the screen like below. Note the Forwarding URL. That is the URL replace for http://localhost:8000

Run the Django server

python manage.py runserver

Note: If you have subdomain, please configure the webserver to run in https with reverse proxy pointing to Django Server, so that you can use your domain url to establish connection between Twilo and your Whatsapp Bot Django Code.

Step 5: Connect to WhatsApp Sandbox

Please add your phone number which you are going to use for testing the bot (send or receive messages)

In Twilio console Go to Phone Numbers > Manage > Verified Caller IDs . and click Add a new Caller ID

Choose the appropriate Country Code and add your Number, click Verify number

You will get a verification code, Enter the verification code and Submit.

In the Twilio console Go to Messaging > Try it out > Send a WhatsApp message

Send a message from the above verified number to the Twilo number which will be displayed in the dashboard with code join <keyword>

Add Sandbox URL ( i.e, In my case ngrok forwarding URL which is from Step 4: Ngrok Configuration ) and click Save

Result:

If I send “Hi” to the bot, it replies to the content that I provided in the code. A sample screenshot is added below

Twilio WhatsApp integration with Django