How to integrate Dialogflow into your Flutter app

This is not a tutorial. But I want to provide some pointers because it seems people are not clear on an important aspect of Dialogflow integrations.

I got this question on YouTube:

The 4 Layers of a Dialogflow bot

I have explained the concept of the 4 layers in a Dialogflow bot before.

In the case of a Dialogflow + Flutter (mobile app) integration, you are responsible for both the middleware layer AND the UI layer. This is what makes it so complex (or at least so much more work).

How to create the integration

So here is what you need to do to integrate Dialogflow into your Flutter app:

1 Create the middleware code

The middleware code is responsible for forwarding the message from your Flutter app to your Dialogflow agent using the REST API. It can in theory be part of the Flutter app itself, but best practices usually dictate that you put the middleware code on a server so you don’t store the client secret JSON file on the local device.

2 Decide on the UI components which you will support

When you get started, you will probably be very happy to just see text messages going back and forth. 🙂

But eventually, you will probably want to add rich responses such as buttons, clickable hyperlinks, cards and other such rich responses.

As it turns out, Dialogflow doesn’t provide any defaults on this front. But you can get inspiration from a few channels to see the kind of rich responses which are useful in practice.

The Dialogflow Messenger integration supports buttons, clickable links, accordion etc.

The Google Assistant integration supports a carousel control.

But probably the best source of inspiration (IMO) is Zoho’s Dialogflow integration. They support a lot of rich responses, but more importantly, the rich responses are also very well implemented in practice.

In fact, they very neatly split the rich responses into input cards (user can interact and provide an “input”) and display cards (doesn’t support inputs, just show a response).

It goes without saying that this step also involves coming up with a suitable JSON payload format. For example, the JSON payload format for the multiple select option in Zobot (Zoho’s Dialogflow integration) looks like this:

{
  "platform": "ZOHOSALESIQ",
  "replies": [
      "We have the following loungers stacked up in our store"
    ],
  "input": {
    "type": "multiple-select",
    "options": [
     "Classic",   
     "Chalse",
     "Recliner",
     "Ploolside",
     "Wing"
    ],
    "max_selection": "3"
  }
}Code language: JSON / JSON with Comments (json)

And you will have to add this JSON into the Custom Payload textarea inside your Dialogflow intent.

Usually, your middleware code should be able to parse this JSON format and send it to your Flutter app so your app can then render the appropriate widget (see next point).

3 Write the code to handle user interaction with your UI Component

This is likely to be the most challenging aspect of your integration.

Let us consider the multiple select option used in Zobots.

Notice that you will first select multiple options by using the checkboxes. And then there is a second step where you need to also click on the Confirm button (can you guess why this is?) before the options are sent across to your Dialogflow bot.

Now let us suppose you want to implement something similar. So in the Flutter widget that you create, you need to have all these things – rendering multiple options as checkboxes, having a confirmation button at the bottom of the widget, and finally, once the user clicks on the Confirm button, you need to read the list of options which were selected and construct the text (Zoho sends the list of values as a simple comma separated string) matching the selected options.

Summary

Building a Dialogflow integration for a Flutter bot which can also support rich responses is a fairly complex task. You should be prepared to invest a fair amount of developer time into such a project.