How I Created Whatsapp bot to talk with my friends?  
Tags: whatsapp, bot, webautomation, puppeteer
Published: 2019-08-08 08:58:46

---
title: How I Created Whatsapp bot to talk with my friends?  
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/m7jykytuprhpue6879xh.jpg
description: Using the tools like Node, Google Puppeteer and programming language skills like JavaScript creating a Whatsapp bot is just a piece of cake
series: improving Whatsapp
tags: Whatsapp, Bot, WebAutomation, puppeteer
---

# Index
    
- [🤔 Why?](#why)
- [🤨 How?](#how)
    - [How did I got inspired?](#how-did-i-got-inspired)
    - [How did I do it?](#how-did-i-do-it)
    - [Enough show me the code](#enough-show-me-the-code)
    - [Final results](#final-results)
- [✌ Conclusion](#conclusion)

### 🤔 Why?

The title seems kinda rude and lazy. Right? But if you think about the situation I am in then you'll understand. Here in India it's important to be socially active than being alive. If you don't reply or send a few *"good morning"* messages in a few groups, People would think you are actually dead. and taunt you for being busy and not spending time with them.😤

Now, the thing with me and social media is, I want to use it on my time not when they send me a notification. So, there are situations Where I reply to a post after 4-5 days and by that time my reply would not matter, as that moment would have been gone. Let's consider about posting. For example birthdays anniversaries etc... But the thing is I don't want to be that guy who replies after 4-5 days. We all have 24 hours and I try my best to allocate it to all the things and priorities I have at my disposal. I'd get disappointed if someone replies to me after a week so I don't want to be that guy for them. 

So, I have come up with my programming skills to solve/automate this scenario which will save my screen time.🤩


### 🤨 How?

#### How did I got inspired?

I was looking to do an automation on the web and just like Google's top result, Selenium popped up in my mind but, as a JavaScript enthusiast, I choose JS as my ally. As an matter of fact, I found  few modules in npm for Selenium but wasn't really impressed by that😐. 

While searching for that I stumbled upon [this video](https://www.youtube.com/watch?v=lhZOFUY1weo) from google IO 2018 and then [this one](https://www.youtube.com/watch?v=VDGiQ2cwFP4&feature=youtu.be&t=500) which got me thinking like 

![this](https://media.giphy.com/media/BmmfETghGOPrW/giphy.gif)



#### How I did it?

First, I learned about a few tricks from this post
{%link hardkoded/creating-a-whatsapp-bot-with-puppeteer-sharp-16f2%}
then, I realized that relying on DOM is not a good idea🤨. What if classes or selectors I have used got updated in the page🤔? So I decided not to use DOM. (But I ended up using it any way for other feature🤷‍♂️. Will write about it in another post. Stay Tuned.......😎)

Just like a production issue solved before the deadline😏, I found one repo which gives programmable access to the WhatsApp which works the same way as I want it.


#### Enough show me the code

Here are the overall steps and gist. I have added a link to the repo as well.

1. First I created a puppeteer browser window and opened Whatsapp like this

![code screenshot](https://thepracticaldev.s3.amazonaws.com/i/4s02h7ha9fw1r1wf7ke9.png)


2. Then, I created a json file to manage messages and it's equivalent reply and also to add some configs.

![code screenshot](https://thepracticaldev.s3.amazonaws.com/i/a0wbjm0p3gjujrj1n86h.png)
 

3. Next, I added a function inside `inject.js` which would be called every time I get a new message

![code screenshot](https://thepracticaldev.s3.amazonaws.com/i/urz4ixk1iud6siyczx5o.png)





#### Final results

With the few garnishing with libraries like [Ora](https://www.npmjs.com/package/ora), [Cli-progress](https://www.npmjs.com/package/cli-progress) and [qrcode-terminal](https://www.npmjs.com/package/qrcode-terminal) on the top 

![Garnishing giphy meme](https://media.giphy.com/media/l4Jz3a8jO92crUlWM/giphy-tumblr.gif)

I got this

![preview of wbot](https://thepracticaldev.s3.amazonaws.com/i/al5vwx3nso5pfhod3n0r.gif)

Here is the full code

{% github vasani-arpit/WBOT%}



### ✌ Conclusion

This is what technology is all about. Identify the problem and fix the problem with the tools/tech. Isn't it?
There are so many possibilities with the combination of the tools like Google Puppeteer and NodeJS. We just need to be self aware enough to look for solution to the problem we have in day to day life. 

--------------


!! Reward me with your comments below🎁..... You are awesome !!

Thanks [starline](https://www.freepik.com/starline) for the background vector

*P.S: This is the first time I am sharing/writing over the internet. Feel free to point out mistakes so that I can improve that for my next post.*