Build a WhatsApp Chatbot Using Node.JS
Tags: whatsap, javascript, programming, chatbot
Published: 2023-04-25 08:29:54

<!-- wp:paragraph -->
<p>If your company is looking to build an Omnichannel support strategy, then a WhatsApp chat bot can go a long way in accomplishing this. We are going to learn how to build a WhatsApp chatbot using Node.JS in this tutorial. There is also bonus content spattered across the piece, in case you need to explore other topics. Let’s get right to it.</p>
<!-- /wp:paragraph -->

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

<!-- wp:list -->
<ul><li>You will need a<a href="https://dashboard.kommunicate.io/login" target="_blank" rel="noreferrer noopener nofollow"> Kommunicate account</a> with<a href="https://www.kommunicate.io/blog/how-to-make-a-chatbot/" target="_blank" rel="noreferrer noopener nofollow"> Kompose</a> chatbot integrated.</li><li><a href="https://nodejs.org/en/" target="_blank" rel="noreferrer noopener nofollow">NodeJs</a> should be installed on your system.<br></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong>Create a new folder and add a new js file into it.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>$ mkdir hello_world</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>$ cd hello_world</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Create a js app file</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>$ touch app.js</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As you already installed NodeJs previously, no need to install <strong>npm </strong>as it is already there.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Install Dependencies</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>1npm install express</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Once you finish the above dependencies installation, move to the next step where you will be creating the app and API.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>Create your App and API</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Add the following code to your <strong>app.js</strong> file and save it</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>const express = require('express');</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>// Express Initialize</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>const app = express();</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>const port = 8000;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>//create api</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>app.post('/hello_world', (req,res)=&gt;{</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>res.send('Hello World');</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>})</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>app.listen(port,()=&gt; {</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>console.log('listen port 8000');</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>})</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Test the API response using Postman</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Place this URL on Postman to check the response:<a href="http://localhost:8000/hello_world" target="_blank" rel="noreferrer noopener nofollow"> http://localhost:8000/hello_world</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":11699,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.kommunicate.io/blog/wp-content/uploads/2022/09/WhatsApp-chatbot1-1024x640.png" alt="" class="wp-image-11699"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Once you have tested your code, it is now time to go to the next phase of the tutorial.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Moving on to the next step where we will need<a href="https://dashboard.ngrok.com/get-started/setup" target="_blank" rel="noreferrer noopener nofollow"> ngrok</a> to host your code so we can access it via API calling from the different applications.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Hosting your code</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Download the<a href="https://dashboard.ngrok.com/get-started/setup" target="_blank" rel="noreferrer noopener nofollow"> ngrok</a></li><li>Locate the directory on the terminal</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>$ cd downloads</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>&nbsp;Run the following command</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>./ngrok http 8000</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now, you are ready with the HTTPS webhook URL generated by <strong>ngrok</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":11700,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.kommunicate.io/blog/wp-content/uploads/2022/09/WhatsApp-chatbot2.png" alt="" class="wp-image-11700"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>Now, your API is able to send the normal string/text messages, the next step is to send the data in a format that is defined by Kommunicate.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://docs.kommunicate.io/docs/bot-kompose#integrate-your-webhook-with-kompose" target="_blank" rel="noreferrer noopener nofollow">Here</a> we have explained the format that is accepted by Kommunicate, check <strong>step: 3 </strong>and copy the payload, use it in your <em>app.js </em>file.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;[{</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;"message": "Kompose!"</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>}, {</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;"message": "Select the suitable option",</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;"metadata": {</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;"contentType": "300",</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"templateId": "6",</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"payload": [{</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"title": "Welcome Intent",</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"message": "Welcome Intent",</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, {</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"title": "Fallback Intent",</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"message": "Fallback Intent"</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}]</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>}])</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>})</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This is what your updated<em> app.js</em> file looks like;</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":11701,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.kommunicate.io/blog/wp-content/uploads/2022/09/WhatsApp-chatbot3-1024x688.png" alt="" class="wp-image-11701"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>Create a bot and configure Webhook inside Kompose Settings Page</strong></p>
<!-- /wp:paragraph -->

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

<!-- wp:image {"id":11703,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.kommunicate.io/blog/wp-content/uploads/2022/09/WhatsApp-chatbot4-1024x597.png" alt="" class="wp-image-11703"/></figure>
<!-- /wp:image -->

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

<!-- wp:image {"id":11705,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.kommunicate.io/blog/wp-content/uploads/2022/09/WhatsApp-chatbot5-1024x597.png" alt="" class="wp-image-11705"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Click on the Webhook option present on that page. Here, we need to put the Webhook Name and Webhook URL.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>You will be copying the webhook URL from your ngrok server and nodejs app directory name.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>https://7c9b-103-180-2-159.in.ngrok.io/hello_world</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":11706,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.kommunicate.io/blog/wp-content/uploads/2022/09/WhatsApp-chatbot6.png" alt="" class="wp-image-11706"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":11707,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.kommunicate.io/blog/wp-content/uploads/2022/09/WhatsApp-chatbot7-1024x597.png" alt="" class="wp-image-11707"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Create an intent by clicking on the +Add button under the “Answer” section and “Train the Bot.”&nbsp;</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><br>Here, I have created <em>hello_world</em> intent and added a training phrase as “Kompose”</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":11708,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.kommunicate.io/blog/wp-content/uploads/2022/09/WhatsApp-chatbot8-1024x597.png" alt="" class="wp-image-11708"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Click on the “Bot Says” option and select the webhook that you created earlier. Here, I have selected the <em>webhooktest</em> created earlier. Now, click on “Train Bot.”</li></ul>
<!-- /wp:list -->

<!-- wp:image {"id":11709,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.kommunicate.io/blog/wp-content/uploads/2022/09/WhatsApp-chatbot9-1024x589.png" alt="" class="wp-image-11709"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Now, initiate the chat from your WhatsApp to see the responses coming from your webhook.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>If you have not integrated WhatsApp yet, check out the<a href="https://www.kommunicate.io/blog/whatsapp-bot/" target="_blank" rel="noreferrer noopener nofollow"> <strong>blog</strong></a> to integrate the chatbot into WhatsApp.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><img width="602" height="1188" src="https://lh6.googleusercontent.com/DWTpCWVhPYcJ5N7eAdQgI4qToY2bH97eS2uHId-JLUY2H3-encbfHQmmUVrfjkT0kM9zbMO26OVUyJz4g9DzjSH4rzVhlgm1n05eEnsoupJhkPgWdLqdlKqBc310YITF5IkutboZixrrAxWp16WCwuQK9wlHudBhHOChfKBk1yxS_zzMwgTEpkfAmw"></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Voila.. You have just built your WhatsApp chatbot using Node.JS.</p>
<!-- /wp:paragraph -->