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

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.

<— End of article —>

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
"Much clearer than the official documentation to be honest"

Thanks a lot for the advice (of buying and following your videos)! They helped a lot indeed. Everything is very clear when you explain, much clearer than the official documentation to be honest 🙂

Neuraz T
Review for Learn Dialogflow CX
"I will strongly recommend this course because even I can learn how to design chatbot (no programming background)"

I think Aravind really did a great job to introduce dialogflow to people like me, without programming background. He organizes his course in very clear manner since I have been a college professor for 20 years. It is very easy for me to recognize how great Aravind’s course is! Very use-friend and very easy to follow. He doesn’t have any strong accent when he gives the lectures. It is so easy for me to understand. Really appreciate it.

Yes, I will strongly recommend this course because even I can learn how to design chatbot (no programming background) after studying Avarind’s course, you definitely can!

Ann Cai
Review for Learn Dialogflow ES

Similar Posts