How to Create a WhatsApp Chatbot using Flask Python Framework
Tags: chatbot, whatsapp, flask, python
Published: 2023-02-09 11:37:41

Chatbots are software tools created to interact with humans through chat. The first chatbots could create simple conversations based on a complex system of rules. You can build intelligent chatbots for WhatsApp using the Python Framework Flask and the Kompose Bot builder. This post will teach us how to build a WhatsApp Chatbot in Flask Python Framework.
<!-- wp:heading -->
<h2><strong>Pre-requisites</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You will need a <a href="https://dashboard.kommunicate.io/signup?utm_source=DDM&utm_medium=Content&utm_campaign=Content&utm_id=external+source" target="_blank" rel="noreferrer noopener">Kommunicate</a> account to deploy the chatbot.&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Kommunicate is a no-code, hybrid chatbot platform built over a powerful <a href="https://www.kommunicate.io/blog/conversational-ai-customer-support/" target="_blank" rel="noreferrer noopener">conversational AI</a> system.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Also, you will need <a href="https://www.python.org/" target="_blank" rel="noreferrer noopener nofollow">Python</a> and the Flask framework installed on your system. To read more info about the Flask framework, please follow this <a href="https://flask.palletsprojects.com/en/1.1.x/quickstart/" target="_blank" rel="noreferrer noopener nofollow">link</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We will be using Flask in this tutorial. If you are looking to add a Dialogflow chatbot to the Django framework, you can see this <a href="https://www.kommunicate.io/blog/dialogflow-chatbot-django-website/" target="_blank" rel="noreferrer noopener">tutorial</a>.</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2>Steps to Create a WhatsApp Chatbot using Kompose and Flask Python Framework</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3><strong>Step 1</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Log in to your Kommunicate dashboard. If you don’t already have a Kommunicate account, you can create one <a href="https://dashboard.kommunicate.io/signup?product=kommunicate" target="_blank" rel="noreferrer noopener">here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Navigate to the Kompose bot builder category and create a new bot by selecting the “Create Bot” button.<br></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://lh6.googleusercontent.com/991a8OwwB1O4LD4atMi56Gb0LvxiN-G7US5C5ySE0hXtnWfNrj8oGaHEe8Sp6c1pEGQ_1Y0P_Lz2Acdrsdsf1YRX4oOcS3X6PjYTOhhGMHP1CYeRkpMHGezzpo8WnE4Pc_C1bL6LSjLCNSwZ9D5Rdz6Rq1P00zZKJDg3eU-J6bq9guyyWTMoAtQ3TMe3oQ" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3><strong>Step 2</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Use Python with Flask &amp; enable the webhook server<br><br>The webhook requires a URL, and it should be an HTTPS protocol. The webhook URL will receive a POST request from the Kompose Bot every time an intent triggers the <a href="https://www.kommunicate.io/blog/connect-chatbots-with-webhooks/" target="_blank" rel="noreferrer noopener">webhook</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We use the Python programming language and the Flask framework to create the webhook.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Create a file (for example – app.py). Import all the necessary libraries (ex: os, JSON, flask_ngrok, request) needed for Python. Please check if you have Flask on your system. If not, install it using pip, and here’s the <a href="https://flask.palletsprojects.com/en/1.1.x/installation/#install-flask" target="_blank" rel="noreferrer noopener nofollow">documentation </a>for the same.<br><strong><br></strong>To handle all the agent webhook requests, we need to define and add a route/webhook method with a POST request. A POST request will be sent to this URL /webhook. It executes all the methods inside the method.</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://lh3.googleusercontent.com/Wc-PWH281eu6lEg7i10_WNKZBfjiUBcqu41sL2POJtQGg2HNs3KFL6z4CrNod-VzpGctfk11LYxi9zowuLXRW87V1KcFJQhiW7kQElAmRmgOOAyFE51d_dmv7p3zCHE1gdOhDbQaCvrG_Rv_HzfX2zlCRNWVjlZmsqHyMFoHNKv1rL7Ir_xcZvvYeAGMvQ" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>After setting up the Python process, let’s use <strong>flask ngrok</strong> to create a public URL for the webhook and listen to port 5000 (in this example). For the Kompose webhook, you will need an HTTPS-secured server since the local server (localhost) will not work. You can also use a server and point a domain with HTTPS to that server.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You will get the following URL:&nbsp;&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://85e6-203-189-248-8.ngrok.io/webhook">https://85e6-203-189-248-8.ngrok.io/webhook</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>, where the <em>webhook</em> is the POST route for Kompose we mentioned in the Python file.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong>Step 3</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Navigate to the Kompose Bot Builder, select your bot, and click on the “Settings” option at the top right corner.&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Click on the Webhook option present on that page.<br><br>Copy the URL you created&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>(<a href="https://85e6-203-189-248-8.ngrok.io/webhook">https://85e6-203-189-248-8.ngrok.io/webhook</a>) - in this example.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Paste it into the Kompose webhook URL field.</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://lh3.googleusercontent.com/ltESmRhmrSU96KlLgjyWs6821QLJwUQZkY3reAlgrQnaPAWw5pczBWZfZ7gVYap62ZErr_X2-B-anwsK44-mJMNyw00CzQK3bUSNc6lWdTdQ0Gtllphm-5hY_gUUvEYi5z3fVKkp6bLBeCf_FH7u_qm5gIx57nxtaMHvf_s4PNJFjINIikTVxCq0QlGnGQ" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3><strong><br><br>Step 4</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Create an <a href="https://www.kommunicate.io/blog/intent-and-entities/" target="_blank" rel="noreferrer noopener">intent</a> by clicking on the +Add button under the “Answer” section and Train the Bot.&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here, I created Flask intent and added a training phrase such as “What is Flask?”<br><strong></strong><strong></strong></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong>Step </strong>5</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Click on the “Bot Says'' option and select the webhook you created earlier. Now click on “Train Bot.”</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong>Step 6</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Integrating your WhatsApp number with Kommunicate<strong><br><br></strong>Navigate to the integration section and click on “Request Access” on WhatsApp Tile and select on Sandbox option. Send a WhatsApp message from your phone to the phone number 4930609859535 with the content START.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As a response, you will receive your Test API Key on WhatsApp. Enter the API Key in “Test API Key” and click on the “ Update Sandbox ” button.&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://lh6.googleusercontent.com/2_dVkx3h1VYNV_6IF8m8irV850OLrBnqDbp8Tl0YrSK3Fd4CLC9_xDllzQd9R74WPDEd-QiAsdA6kfSYU_Jdxk04V1u54PFpPtK9A9fUE-VDqHhgcVxP9jv9CJ2xVRwSqUC2qewdAuz3niMj2xOKCnUjrcPa72my-gWDW_94GSw4g0B-cRkPUWFMmBeQDg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://lh4.googleusercontent.com/2tz3gxP5kATVeW94WleHrmmwKFWLn-En6RJsihtbtWg_IFWBNYWe7AJeXRByq9nbN22tsJUqFtFSeqpIU-XhfOvVC6v1tPGgtRDXciixpKqilPUWQbgpMPubqoDAy9CEH1RUWrUYndgxRVxe9PD0zjIFQJcSwsSNk0tqczDWPENx1MH1BKrgxcCQ7ylC1A" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><br><br>Please note that we are using 360Dialog Sandbox for testing purposes. You can do the same in Live Environment by selecting “Go Live” and submitting the details asked on that page.<br><br>To learn more about WhatsApp Integration with 360Dialog in Live Environment, please check this <a href="https://docs.kommunicate.io/docs/whatsapp#whatsapp-integration-with-360dialog" target="_blank" rel="noreferrer noopener">doc</a>.<br><br>Now, our bot is ready, and we can test it on WhatsApp<br></p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":12666,"sizeSlug":"full","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-full"><img src="https://www.kommunicate.io/blog/wp-content/uploads/2022/12/whatsapp-image.jpg" alt="" class="wp-image-12666"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><br><br>We can test our Bot using the test Bot link on a Browser by navigating to the Manage Bots section in our Dashboard and clicking on the “Test this Bot” button on that Bot.<br><br><a href="https://dashboard.kommunicate.io/bots/manage-bots" target="_blank" rel="noreferrer noopener">https://dashboard.kommunicate.io/bots/manage-bots</a></p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://lh6.googleusercontent.com/m8_sVg4z1IcaZLWZb3X8ghaBu89iJ_cCxZmJHBfX8rmNxg30GFkvPv7Myih59OYWj0WBnOuHH1nibfqbaylmscUq5ROTYpWJ5XRCvj1q3-SK5NB-01CPxHcMTfr6KOPBPU7JSDcQgcrga6dl2_ySrJOF6BqVYax0b-WGS3sY9hj5Z95WugqpzU6kA5tbxw" alt=""/></figure></div>
<!-- /wp:image -->
You have now created your WhatsApp chatbot in Flask Python Framework.