WhatsApp Business API | Integration for Dialogflow Chatbot
Do you have Chatbots created in Google’s Dialogflow? Would you like to get more out of your bots by integrating them with WhatsApp? Thanks to the tyntec Conversations API, it’ll be possible to integrate Google’s Dialogflow with WhatsApp Business.
Following this tutorial, you’ll be able to help your Chatbots be where your customers are.
You Will Need
- Your tyntec account and API key.
- Your tyntec approved WABA phone number.
- Your approved WhatsApp Message Template.
- Your Testing Dialogflow Agent with intents. In this tutorial, we use our Fashion demo.
- Your Dialogflow service account credentials for the testing Agent
- An ngrok account with the binary installed and authorized.
Step One: Get example application ready
We’ve prepared a sample Node.js app for your quick start with Dialogflow integration. Let’s look at what the code does. You will notice that the code is in several directories:
- api/tyntec.js calls to tyntec Conversations API
- config/appConfig.js sets the environment variables
- utils/mocks.js holds mock products for the testing Fashion Agent
- intents/availibilityIntent.js handles questions about availability
- intents/priceIntent.js answers queries about product prices
- intents/trendsIntent.js handles questions about trends
- Index.js ties server logic together and handles routing
Let’s just quickly get your app set:
1. Clone the api-sample repository and go to the wa-integrations/dialogflow directory.
2. Install dependencies (and the nodemon module if you don’t have it yet):
npm install npm install nodemon
Note: If you are using yarn, the run
3. Copy the file .env-example to .env and set environment variables in .env:
- PORT=3000: Tells you on which specific port the application runs.
- DEBUG=1: This allows the app to run as intended.
- TYNTEC_API_KEY=”Your tyntec API key“.
- GOOGLE_APPLICATION_CREDENTIALS: ./dialogflowCredentials.json.
4. Get your Dialogflow credentials and save them in the dialogflow folder as dialogflowCredentials.json.
5. Run ngrok in a terminal to expose your local server on the internet:
path/to/ngrok ngrok http 3000
6. Copy the HTTPS address. You will need it later.
Step Two: Subscribe your webhook in Conversations API
Let the tyntec Conversations API know where to deliver WhatsApp messages from customers. You’re going to subscribe to your webhook via an API call in Postman.
2. Authorize Postman with your tyntec Conversations API key and your WABA number. Right-click the collection and select Edit. Then go to Variables and set the apiKey variable to your tyntec Conversations API key. Set also the wabaNumber variable to your WABA number.
3. Let’s set up the webhook! Open the WhatsApp folder. Inside, open the Configurations folder and select the Configure the callback for a specific number request and change the inboundMessageUrl in the body to the ngrok address + /callback/message endpoint on your server (for example, https://843fc8776770.ngrok.io/callback/message). This request will subscribe to your URL to incoming message events.
4. Hit the Send button. You should receive a 2xx status in the response if everything were okay.
Cool! Now your Inbox knows where to deliver WhatsApp messages from your customers.
Step Three: Test your app
The sample app will receive your message and send you back the response from Dialogflow. Now, it’s time to try it out!
1. Start by running your server. Go to the terminal and navigate to your dialogflow folder.
2. Inside your dialogflow folder, run the following command to start the server:
Tip: If you had gotten the TypeError: input.charCodeAt, you would have to check your dialogflowCredentials.json file and .env file to ensure you are accessing the right projectId.
- Grab your testing phone and go to your WhatsApp.
- Send yourself a message to your WABA number.
- Within seconds, you will receive an answer to your message.
Congratulations, you have integrated a custom Dialogflow agent into Whatsapp!
We would suggest replacing our simple agent with your Intelligent Agent using your Intents (end-users intentions) for each Agent and your Actions, which are predefined responses.
Dialogflow offers additional tunings to improve Agent responses like the context that provides additional Intent information for your Actions. For example, when your customer asks when the next fashion show is. Your agent cannot answer it correctly without time context as a human would.
The provided Fashion Agent contains the following configurations that you can use from the start:
- An Agent for the fashion industry.
- The Product, Product Size, and Popular Category entities.
- Single action Intents, such as Default Fallback, Fashion Trends, Price Check, and Product Availability.
When you are replacing the Agent, you need to update the products array inside mock.js. A good idea for automatization is to connect it with your product database, so your digital Agent always knows.
If you were using a different Agent configuration than the provided one, you would need to update intent responses in the Intents folder. They handle getting the requested data from the products array. For example, you can have apparelColorIntent.js to fetch apparel‘s color variations.