How to integrate Dialogflow with your Ionic mobile app

This tutorial also applies to other JavaScript frameworks such as React, Angular, Vue etc. This applies to both Dialogflow ES and Dialogflow CX bots.

There are three steps to build this integration. Before you read the rest of this article, read about the four layers of a Dialogflow chatbot.

UI layer code

In your Ionic mobile app, add a textbox where the user will type their query. When the user presses the Enter key or presses a Send button, you should submit the user’s message to a server which will be running the integration/middleware layer code.

Middleware layer code

In your integration layer, you will relay the user’s message to your Dialogflow agent. This is just a fancy way of saying that you will call Dialogflow’s REST API – specifically you will be calling the detectIntent method and you will pass the user’s query. I provide Python based code samples for both Dialogflow ES and Dialogflow CX in my Dialogflow REST API course.

The most important thing to note here: you need to make sure that for a given user conversation, you maintain the same session ID. This is quite specific to your requirements, but the best practice is to use a login-id as the session ID if all your users are already authenticated. If you are not very clear about how Dialogflow sessions work, check out my Dialogflow Sessions course. While the course covers only ES, the concept is basically the same for a CX bot as well.

Render the response

Depending on whether you are using rich responses like buttons, hyperlinks etc you will also have to write some code to render the response from Dialogflow in the appropriate format.

Unless you have some very complex requirements, most of the time these rich responses are going to be buttons, clickable links and information cards. You can use some kind of enhanced Markdown to write these responses inside your Dialogflow intent responses and transform it server-side into a format which will render properly in your Ionic app.