In this post we’ll solve POC in which “MachineLearning-made-easy.com” wishes to use WhatsApp Bot to generate invoices for its client. WhatsApp Bot should also be able to send these invoices to respective clients. So stay tuned to check this project in my next post.
Step 1. Creating an agent on Dialogflow:-
Create a new agent on Dialogflow ,name it accordingly & hit create button. And then your agent should have been created.
Step2. Building whatsapp Sandbox:-
Our agent on Dialogflow needs to talk to whatsApp for business api . But before that let’s understand how whatsApp for business api works-
At the time of this writing this post, whatsapp as an api is available only to qualifying businesses . There’s process which every business has to go through and qualifying businesses are permitted to use the service . Having said that there’s no approval needed for developing an application that utilizes this api.
Technically Facebook which owns whatsapp provides an application that runs inside of a docker container . This is helpful when you want to setup the api service on premise. Alternatively you can setup the application on aws using prebuilt stack that whatsapp provides. You’re however responsible from managing this entire infrastructure & network configuration .This application also uses mySQL for storing its data. Besides the application a phone number that has not been in use with whatsapp for at least 6 months is required to be registered and verified for use with api . Once the api server is up and running , It can be used for messaging . This entire setup is something that requires a specialist and we’ll go in detail of it later. That’s why we’ll employ the service of managed solution offered by the messaging giant twilio .
Twilio offers a tons of messaging services & APIs for all kind of businesses . WhatsApp is the most recent addition to their portfolio & you as a developer can start building and testing your bots right away without the need for any business verification. I should make it clear here that to get your bots live for the world to use a formal business verification process still applies and there’s no way to circumvent it at this time. Below page on twilio website outlines the pricing structure for whatsapp’s api. This doesn’t apply while you’re developing your bots .
So now you can begin by going to twilio.com and signing-up . I’ve already created login account so I’ll skip to the login page and sign in to my dashboard . When you login for the first time on twilio then you’ll be asked for mobile verification .
After verification process, create new project and then you’ll land up on a dashboard . Whatsapp for business api service is available under the programmable SMS section.
Under whatsapp tab,first you need to activate twilio sandbox for whatsapp which allows us to build and test our bot without getting the business profile approved . Then you’ll have to pick one of the available numbers from drop down & activate the sandbox.
Next, assuming you’ve whatsapp installed in your phone , you need to join the sandbox to send and receive messages during this development phase . For that click on join the Twilio sandbox & simply scan the QR code shown or by sending the join message shown on website like “join dirt-discussion” from your whatsapp in phone to the given number on website like +44 161 850 7453. Once it’s done you’ll be told that “you’ve successfully joined the sandbox”.
Step 3. Twilio and DialogFlow integration:-
Now you’ve dialogflow account so you need to connect Twillio and Dialogflow . You don’t need to write any custom code to bridge dialogflow and our whatsapp sandbox on twilio . This is because whatsapp api is classified as a “Programmable Text Messaging” or SMS service and Dialoflow offers ready integration with this feature.
Go to Dialogflow > Integrations> Twilio (Text Messaging) and enable this.
Now click on “Twilio (Text Messaging) ” ,so we can quickly integrate this with our twilio account .As you can see in picture down below we need , “Account SSID”, “Account Token” & “Phone number” (which we selected as Whatsapp Sandbox number on Twilio).
So go back to Twilio> Programmable SMS > Show API Credentials ( In top right corner).
Copy those one by one and paste on “Twilio (Text messaging)” window on Dialogflow and hit start button to power up & enable the integration app on our dialogflow account . Internally this brings online a nodejs app that has the integration setup and ready for use.
Once online , we’ll copy the “Request URL” from the above window and paste this in Twilio>Whatsapp>Try the whatsapp api using sandbox >Conversational messaging > Connect the sandbox to your app > “A Message comes in” box. This is where the messages are forwarded by the twilio , when received from users on whatsapp. Hit the “Save” button and we’re good to go.
You can test your integration by typing “Hi” on your whatsapp.
BTW these greetings are serviced by pre-set welcome intent set in dialogflow which is currently set to send back random and pre-set text messages when simple greetings messages like “Hi’, “Hello” etc are received .
Step 4. Reconfigure Welcome and Fall back Intent:-
Before we build anything , let’s reconfigure our default welcome & fall-back intents on our dialogflow . The welcome Intent for instance is currently set to greet the user and respond to messages like “Hello”, “Hi”, “Hey there” and many more. But we want to use this intent to help the person ,whoever is using it,and giving him/her basic instructions like how to interact with our “WhatsApp Bot” . So we’ll delete these default “Responses”messages and we’ll replace it with
- “Hi, welcome to WhatsappBot. To generate a new bill , say “new bill” or “I wish to generate a new invoice” .
I’ll save this and we’ll also edit our default fall-back intent which fires up when Dialogflow is unable to understand what the user is saying . So we’ll delete these default “Responses” messages and we’ll replace it with
- Humm, I didn’t get what are you asking .
- Hi, welcome to WhatsAppBot. To generate a new bill , say “new bill” or “I wish to generate a new invoice” .
- Sorry, I couldn’t understand what are you saying.
On-boarding and assisting messages such as these are keys to prevent users from straying off from an active conversation.
Save the changes and test it out from your whatsapp. You can type some gibberish in your query and see what your bot replies.
Step5. AWS Setup:-
Now we need to setup aws account so we can deploy our web-hook as an aws lambda function. Lambda is a “function as a service” from aws . Where you can deploy your functions without worrying about scaling or underlying server setup. Function does what it’s designed to do and it’s exposed to outside world for request and responses through Amazon api gateway , which lets you route “GET”,”POST” and other types of http calls easily to the desired function.
This is what serverless movement all about .
We’ll be using framework that is also coincidently called “serverless” framework to configure and deploy our webhook. You’ll be amazed at how easy it’s to set-up and deploy our lambda function on the cloud.
But first we’ll download , configure & AWS CLI(Command line utility) to work with our aws account.
- Go to aws.amazon.com and signup for the account.
- Now google “aws cli” and go to “Install the AWS CLI on windows” . This’ll take you to the aws cli homepage which carries instructions on installing this utility on your machine . We’ll be using this utility to safely store our private keys and client email. If you’re on windows then you can download Window installer.
Now enable secure access to your aws account . CLI uses the special access key id & secret key to talk to the aws account .The serverless framework also uses the setup to deploy functions on aws lambda . So once you’ve the aws cli installed , login to your aws dashboard > services> IAM .
Here we’ll create the user so go to “users” section and click on “Add user”. Type “user name ” & select “Programmatic access” under “Access Type”. This is needed if you’ve local products that need api access to the amazon webservices. Our CLI & serverless framework would need such an access . Then hit “Next” button and assign permissions to user by clicking “Attach existing policies directly” and then select “AdministratorAccess” policy to attach to user because CLI does need full access to your aws account . Hit the “Review” button and finally hit “Create user”.
Once It’s done you’ll be presented your “Access Key” & “Secret Access Key” . Make sure you don’t close this page just yet. Because these keys are shown only once. If you don’t save them then you need to regenerate them.
Now type “aws configure”, this’ll ask me put my aws “Accesskeyid” & “secret access key”. You can also configure your region to deploy your services , aws products are deployed across the globe every region has a name such as “us-west-2”, “ap-south-1” etc. Leave “Default output format” as it is . And then hit enter again .
That’s it, your machine is equipped to work with aws account.
Step6 .The Serverless framework CLI:-
Now we’ll download Serverless framework utility globally by typing below command
npm i -g serverless.
Once it’s installed, this CLI tool is accessible by either using “serverless” or “sls”. By typing “sls –version” should display the version of serverless framework at the time of installation.
Step7.Securely storing secrets:-
Now we’ll securely store “email ID”& “Password” that our webhook will need while sending email to recipients. In the past we’ve token as environment variables and that you can do here too. But in aws we’ve better and more secure way to store these secrets . AWS System Manager ‘s Parameter store allows you to store tokens ,credentials & private key securely as encrypted string. These encrypted strings are stored on aws’s infrastructure and are fetched directly into the Nodejs application , when needed. In our case we’ll fetch this directly in to our webhook without storing them into environment variables or on disk.
The SSM dashboard can directly be reached from aws dahsboard directly by going to aws dahsboard>Systems Manager> Parameter store and then you can save your credentials directly also you can see what’s been stored inside it.
Alternatively ,you can store your credentials using below command-
aws ssm put-parameter --name "/gmail/userID" --value "<your email ID>" --type SecureString
aws ssm put-parameter --name "/gmail/password" --value "<yourPassword>" --type SecureString
You can get these credentials using command also like below-
aws ssm get-parameter --name "/gmail/userID" --with-decryption
aws ssm get-parameter --name "/gmail/password" --with-decryption
we’ll continue this in next post. So stay tuned…