A developer’s guide to building a WhatsApp chatbot

Spread the love

Long ago, I built a web app for a business (200 k employees). What would take place if I were to develop a WhatsApp chatbot to fix the specific usage case, rather of a web app?

But the story is much larger than that.

The business I worked for had an office for around 2,000 employees in the middle of downtown Tel Aviv.

From a whiteboard to a web app

Before there was an app, there was a big board. All chauffeurs marked where they were parking, and their names and phone numbers. Prior to leaving the workplace, a driver had to examine whether anyone was obstructing their automobile. If so, they would need to call the other driver and hope that they were not in the middle of a conference so they might go and move their vehicle out of the method.

To make the process much better, I created a web app.

The original web app concept, showing rows of inside and outside double-parking spaces with numbers and sometimes names. Those with a name are blue, and those without a name are green.

It was easy. No back end. No server hosting. No database maintenance. Not even any UI structure. No webpack and no JS bundles at all! Simply vanilla JavaScript.

It was hosted by utilizing GitHub’s complimentary static page hosting. The database was FireBase, so we had realtime assistance and JSON assistance, and no requirement for a back end.

The user interface was simple. Users would see all parking spots and click an empty one to fill in their details. If they were already parked, it would take the data from the internet browser’s local storage. If they clicked on a signed up slot, they would see the pertinent contact details and might pick to call the motorist.

It was working fantastic for nearly a year. Less than one day of development helped and saved time for many people– a good financial investment.

From a web app to chatbot

One day, Facebook announced that they are going to release an API for WhatsApp. The next day, my brother bought an Amazon Echo, featuring Alexa. Around that time, I likewise began to see Google Assistant all over.

I started to believe that possibly the world was moving toward chatbots, so I should experiment.

I got some feedback on the regular web app, and I believed it might address it if I were to produce a WhatsApp chatbot:

  • The app didn’t work well on some old mobile phones.
  • It didn’t work underground (where the parking is– there is no excellent mobile signal there).
  • Chauffeurs wished to send messages to the blockers rather of opening the phone dialer.
  • Drivers wanted to get push notices if someone was blocking them, rather of opening the web app each time before leaving.

It’s essential to remember that the designers of chat platforms like Telegram or WhatsApp had actually worked days and nights for years to ensure the stability of their apps.

Right away after I started establishing the brand-new parking assistant chatbot, I realized how great the idea was. It was so easy and fast to include brand-new features, and I didn’t even require to do end-to-end screening.

No signal? No issue.

Not only that, I no longer required a complicated CI/CD procedure. If it is working in a chat emulator, it would work all over. No apk, no Xcode, no App Shop, nor Google Play. The chatbot was able to send out messages to users without me needing to sign up devices, use PubSub or similar services for push alerts, or conserve user tokens. No need for an authentication system– I was using the user’s telephone number as recognition.

No signal?

Then I understood that every time a chat platform would introduce a new function, my app would right away benefit from it.

Composing parking a ssistant, a model WhatsApp chatbot

To produce a WhatsApp chatbot, the very first challenge is to get messages from WhatsApp to your program. The easiest solution I discovered is to utilize a shared Twilio telephone number. It’s just for advancement– when transferring to production, developers will wish to use a devoted phone number.

Twilio’s free numbers are each shared throughout numerous Twilio users. To differentiate an app’s end users from those of other Twilio users’ apps, end users need to send a predefined message to the chatbot.

After a user sends out an unique message to the shared number, all the messages from their number will be directed to your Twilio account and webhooks. This is why a devoted number is required in production– there’s no assurance that a given user will only wish to use one app on a given shared number.

Sending WhatsApp messages

On Twilio’s “Programmable SMS Control Panel,” there’s a “WhatsApp Beta” link in the left-hand navbar:

A screenshot of Twilio's
Clicking that, designers will see a page with the alternative “Sandbox.”

A screenshot of the setup step of Twilio's WhatsApp sandbox, waiting for a special WhatsApp message to be sent to a particular number.

To associate users, they will need to send out one unique message to the number Twilio supplies. Once users do that, we can begin sending messages to them and procedure messages from them, via Twilio.

Here is an example of sending out a message utilizing cURL:

 curl ' https://api.twilio.com/2010-04-01/ Accounts/ user_account/ Messages.json' -X POST.
-- data-urlencode ' To= whatsapp:  to_phone_number '
-- data-urlencode ' From= whatsapp:  '
-- data-urlencode ' Body= escaped_message_body '
- u user_account: user_token.

This is a basic text message. You can likewise connect media (images, and so on) to your messages. Here’s a Node.js example:

 function sendWhatsApp( to, body, media)  api.twilio.com

 function objToFORM( obj)  
 const params =  brand-new URLSearchParams().
 for( var a  in obj) 
params.append( a, obj[a]).

 return params.

 function JSONRemoveUndefined( obj)  
 return JSON parse( JSON stringify( obj)).

That’s it: Now we can begin sending out messages to customers! It’s essential to remember the two most essential technical restrictions of WhatsApp messages:

  1. When the bot receives a message, you can send one text reply totally free. More than that cost money.
  2. The bot can send out messages to users only during the 24- hour window starting when it receives a message from a user. Beyond this window, the bot can send out just messages using authorized templates, as we will see later on.

Getting WhatsApp messages

Sending out messages was relatively easy, but getting and processing messages is even much easier.

A screenshot of the

On Twilio’s “sandbox” page, designers can specify where Twilio needs to send messages it receives at the shared WhatsApp number. Throughout advancement, services like Ngrok or Serveo can offer public URLs that route to regional developer machines.

Twilio WhatsApp messages look like this:

" NumMedia": " 0",.
" SmsSid": " sms_id ",.
" SmsStatus": " received",.
" Body": " Example Message from user",.
" To": " whatsapp:  ",.
" NumSegments": " 1",.
" MessageSid": " ",.
" AccountSid": " account_sid ",.
" From": " whatsapp:  ",.
" ApiVersion": "2010-04-01"

That is all we require.

Message templates

As discussed, chatbots can send freestyle messages just to users who are “currently” interacting with them, i.e., throughout the 24- hour window. If you want to send messages to new users, or outside of the window, you should utilize pre-approved message design templates. This is to prevent spam.

In my use case, I wanted to update chauffeurs when somebody was obstructing them, even if they aren’t users of the chatbot. In Twilio, click “sender” and “configure.”

A screenshot of Twilio's

This is the template I selected:

 is obstructing your exit from the car park. I will notify you when they leave.

A number of days later on, Facebook authorized my template, and I might start to send those messages to everyone who had WhatsApp, not simply motorists who had sent a message to the chatbot.

Sending out a message from a template is precisely like sending out a routine message, using the very same API. WhatsApp automatically sees that it matches a design template and authorizes the message.

Not only for parking assistant

This strategy is interesting for me when I think of an online shop: Perhaps one day people will be able to buy anything using chatbots. Just envision if users were able to connect genuine money to each WhatsApp message.

Think of a chatbot that replaces Waze or Google Maps. You send it a text of your destination. The chatbot platform is tracking your area, and the chatbot sends you a recorded message that plays automatically with the realtime spoken instructions of the navigation.

It’s not dream. WhatsApp presently supports area sharing in genuine time– all that they require is the option to autoplay received messages, and voilĂ .

Think about a Waze chatbot or a taxi chatbot rather of the Gett or Uber apps.

Facebook already supports Webview for Messenger

These advantages are why developers are seeking to create WhatsApp chatbots to handle crucial jobs, like offering instantaneous authoritative responses about the coronavirus pandemic, to assist suppress the spread of false information.

TL; DR: 7 conclusions about moving web apps to chatbots

In summary:

  • Many times, developing a chatbot can cut advancement time substantially, since there’s no need to design and plan a graphical user interface. (That stated, it deserves taking a look at the finer points of chatbot UX design prior to beginning, to learn from the mistakes of others)
  • It is much easier to include new features to chatbots. Developers do not need to upgrade or alter any existing elements. The chatbot simply needs to start understanding the new kind of message.
  • Chatbots are much more available by default to individuals with unique needs.
  • No need to personalize a cross-platform option. The chatbot platform does that already.
  • Users trust chatbots a lot more for sharing info. You do not need to request consent or program warnings– e.g., the user can just choose an image from their gallery and send it to your chatbot– approval to access the image gallery is currently provided to the chat platform.
  • Chat platforms make it easy to handle push notifications. Push notifications are what makes the difference between apps that users forget and apps users will engage with routinely.
  • Chat platforms handle moving in between offline and online conditions for you.

How to construct a WhatsApp chatbot: Parting suggestions and best practices

The benefits of writing a chatbot are pretty clear. Developers who are ready to develop one are encouraged to start small, with a chatbot that comprehends one message. And manages it well.

Chatbots ought to stick to brief messages.

Chatbots with character are received much better. Even some bare-minimum “human speak” goes a long way compared to a “system message procedure” method: “I will upgrade the parking map for you,” instead of, “The database has been updated.” A chatbot should leave the user with the sense that it’s a machine that’s there to serve the user, rather than a black box carrying out technical operations they may not remain in a position to understand.

This WhatsApp chatbot tutorial didn’t get into the specifics of parsing the natural-language messages users will send to chatbots. But aiming companies of chatbot development services are welcome to browse the source code of the WhatsApp Parking Assistant bot (particularly hackparkDialogFlow.ts, which accepts demands from the user as actions) to get a feel for how that element works.

For a more extensive post about how to find different kinds of user messages– while likewise following the dependency injection method to programs– see Toptal’s TypeScript chatbot tutorial

Finest of luck with your own WhatsApp chatbot advancement!

The Toptal Engineering Blog Site is a hub for in-depth advancement tutorials and brand-new innovation announcements produced by professional software engineers in the Toptal network. [LINK] Follow the Toptal Style Blog on Twitter and LinkedIn

Read next:

The Poco F2 Pro is the Xiaomi K30 Pro with a brand-new name

Corona protection

Read our day-to-day protection on how the tech industry is responding to the coronavirus and subscribe to our weekly newsletter Coronavirus in Context

For pointers and techniques on working remotely, take a look at our Growth Quarters posts here or follow us on Twitter

Find Out More