Thumbnail
WhatsApp Business API | Integration for Dialogflow
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.

Introduction

This article explains how to do the following:

  • Create and personalize an Intelligent Agent
  • Connect Dialogflow to Example Application
  • Integrate the Agent into WhatsApp

This article does not explain how to integrate the Agent into WhatsApp API. This article provides detailed information on using the Dialogflow application, with examples, and a Training Section. To learn how to implement this knowledge by creating a real WhatsApp chatbot, see Building an Application with the tyntec API for WhatsApp.

  • If you create all the content from the following examples, you can use it later in the Training Section.
  • If you are familiar with Dialogflow, you can download Fashion.zip with all the parameters from the following examples, and skip to the Training Section.

Example of the conversation with the Dialogflow bot in WhatsApp:

Dialogflow is a Google Cloud application and does not require any installation.

Prerequisites

Important! Dialogflow is a Google application, and so you can only use Dialogflow if you have a Google Account. To create a Google Account, go to https://accounts.google.com/signup/

  • tyntec account and API key

  • WhatsApp Business Account (WABA) with an activated phone number

  • tyntec approved in your Facebook Business Manager account

  • WhatsApp Message Templates submitted and approved for initiating a conversation

Create a Dialogflow Account

To create personalized agents, create a free Dialogflow account.


Follow these steps:

  1. Open web browser

  2. Go to https://dialogflow.cloud.google.com/

  3. Select Sign-in with Google
    A pop-up window appears

  4. Add an email address, or telephone number that you use to sign into your Google Account, and select Next

  5. Add your Google Account password, then select Next

  6. Read the terms of service and privacy policies, then select Allow

  7. Select the desired country or territory from the drop-down list

  8. Select the checkbox “Yes, I have read and accept the agreement”, and then select Accept

You created a Dialogflow Account.
For more information, see Dialogflow.

Create and Personalize an Agent

After you have created your Dialogflow Account, create a unique Agent that covers your project’s needs.

 

Follow these steps:

  1. In Dialogflow, select Create Agent

  2. Add the name of the Agent
    Tip: Pick a name that describes what your Agent covers (for example, Fashion).

  3. Select your preferred default language from the drop-down list

  4. Select your preferred default time zone from the drop-down list

  5. Select Create
    A new page appears

You created an Agent.

Create an Entity

Personalize the Agent by creating an entity.

 

Follow these steps:

  1. Select Entities from the hamburger menu on the top left

  2. Select Create Entity or Create the first one
    A new page appears

  3. Add an entity name (for example, popular_category), and then select Save

  4. Select the checkbox Define synonyms

  5. Select Click here to edit entry, and then add value and synonyms
    Important! The first synonym is added automatically and it is the same as the value. Do not delete the first synonym.

  6. (Optional) Select the checkboxes Regexp entity, Allow automated expansion, or Fuzzy matching
    For more information, see the context help next to each checkbox name

  7. Repeat step 5 to create more values and synonyms

  8. Repeat steps 1 to 3 to create more Entities

 

Examples of Entities popular_category, product and product_size and their values and synonyms:

Create an Intent

1. To create an intent, select Intents from the hamburger menu on the top left

2. Select Create intent or Create the first one
A new page appears

3. Add an intent name, and then select Save

4. (Optional) Select Contexts, and then add input and output context

5. (Optional) Select Events, and then add events

6. Select Training phrases, and then add expressions that will trigger the intent
An example of Training phrases:

7. Select Action and parameters, and then add an action name (for example, fashion.trends)

8. Select the checkbox Required

9. Select the entity you created

10. Add a name of the parameter
Tip: Type “@”, and then type the first letter of your entity name. A drop-down list appears. Select the correct parameter from the drop-down list.

Note: If you add a parameter name before selecting entity, the following error message appears: Entity is required for required params: <name>.

11. Add a value
Note: There will be $Category in later examples.
 

12. (Optional) Select the checkbox IS List

13. Select Prompts from the Action and parameters table, and then add questions that the agent will ask the user
An example of Action and parameters:

An example of Prompts:

14. Select Responses, and then add text responses that the Agent will deliver to users

Training Section

An Example of a Personalized Agent

As training, personalize the Dialogflow Agent. You need the personalized agent to use the Example Application

Create an Intent for Checking the Product Availability

Create a new Intent and name it Product Availability. To make the Agent answer product availability related questions, personalize Product Availability Intent.

 

Follow these steps:

1. Create Entities and Intents from examples in the previous section

2. Select Contexts and add selected_product to Add input context table

3. Add selected_product to Add output context table

4. Add the following Action and parameters, and then, select the Required checkboxes: 

  • product
  • color
  • popular_category
  • size

Note: The sys.color is a system entity and it is present by default in Dialogflow.

 

5. Add the following Training phrases

  • Do you have a red shirt?
  • Is the straw hat available in blue?
  • I would like to buy large black sports shoes
  • Medium black cowboy hat

Note: The phrases change background colors based on the Entities.

Tip: Try more phrases - use the words from Entities’ values and synonyms.

 

6. Add the following responses to the Text Response table

  • $size
  • $color
  • $product is
  • $availability
  • $popular_category

You created a personalized Product Availability intent. Try talking to the bot.​​

Create a Price Check Intent

Create a new intent and name it Price Checks. To make an Agent answer product prices related questions, personalize the Price Checks intent.

 

Follow these steps:

1. Add the following Training phrases:

  • How much is the cowboy hat?
  • What is the price of sports shoes?
  • How much the plaid shirt costs?
  • How much?
  • How much is it?

2. Select Action and parameters, and then add product.price as the action’s name

3. Add a product parameter, a @product entity and a $product value to the Action and parameters table

4. Select the checkbox Required

5. Select Responses, and then add the following text response:
The price of the $product is $price Euro

You created a Price Check Intent.

To check if the settings are correct, select Try it now in the right top corner. Add one of the training phrases, and then press Enter on your keyboard. The default response is the response you added in step 3. If some information in the question is missing (for example, a specified product), the bot asks you for the missing information.

Example Application

Before integrating the personalized Agent into WhatsApp Business API, set up our Example Application. It is possible to use any programming language. JavaScript using Node.js with Express Server is used for the following example.

Prerequisites

Note 
The example code is available here: 
https://github.com/tyntec/tyntec-whatsapp-dialogflow-demo

What is going on in detail

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!);

 

2. The Whatsapp message comes with many parameters, here are the parameters from the example:

  • from - phone number of the sender
  • to - phone number of the recipient
  • content.text - body of the message
  • allRequiredParamsPresent - information whether the intent was fulfilled or not

 

3. Dialogflow bot is capable of holding a conversation context across several messages using sessions. The session connects multiple questions together (for example, ask about a product in the first question, about a color in the second question, and about a price in third question. Dialogflow bot answers with a product with the specific color and price). Create a session to start a conversation with a Dialogflow bot. The session can contain several questions, the answers to which Dialogflow uses to produce the desired outcome. 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);

 

4. 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 (https://cloud.google.com/dialogflow/docs/reference/rest/v2/projects.agent.sessions/detectIntent), 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). ​​​​​

 

5. 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 Dialogflow bot to send them information about specific products. This was a short example 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,
      });
    }
}

6. 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 statuses.

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.

 

7. 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 } });
}

Feel free to use our example and even change it or incorporate it into your own application. You can find it here: https://github.com/tyntec/tyntec-whatsapp-dialogflow-demo

As mentioned earlier, setting up WhatsApp Business API is not part of this article. For integrating the personalized Agent into WhatsApp Business API, see Building an Application with the tyntec API for WhatsApp.