Using Flow XO with Dialogflow

A great way to complement Flow XO is with Dialogflow (formerly API.AI), a service that can help you create natural language user interfaces. You can use Dialogflow with Flow XO to give your users a conversational experience. With this integration, you’ll be able to match natural language queries and even train your bot.

If you don’t already have a free Flow XO account, get yours now.

In this tutorial, you’ll create a bot that lets users view special offers for holidays. You’ll use Dialogflow to match conversational user input. This tutorial assumes that you already understand the basics of Dialogflow, but would like to learn how to use it with Flow XO. So, in this article, you’ll learn when and how to build a flow that integrates both services.

Why use Dialogflow with Flow XO?

Flow XO already has features that can account for conversational input. For example, you can use categories to group words or phrases that your bot receives from users, and have your bot respond accordingly. You can also use Flow XO Analytics to view the Top Messages that your bot receives, and improve your messaging based on that. So, when is it useful to integrate Dialogflow?

Dialogflow is great to use with Flow XO when you need:

• NLP (natural language processing): With Dialogflow, your users can interact with your bot using natural sentences and phrases. Dialogflow can then match the input with a command and give users predetermined responses.
• To understand a user’s intent: You can use Dialogflow to map synonyms with programmatic entities. From there, you can infer the user’s intent, and match the intent to an action.
• Machine learning: Dialogflow offers the ability to train your agent with machine learning. This is a useful feature for handling user input that your bot is not yet programmed to respond to. You can then analyze conversation logs and improve intents.

In this tutorial, you’ll learn how you can integrate these features from Dialogflow to build an intuitive bot for your users with Flow XO.

Note: There are other services that are similar to Dialogflow, like wit.ai and luis.ai. If you’d like, you can use these with Flow XO instead.

Set up Dialogflow

To create an integrated bot, the first step is to set up an agent in Dialogflow. If you need help using Dialogflow, please see the Getting Started guide there.

Once you have an agent, you’ll set intents in Dialogflow. These are natural language expressions that people might use to talk to your bot. For example, users looking for holiday deals might say things like:

• “show me discounts”
• “I’d like to see deals”
• “holiday offers”
• “look at special offers”

Plug these phrases into your Dialogflow agent as intents. Later, in Flow XO, you’ll create a trigger that will relay any user input to Dialogflow.

Then, you’ll set actions to ask followup questions. For this tutorial, set up Dialogflow to ask:

• Which type of offers would you like to see? Long haul or short haul?
• Which deals would you prefer? Summer or winter?

You can set up Dialogflow to read natural language responses to these questions, then store it as standardized output.

Integrate Dialogflow with Flow XO

Now that you’ve set up natural language queries in Dialogflow, you can access them from Flow XO. In Flow XO, your bot can read and send the questions you added to your agent in Dialogflow. Then, you can send the user’s answer to Dialogflow and receive a follow-up question.

Follow these steps to integrate Flow XO and Dialogflow.

1. Create a Catch-All Flow

In Flow XO, create a catch-all flow that will take any input from the user. This flexible input option will help you teach Dialogflow what to expect from users. To set this up:

1. On your Flows page, click + New Flow. Select Blank Flow, then give your new flow a name.
2. Click + to add a trigger. Select Bot → Catch-all, click Next.
3. Finish and save the trigger.

The Catch-all trigger will start this flow with any word or phrase from the user.

2. Make an HTTP Request

The next step is to send the user’s query to Dialogflow. For this step, you’ll create an HTTP Request action in Flow XO. Here’s how to do this:

1. In your flow, click + to add an action below your trigger. Select Webhook & HTTP → Make an HTTP Request. Then click Next.
2. Complete the following fields under HTTP Request Settings. See below for an explanation of each field:

Request URL: Paste the URL https://api.api.ai/v1/query in this field. This will connect your bot to Dialogflow.

Method: Select POST to indicate that you are sending data to the URL.

Content Type: Select Raw Body. You’ll enter your data as a complete query.

Body: This field contains the input that your are sending to Dialogflow. The platform accepts input in JSON format. Here is what the JSON code contains:

• query: This is the message that the user sent to your bot. It’s the output from your Catch-all trigger. To access the trigger output here, type {{ in the Body. Find your trigger in the drop-down, then select Message below that:

• lang: The code for the language that the user and your bot are chatting in.
• sessionId: For this field, you can use any ID that will stay the same for each user, that is also unique to the user (User ID is perfect of course). Similar to the query, you can access this by typing {{ in the Body. Find your trigger in the drop-down, then select User ID.

Headers: This is other data that you are sending to Dialogflow that is separate from your query.

• Authorization: Paste your Dialogflow key in this field. You can find it on Dialogflow under the settings for your Agent.
• content-type: Indicates the type of data you are sending. You can leave out this field and Flow XO will add it for you.

When you’re done, click Next. Finish and save your HTTP Request action. Now that you’ve connected your Flow XO bot, you can use the actions you set up in Dialogflow.

3. Ask a Question from Your Dialogflow Agent

When Dialogflow resolves the query from the user, it will send back the first action you set up there. Remember that the first action was to ask the user which type of offers that they want to see — long haul or short haul.

The data sent from Dialogflow will look something like this:

Data
{
  "id": "XXXXXXX",
  "timestamp": "2017-06-22T09:12:26.536Z",
  "lang": "en",
  "result": {
    "source": "agent",
    "resolvedQuery": "look at special offers",
    "speech": "Which type of offers would you like to see? Long haul or short haul?",
    "action": "Follow",
    "parameters": {
      "OfferType": "",
      "Option": ""
    },
    …
  "sessionId": "XXXXXXX"
}

Your Dialogflow log may look a bit different, depending on how you set up your intents and actions. The important thing is the value for speech. This is the question you want to have your bot send to the user.

You can access this value in Flow XO. To set this up:

1. In your flow, click + to add an action. Select Bot → Ask a Question, and click Next.
2. In the Question field, have your bot read the speech value it received from Dialogflow. Type {{ and find your HTTP Request action in the drop-down menu. Select Data {} below that:

You should now see the Data Key popup. This is where you’ll tell your bot what to read in the JSON output from Dialogflow. In the log above, speech is nested under result, which is nested under data. In Flow XO, you’ll use underscores to indicate nested keys:

You can read more about Data Outputs in the Flow XO Help Center.

Your question should look like this:

Click Next, then finish and save the action.

Now your bot will read the speech key from Dialogflow, and relay that question to the user.

4. Set an Attribute

Now that you’ve asked your question, you’ll want to store the user’s response in an attribute so that you can access it later.

Here’s how to do this in Flow XO:

1. In your flow, click + to add an action. Select Attributes → Set an Attribute, then click Next.
2. In the Settings window, click + Add to add an attribute.
3. In the Name attribute, you can reuse the question from Dialogflow. For example: {{make_a_http_request.data__result__speech}}
4. In the Value attribute, use the output from your Ask a Question action. For example: {{option_longshort_haul.parsed_answer}}

Your attribute should look like this:

Click Next, then finish and save the action.

You’ll be able to access the user’s answer in filters and other actions, and even use it in other flows.

5. Send the Response to Dialogflow

Now that you have the answer to your first question, you’ll need to send the user’s response back to Dialogflow. Depending on how you set up your actions there, Dialogflow can use the response to send your followup question.

Follow these steps to send the user’s response to Dialogflow:

1. In your flow, click + to add an action. Select Webhook & HTTP → Make an HTTP Request, and click Next.
2. The setup for this HTTP request is similar to the request you made earlier. But, instead of sending the trigger output, you’ll send the output from your Ask a Question action.

The HTTP Request should look something like this:

Now you’re ready to receive your followup question from Dialogflow. Repeat steps 3–5 to ask the user your follow-up question, store the second response as an attribute, then send the response back to Dialogflow in an HTTP Request.

Finally, you might use your stored attributes in a filter that triggers another flow.

Conclusion

You now have a Flow XO bot that is integrated with Dialogflow. From here, you might want to experiment with other natural language features and logic on Dialogflow, and use them with your Flow XO bot. With Flow XO, you have the flexibility to customize and improve how your users interact with your bot.

Thank you for Flow XO user Talvinder Singh for his valued input in preparing this tutorial! Talvinder is an entrepreneur and independent product consultant who may be available to consult on your project.

Want to find out more? We have full documentation on Flow XO over at our Help Center, or get help & advice from other Flow XO users on the Community Site.