WhatsApp Business API | Integration for Dialogflow Chatbot

Hi there!

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

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 yarn install

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".
  • TYNTEC_BASE_URL="https://api.tyntec.com/conversations/v3"
  • PROJECT_ID="Your-dialogflow-projectid".
  • 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.

1. From the api-collection/conversations/v3 directory, import the Conversations V3.0.postman_collection.json into 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.

Configure webhook in Postman

 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:

npm start

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.
A response in your WhatsApp

Congratulations, you have integrated a custom Dialogflow agent into Whatsapp!

More?

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.