Integrating WhatsApp Business API with Dialogflow

Integrating WhatsApp Business API with Dialogflow

Personalized Dialogflow Assistant

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

For each Assistant, you can define multiple end-user’s intentions called Intents. When an end-user writes something, Dialogflow matches the expression to the most suitable Intent, and your Assistant responds according to your defined response for that intent.

In order to test this you can just download the following example and import it to a pre-created assistant in Dialogflow:

https://github.com/Mindbehind/mb-whatsapp-dialogflow-demo/blob/master/Fashion.zip

This example includes:

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

Prerequisites for integration

  • MindBehind WhatsApp account and MB-API-key
  • WhatsApp Business Account (aka WABA) with an activated phone number

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

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

Set up the Personalized Agent in API

Expose an HTTP Endpoint

In order to receive WhatsApp messages, expose an HTTP endpoint implementing the POST method. Set this endpoint as a webhook URL in your MindBehind WhatsApp Account (see https://www.mindbehind.com/knowledge/whatsapp-api-webhook)

On the aforementioned code example https://github.com/Mindbehind/mb-whatsapp-dialogflow-demo/blob/master/src/index.js you will see that we have created an Express server to listen to the port defined in the config on the endpoint:

POST /callback/message

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 on whether the intent was fulfilled or not

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 in https://github.com/Mindbehind/mb-whatsapp-dialogflow-demo/blob/master/src/index.js inside messageHandler function, you will find see a screenshot demonstrating the start of that function below.

To detect the intent from a message, use a specifically formatted query in the conversation with the Dialogflow bot as you can see in the same function. 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). 

intent-png

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:

intentresult-png

TrendsHandler is the function that creates a specific WhatsApp message that reacts to Fashion Trends intent. If the intent has not been 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. 

When the intent is fulfilled, the conversation is over; we have 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 data from your own database, of course.

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 MindBehind account API key (MB-API-KEY).

You can check how we wrote communication functions inside the next file:

https://github.com/Mindbehind/mb-whatsapp-dialogflow-demo/blob/master/src/mbProvider.js

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

    • Related Articles

    • WhatsApp Business API: How to Migrate Your Phone Number from WhatsApp Business APP

      It's possible to migrate to WhatsApp Business API from WhatsApp Business APP. Here, you can find all the details that Facebook provides. This action is irreversible. The WhatsApp Business App that you own already cannot be used once migrated to ...
    • WhatsApp Cloud API

      Currently, MindBehind has support for two types of WhatsApp accounts. On-Prem and Cloud API. Cloud API is a feature where Meta will be storing the WhatsApp account details and numbers, for user interested in using Cloud API number kindly register on ...
    • Business API: How to Edit WhatsApp Profile Details

      While using the WhatsApp Business API, you can edit the profile photo, business description, industry, website, and email address information that will be displayed to your customers on your business phone number's WhatsApp profile. We have listed ...
    • Authorizing requests to WhatsApp API

      Introduction Every request to the WhatsApp API needs to be authorized using an API Key authentication. Adding the MB-API-KEY in the header with your unique API Key as a value is enough to gain permission. Every API Key is connected with one phone ...
    • Use of WhatsApp sandbox API

      We provide a developer-friendly test environment, for anyone who wants to check out the usage of our WhatsApp API. The WhatsApp API allows for direct-like access to the WhatsApp Business API. Sandbox Base Path: https://waba-sandbox.mindbehind.com ...