Dialogflow Tips for Non Programmers
Better Dialogflow ES Bots
REST API
Webhooks
Slot filling
Context Lifespan
Conversation Design
Bot frameworks
Mobile
Debugging
Machine Learning

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.


Dialogflow Tips for Non-Programmers

Avoid these 4 Dialogflow ES features

No code power tools to speed up the Dialogflow bot building process

Should non-programmers start with Dialogflow ES or Dialogflow CX?

Airtable vs Google Sheets: which is a better database for Dialogflow?
>