Home / DialogFlow ES / How to integrate Dialogflow with your Ionic mobile app
DialogFlow ES | REST API

How to integrate Dialogflow with your Ionic mobile app

Check out my courses Learn Dialogflow ES and Learn Dialogflow CX if you would like to learn Dialogflow in depth. 

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.

The BotFlo app gives you many tools which can speed up your Dialogflow bot development

This website contains affiliate links. See the disclosure page for more details. 
"The magic key I needed as a non-programmer"

The custom payload generator was the magic key I needed (as a non-programmer) to build a good demo with rich responses in DialogFlow Messenger. I've only used it for 30 minutes and am thrilled. I've spent hours trying to figure out some of the intricacies of DialogFlow on my own. Over and over, I kept coming back to Aravind's tutorials available on-line. I trust the other functionalities I learn to use in the app will save me additional time and heartburn.

- Kathleen R
Cofounder, gathrHealth
Check out my YouTube courses

Dialogflow CX Beginner Tutorial

Dialogflow ES vs CX using a Decision Tree Bot

Intro to NLU for technical non-programmers

Better Dialogflow ES Bots Using the CTFS Framework

Search the autogenerated transcripts of all my YouTube videos
In this free course, I provide some tips for managing large Dialogflow ES bots without compromising on accuracy.

Similar Posts