Dialogflow ES Messenger for Non-Programmers

Have a question about this course? Ask here | Check out course discounts and promotions

This course explains the basics of building Dialogflow ES Messenger bots.

While there is a small amount of code in this course (Python webhook for rich responses), the Dialogflow ES Messenger integration does not require much more than basic HTML skills and is fairly straight-forward for non-programmers after they watch the vides in this course.

Course Preview

Note: ✅ indicates a sample lesson. Except for sample lessons, preview links will only work after you enroll in the course

Total video duration: 2:16:29

Thumbnail	Excerpt
Embed Dialogflow Messenger into your website
Text Lesson	✅ Getting started with Dialogflow Messenger In this tutorial, I explain how to add a chatbot to your website using the Dialogflow Messenger integration. Create the Dialogflow intents First, create a new Dialogflow agent and add all your intents. If you are not familiar with Dialogflow ES, check out my step-by-step guide which also includes the agent ZIP files for each lesson. These agent ZIP files are like “templates” which you can import into your own Dialogflow account. Embed the chat widget into your website Once you have created all your intents, you can add it into your website.
Duration: 0:06:51	✅ Embed chat widget into your website (Autogenerated transcript) [00:00:00] Alright, so as we start this course, the first thing that we’re going to do is we start with a fresh Dialogflow agent. So I just created a Dialogflow agent now, it’s called df-messenger. And as you know, it already has these two intents inside, it gets created when you create the agent. What I’m going to do is I’m going to go to this Default Welcome intent. And notice that this has this welcome event. So in other words, whatever you are going to use as the starting intent, it has to be assigned this welcome event as you might know.
Duration: 0:04:38	✅ Have your bot initiate the conversation (Autogenerated transcript) [00:00:00] So one of the major issues that people have had with the Dialogflow’s previous web demo integration, it was called the one-click web demo integration, is that there was no way to have the web chat widget automatically pop a message to greet the user. Now these days, as you might have noticed around the web, that’s become a very common practice. So I just briefly went into this topic in the last video, but I’m going to go into this a little more detail this time.
Duration: 0:02:41	✅ Multiple messages per conversation turn (Autogenerated transcript) [00:00:00] Another feature which is missing from the one-click web demo integration is the ability to show multiple messages from the bot in a single conversation term. So what I mean by that is if you were to have a one-click web demo and let’s just open this to, alright, so you see that it actually shows this message welcome to the new and improved Dialogflow Messenger. Now what if I wanted to show an additional message and have that show below this one and that is before the user types anything.
HTML and CSS customizations
Text Lesson	✅ Dialogflow Messenger HTML and CSS customizations The big advantage of using the Dialogflow Messenger integration (instead of the 1-click web demo) is that it is possible to customize the behavior of the chat widget using HTML and CSS customizations. You can check out the different customizations available in the documentation, and I also go over them in more detail in the next few lessons. A demo bot which combines multiple HTML attributes The Dialogflow Messenger Demo bot that you saw in the first lesson actually incorporates multiple HTML attributes.
Duration: 0:04:05	✅ HTML Customizations – Required Attributes (Autogenerated transcript) [00:00:00] So when people are creating website chatbots, one of the important requirements that they need is an ability to skin the look and feel. That is they want to have a way to customize the appearance of the chat widget and Dialogflow Messenger provides a couple of options to do that. It provides some HTML based customizations and also some CSS based customizations. So let us first look at the HTML customizations and what you notice is that in the HTML snippet that you add to the code like when you go back to the WebStorm you see that you can see this tag the df messenger tag
Duration: 0:06:27	✅ HTML customizations – optional attributes (Autogenerated transcript) [00:00:00] Alright, so now that we have seen the required HTML parameters, let’s take a look at the optional parameters that you can use to customize your chat widget. And what I’m going to do is I’m going to go over the basic three parameters which are sort of like things which you can just set directly in the HTML without having to put a lot of thought. So those are the chat icon and which actually shows which is a URL to the icon that you want to appear in the chat.
Duration: 0:03:49	✅ Intent Attribute (Autogenerated transcript) [00:00:00] In this video, I’m going to explain this intent attribute that you’re setting inside the df messenger tag. In the previous video, we sort of went over this concept very quickly. So it’s possible that you didn’t fully understand like what it represents and what you can do with the tag. So usually the welcome event is what automatically fires in Dialogflow when you don’t have a custom welcome event set in your agent.
Duration: 0:08:51	✅ Intent Attribute Scenarios (Autogenerated transcript) [00:00:00] All right, so there are a few more things that I want to talk about when it comes to the intent attribute inside the df messenger tag. So let’s take a look at the df messenger welcome intent we had before and notice that you have the welcome event set inside that intent. So what I’m going to do is I’m going to show you in the integrations pane, if you were to go and take a look at the auto generated code snippet.
Duration: 0:08:01	Session ID Attribute Part 1 (Autogenerated transcript) [00:00:00] The next optional parameter that we are going to study is this parameter called Session ID. Now, I am going to first of all point out that the Session ID as a concept is quite a deep concept. I even have a course about that. I have an entire course about the concept of the session in Dialogflow. It is called Dialogflow Sessions. You can check it out. You can search for it on my course website. But the important thing is that I am not going to actually explain how Dialogflow Sessions work.
Duration: 0:03:29	Session ID Attribute Part 2 (Autogenerated transcript) [00:00:00] Alright, so let’s see what happens if we don’t have the session ID attribute inside the messenger tag and we have everything else is identical. So let’s go ahead and delete the session ID from both pages. I’m going to make a small change where I’m going to add a link to the other page from this page itself. Go to page 2 and I’m going to add a Ahref equals tag. Alright, let’s do that. Okay, so we have this page 1
Duration: 0:02:25	User ID Attribute (Autogenerated transcript) [00:00:00] So the final parameter, which is the optional user ID parameter in the HTML customization, is something that you would use for more advanced bots. And of course, as it says here, it is used to track a user across sessions. Now remember that the session ID is used to track a user’s messages inside of a single session, but the user ID is more useful to track a user across multiple sessions. Now imagine if you have a web application and you have a user who logs in to your web app.
Duration: 0:02:29	CSS customizations (Autogenerated transcript) [00:00:00] One more feature which is missing from the web demo one-click integration and Dialogflow which is not missing in other words it is present in the Dialogflow Messenger integration is the ability to do CSS based customizations. And these are basically things you can use to change the color of the chat bubble, the chat window and the borders and things like that. And of course you can do that by doing this you will be able to match your bot’s appearance to sort of blend with the theme that you already have in your website.
Rich Responses
Duration: 0:03:07	✅ Description Type (Autogenerated transcript) [00:00:00] Alright, so now that we have gone through the basics of setting up the bot so that it shows on your site, next we are going to take a look at how to display rich response messages. So the first one I am going to consider is this description response type and you can see that it is actually a very simple type of rich response. There is a heading and it is bold text and then it is just a bunch of lines of text after that.
Duration: 0:06:48	✅ Info Type (Autogenerated transcript) [00:00:00] Another rich response which is available in the Dialogflow Messenger is the information response type, the info response type. It’s a card type that is it has an image and a title and some information sort of like some other text below that. And it will also usually be able to, it’s sort of like an active card in the sense that you can click on it and it will take you to another page. So you can see that there is a title, subtitle and then there is an image object which has a source that is the URL for the image and the URL is actually in another field called raw URL.
Duration: 0:06:55	✅ Button Type (Autogenerated transcript) [00:00:00] Alright, so next we are going to see the button response type and this one is a little bit tricky that’s what I would say. So to get started let’s go to the agent and create an intent called show button type. Let the phrase be show me button that’s sufficient and what I’m going to do is copy this, go to the intent, delete this text response, add the custom payload, paste whatever I got from there and instead of example.com I’m going to change it to google.com so that it’s a real actual valid site.
Duration: 0:02:32	✅ Image Type (Autogenerated transcript) [00:00:00] Alright, so next we’ll take a look at the image response type. And it’s supposed to show an image and pretty much that’s it. So what I’m going to do is, first let’s go to Dialogflow, create a new intent called show image type. Show me image. Delete this. Custom payload. And let’s take this and paste it over here. And for the URL, what I’m going to do is I’m going to actually take a different image. This is something which is coming from my site.
Duration: 0:08:44	✅ Suggestion Chip Type (Autogenerated transcript) [00:00:00] Okay, so now let’s take a look at the suggestion response type, suggestion chip response type rather and this is a good response type in my opinion and it’s something that you can use to have buttons in your Dialogflow agent in your website chatbot widget. So what I’m going to do is add show suggestion chip type, show me suggestion chips and we’ll go to the response section, add a custom payload and just copy the whole thing and paste it over here and save it.
Duration: 0:08:41	✅ List Type (Autogenerated transcript) [00:00:00] Alright, so now let’s take a look at the list response type. What I’m going to do is go to my agent and say show list type, show me list. And in the response I’m going to delete this, add responses, custom payload, back to this page and copy the whole thing and paste it over here. Let’s save it. I want you to take a look at what’s inside this rich response. The first is it has a title and a subtitle and then it has a type, these are expected.
Duration: 0:11:28	✅ Accordion Type (Autogenerated transcript) [00:00:00] The last response type which we have in our possible options is the accordion response type. Now on first glance you can see that the accordion response type is just a way for you to you know collapse some information so that it doesn’t take up too much space on the chat widget unless the user wants to see the whole thing. So let’s take a look. You can have this accordion type so I’m going to do that. So I’m going to add this show accordion type and I’m going to have show me accordion and then let’s delete this.
Python Webhook
Duration: 0:03:33	✅ Python Webhook Tutorial (Autogenerated transcript) [00:00:00] Alright, so the first thing that I would like you to do is go and read this Dialogflow Python Webhook tutorial I have on my site and I want you to do that in some good detail. And here is the reason why I am suggesting that. Now if you scroll down to the static response section in the tutorial, what you will notice is that there is this sort of like a small piece of code that you can use and here I am using this service called Replit so you can just copy paste this entire code into the Replit REPL and you will have a working webhook at that point.
Duration: 0:03:31	✅ Understanding the Custom Payload Part 1 (Autogenerated transcript) [00:00:00] Alright, now let’s try and understand the custom payload that is used in Dialogflow and exactly what functionality that it serves. Because it’s actually used for a lot of things and getting a basic understanding of what the custom payload is used for will actually help you not only with the Dialogflow Messenger bot but even for other integrations that you might be building. Now to show us a simple example, I have this thing called the course part on my course website, if you go to learn.miningbusinessdata.com you will be able to interact with this bot.
Duration: 0:11:10	✅ Understanding the Custom Payload Part 2 (Autogenerated transcript) [00:00:00] Alright, so now what we’ll do is we’ll take a look at the custom payload which was used to generate this list of buttons in the Zoho chatbot. So I’m going back to my Dialogflow intent here and this was the intent which actually fired when we got this list of buttons to show up. And notice that the custom payload here has a few fields. The first is there is a field called platform and you can see that it has the word Zoho Sales IQ.
Duration: 0:05:30	Understanding the Custom Payload Part 3 (Autogenerated transcript) [00:00:00] Okay, so to wrap up this section on custom payloads, I would like to point out just a few more things. The first thing that I would like to point out is that you can see that in the case of the Dialogflow Messenger integration, you have to put the rich content field as sort of the parent object of everything, the whole content which goes inside of that field, right? So that indicates that this object is meant for the Dialogflow Messenger integration.
Duration: 0:01:12	Trigger the static response (Autogenerated transcript) [00:00:00] Alright, so once you understand the previous concepts, especially to do with the custom payload, to get the rich response sent from your webhook to the Dialogflow Messenger integration, actually it’s very straightforward. So what I’m going to do is I’m going to use the bot we have built before, and I’m just going to first say, show me suggestion chips, because this will show me the suggestion chips type. You can see that it comes back with yes and no suggestion chips, which is excellent.
Duration: 0:05:07	Get response object from history (Autogenerated transcript) [00:00:00] Alright, so once we get the static response to render properly, the next step we have to do is go to the history tab in your agent and you will see the conversation history over here. And here is the message I typed, show me suggestion chips and it sent a response back which rendered here as we had expected. I don’t have it now but we got the response back. And what you have to do is click on this ellipsis here and click on raw interaction log.
Duration: 0:04:25	Send rich response from webhook (Autogenerated transcript) [00:00:00] Alright, so now that you have understood the format of the JSON response which should be sent back from the webhook, the next thing that we have to do is create an intent which we can actually fire so that we can get the answer in the Dialogflow Messenger chat window. So I’ve created a new intent called show me webhook rich response and you can see that the training phase is just show me webhook rich response and one thing I’ve done is I’ve added the text response saying this is from the Dialogflow console