icon_whatsapp_business_docs_center_33px_white_
WhatsApp Business API | Integration for Dialogflow Chatbot
New

Provide conversational experiences for your customers on WhatsApp by using the natural language processing power of Google's Dialogflow with tyntec's API for WhatsApp. Follow this tutorial to create a powerful chatbot with a unique personality that acts like a human.

Chatbot example

Example of how your chatbot can make a conversation with a customer using WhatsApp

This tutorial explains how to:

  • Connect Dialogflow to Example Application
  • Integrate the Agent into WhatsApp
dialogflow_integration_whatsapp_conversation_example

Personalized Dialogflow Agent

Dialogflow application is a Google framework that provides NLP / NLU (Natural Language Processing / Natural Language Understanding). Dialogflow enables you to create an Intelligent Agent and to manage what the Agent understands and how it responds. 

For each Agent, you can define multiple end-user’s intentions called Intents. When an end-user writes something, Dialogflow matches the expression to the best Intent of your agent. Combined intents can handle a complex conversation.

When the Intent is detected, Dialogflow decides how to respond. You can set up multiple predefined responses called Actions.

Let’s create a specific Agent that we will use later in our application via API. If you are familiar with Dialogflow, you can just download Fashion.zip with all Intents already created. If  you import the zip file into your Dialogflow account, you get an agent with the following configurations:

  • Dialogflow Agent for fashion industry
  • Entities: Popular Category, Product and Product Size
  • Intents with a single appropriate Action: Default Fallback, Fashion Trends, Price Check and Product Availability

Tip: To learn how to create a real WhatsApp chatbot, see Building an Application with the tyntec API for WhatsApp.

If you want to try personalizing the agent yourself, see Dialogflow Tutorial.

Example Application

After creating the personalized agent, you can now connect to it using Dialogflow API. The real magic is just about to happen - you only need to go through a few lines of code in our Example Application.

Note: It is possible to use any programming language. We used JavaScript with Node.js with Express Server for the following example.

Prerequisites

Important: Ensure that Express Server, Axios, and Dialogflow client from npm was installed automatically with “npm install”

  • tyntec account and API key
  • WhatsApp Business Account (aka WABA) with an activated phone number
  • tyntec authorized in your Facebook Business Manager account
  • WhatsApp Message Templates submitted and approved for initiating a conversation (aka the Templates)

Note: You can check the complete code here: https://github.com/tyntec/tyntec-whatsapp-dialogflow-demo

Set up the Personalized Agent in API

Expose an HTTP Endpoint

To receive WhatsApp messages, expose an HTTP endpoint implementing POST method. Set this endpoint as a webhook URL in your tyntec Account (see Building an Application with the tyntec API for WhatsApp, section Webhook URL)

```
const express = require(‘express’);
const app = express();
app.use(express.json());
app.post(/callback/message’, messageHandler);
app.listen(12345, () => console.log(‘Server listening on port 12345!);
```

The Whatsapp message comes with many parameters, but all we need here are these four:

1. From
phone number of the sender

2. To
phone number of the recipient

3. Content.text
the body of the message

4. allRequiredParamsPresent
information whether the intent was fulfilled or not

Connect Multiple Questions with Sessions

The Dialogflow chatbot is capable of holding a conversation context across several messages using sessions. The session connects multiple questions together.

Example
Ask about a product in the first question, about a color in the second question, and about a price in the third question. Dialogflow bot answers with a product with a specific color and price.

Create a Session

Create a session to start a conversation with the Dialogflow chatbot. The session can contain several questions, the answers to which Dialogflow uses to produce the desired outcome. A session identifier can be any string. We chose the sender’s phone number in messageHandler:

```
const dialogflow = require(‘dialogflow’);
 
const messageHandler = async (req, res) => {
  const sessionClient = new dialogflow.SessionsClient();
  const sessionPath = sessionClient.sessionPath(‘your-project-id’, req.body.from);
```

To detect the intent from the message, use a specifically formatted query in the conversation with the Dialogflow bot:

```
  const request = {
      session: sessionPath,
      queryInput: {
        text: {
          text: req.body.content.text,
          languageCode: 'en-US',
        },
      },
    };
 
   const result = await sessionClient.detectIntent(request);
```

As you can see in detectIntent detailed documentation (DetectIntent Documentation), the result of this query is a JSON with many different fields. One of the fields is an “action”. The field contains the name of the action (created in Dialogflow in the previous part of this tutorial). 

Create a Chatbot Reaction

You can vary your next steps based on what action has been detected. In our example, your action “fashion.trends” has been detected and this is how you can react:

```
  switch (result[0].queryResult.action) {
      case 'fashion.trends':
        response = trendsHandler(result[0]);
        break;}
```

TrendsHandler is the function that creates a specific WhatsApp message that reacts to Fashion Trends intent. If the intent was not fulfilled yet, it means that the goal hasn’t been reached and the conversation continues, probably because the user needs to add some more info. We do that using our own sendWhatsappTextMessage function:

\```
const { products } = require('./mocks');
 
const trendsHandler = response => {
    await whatsappClient.sendWhatsappTextMessage({    
      from: <our_number>,
      to: <recipient_number>,
      text: response.queryResult.fulfillmentText
    });
  ...
```

When the intent is fulfilled, the conversation is over and we reached the goal. In this case, the user successfully asked the chatbot to send them information about specific products. 

This was a short example of how to do that. There was also a face database mockup in our example. You have to get your real product from your own database, of course:

```
…
 if (response.queryResult.allRequiredParamsPresent) {
   const pictures = products
        .filter(product => product.category === response.queryResult.parameters.fields.Category.stringValue)
        .map(product => ({
          caption: product.name,
          type: 'image',
          url: product.picture,
        })),
  for (const picture of pictures) {
      await whatsappClient.sendWhatsappImage({
        from: req.body.to,
        to: req.body.from,
        media: picture,
      });
    }
}
 
```

Communication via Axios HTTP Client

See how we communicate with Whatsapp API in our sendWhatsappTextMessage function. We use Axios, a promise-based HTTP client, that will handle all around the API calls themselves, from parsing JSONs to handle HTTP status.

Note: For communication with WhatsApp API, you will require a tyntec account API key.

For more information about tyntec account and API key, see Building an Application with the tyntec API for WhatsApp.

Specify which channel you want to use, in this case “whatsapp”:
 

```
	const axios = require('axios');
const config = require('../config.json');
 
const sendWhatsappTextMessage = async params => {
  const request = {
    to: params.to,
    channels: ['whatsapp'],
    whatsapp: {
      from: params.from,
      contentType: 'text',
      text: params.text,
    },
  };
 
  return axios.post(`your_base_url/messages`, request, { headers: { apikey: your_tyntec_api_key } });
}
```

Tip: Feel free to use our example and even change it or incorporate it into your own application. You can find it here: Dialogflow demo

Note: Setting up WhatsApp Business API is not part of this tutorial. For integrating the personalized Agent into WhatsApp Business API, see Building an Application with the tyntec API for WhatsApp.

Congratulations, you have created your first Fashion Chatbot! Try initiating the conversation with a question, for example: “What are the trends?”