How to embed Dialogflow ES Messenger into your website
Embed chatbot into your website
(0:00 - 0:29) Alright, so as we start this course, the first thing that we are going to do is we start with a fresh Dialogflow agent. So I just created a Dialogflow agent now, it is called df-messenger and as you know it already has these two intentsBoth Dialogflow ES and Dialogflow CX have the concept of int... More inside, it gets created when you create the agent. What I am going to do is I am going to go to this default welcome intentThis is the intent which is automatically added into the Sta... More and notice that this has this welcome eventEvents are used in both Dialogflow ES and Dialogflow CX as t... More.
(0:30 - 2:05) So in other words, whatever you are going to use as the starting intent, this is it has to be assigned this welcome event as you might know. So what I am going to do in this case is since I do not want this particular intent to be the actual welcome intent, I am going to delete the welcome event from the default welcome, I am going to add another intent and I am going to call it df-messenger welcome and all I am going to do at the point is add the welcome event to this particular intent and in the response, what I am going to do is you will say welcome to the new Dialogflow messenger, so that is what I have and let us go ahead and save this and if you actually were to type out the phrase something like hi or hello, notice that it is actually getting mapped to the default welcome intent which is basically what we expect and if you type something which is not really understood by the bot yet, let us say I say who are you and you can see that it is coming back with I missed that, say that again and it is being mapped to the default fallback intent. So I just want you to keep that in mind as I move on to the next step because that is going to be quite relevant.
(2:05 - 3:05) So the next thing we are going to do is we are going to embed this intent, sorry we are going to embed this chatbot into a website, so the way you do that is go to the integrations tab and scroll down and take a look at this Dialogflow messenger thing and enable the Dialogflow messenger. Now as soon as you do that, you notice that it is going to show you some script, this is JavaScript and what you are going to do at this point is you click on this icon which is the clipboard icon, what it does? It copies that all this stuff into the clipboard, into your systems clipboard. Now what I am going to do is I am going to go to my WebStorm app, this is an app, this is my IDE, integrated development environment which you can use for creating, this is mainly used for like web development stuff.
(3:06 - 3:37) So what I am going to do is I am going to create a new HTML file and let us just call it something index.html file, it does not matter and I am going to change the title to BF messenger demo. And in the head, I am going to add the stuff that was just copied from what we just copied from Dialogflow. So let us go ahead and save this.
(3:38 - 4:10) Now as soon as I run this page, as soon as I open this page in my browser, notice that it is already showing me this web chat widget and also notice that without me doing anything, it actually popped up this message, welcome to the new Dialogflow messenger. So just to confirm it, I am going to run it one more time so that you can see that. So I load the page, notice that without me doing anything, it is automatically showing the welcome to the new Dialogflow messenger message.
(4:10 - 4:55) So this is how you embed the Dialogflow messenger bot into your website, that is you have to take the script that is provided inside the Dialogflow console and then you have to paste it into your web page in the appropriate location. Usually you do that in the head tag, which is what we were seeing, you have to do this within the head tag and you have to put it into that, you just paste the script that you copied. Now one more thing that I want to mention is this message that you see here, if you were to click on this, notice that it is going to pop up an actual chat widget and then you can start interacting with that widget.
(4:55 - 5:37) So now in this case, if you were to say hello, you can see that this is the response which comes back from the default welcome intent and this is why I wanted to change it to a different intent because I wanted this message to be something that we just developed, which is something that we custom wrote. Now if I were to say something like who are you, you can see that the response which is coming back is what you usually get with the default fallback intent, which is it says I missed that, can you please say that again. So if you click on this X, it minimizes this, you click on it again and it maximizes the or it shows the chat widget.
(5:37 - 6:21) So that is how number one, that's how you set up the Dialogflow Messenger bot in Dialogflow and number two, when you copy the script over to your page, this is how you embed the actual chat widget into any webpage of your choice. Now I just wanted to add just one more thing. Many people use WordPress for their websites and in case you are trying to use WordPress and you're trying to do the same thing, what you need to do is you need to get a plugin such as there's a plugin called Insert Headers and Footers, which is I think it was created by the WP beginner folks and in that plugin there is a way to embed JavaScript.
(6:22 - 6:44) Now there is no native way that you can just copy paste JavaScript code into your WordPress site. You need to have a plugin for that or you have to write custom code to be able to do that, which is why the plugin is somewhat easy option. So you need to do that in the case of WordPress if you want to have it show up on all the pages.
(6:45 - 6:50) So this is how you embed the Dialogflow Messenger bot into your website.
Have your bot initiate the conversation
(0:00 - 0:35) 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.
(0:35 - 1:03) So, what is happening is that when you set the welcome event in one of the intents in your agent, it is going to be used as the intent which decides what shows up in that welcome message that the user is going to see. And you might have also noticed that the welcome message just shows up automatically. That is, the user did not have to interact with the bot to see that message in the first place.
(1:04 - 1:18) So, we had this message, which was, welcome to the new Dialogflow Messenger. So, I'm just going to change it a little bit. Welcome to the new and improved Dialogflow Messenger.
(1:18 - 1:25) And of course, it's not improved. I'm just adding it. The Dialogflow Messenger was just released recently.
(1:26 - 1:51) But the point is that I made a change to the message which shows up to the user. And I was able to do that just by simply adding, or rather, changing the response into the default intent, that is, into the welcome intent. And in this case, when I say welcome intent, I mean the one that you chose as the welcome intent by setting the welcome event into that intent.
(1:51 - 2:22) So, what is happening under the hood, if you are interested, is that when the bot loads, it's going to sort of send a message, like a welcome message. It's going to sort of like send this event to your Dialogflow agent. And Dialogflow is going to take a look at all the intents you have in your agent and see like, hey, is this welcome event present in any of the intents? And if it does, then it's going to take a look at what is the response.
(2:23 - 2:35) And then it's just going to automatically load that as the chatbot loads on that page. So, to see that in actionYou define an action in Dialogflow ES intents to tell your w... More, we go back to our WebStorm editor. And I open the browser.
(2:36 - 3:04) And if you take a second, you see it says, welcome to the new and improved Dialogflow Messenger. So, what this has done, of course, it's sort of like fixed one of the most, I would say one of the most annoying issues, which was there with the one-click web demo integration previously, where they did not have this feature. And as a result, the web demo integration was really like, maybe it was just a good example, but it was not very functional.
(3:04 - 3:29) So, this has changed that. Now, as I mentioned, Dialogflow is going to search for this welcome event, right? So, what happens if we delete this and we save it? So, right now, no intent in your Dialogflow agent has a welcome event associated with it. And what I'm going to do is I'm going to open this again.
(3:31 - 3:55) And let's just wait for a second. And notice that it actually comes back with one more time, which is actually not an intent, which was, I guess, this is coming from the intent for the fallback. So, when the chat widget loads, it's actually taking a look at which intent has that event.
(3:55 - 4:04) And when it sends that event across, it finds that there's no event, no intent, which has that event. So, it goes to the fallback. So, we don't want that, of course.
(4:04 - 4:16) So, what I'm going to do is I'm going to go back and add the welcome event back to this intent. And let's just save that. And I'm going to close the tab.
(4:16 - 4:25) I'm going to go back to my WebStorm editor. And let's just give it a second. And let's open it.
(4:25 - 4:37) And you're going to see that it's coming back with the old message, welcome to the new and improved Dialogflow messenger. So, this is how you initiate the conversation in the Dialogflow messenger integration.
Multiple messages per conversation turn
(0:00 - 2:39) 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 all right 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 that is I want to have two or more messages show up in sequence but not in the same chat bubble they have to be in two unique bubbles and I wanted to do that in the one-click web demo integration it wasn't possible even though Dialogflow has the let's say the capability you can add responses here and let's say what I'm going to do now is I'm going to say the text response and say like I can show you different types of Dialogflow messenger responses that is the bot can display different types of rich responses and that's what it's trying to show that's that's kind of the hint that it's providing over here and now let's say that I refresh this page now when you click on this notice that it actually shows both of these messages next to each other that is back to back it says welcome to the new improved and then it says I can show you different types of Dialogflow messenger responses the idea is that after that the user should be able to say show me this type of response or show me that type of response and it is going to show an example of that so the point is even though this multiple text response blocks was already there in Dialogflow the Dialogflow itself was capable of supporting multiple responses per conversation turn of the bot the one-click web demo integration did not permit people to do that so if you had an extra text response block it would just be ignored by the one-click web demo integration now that we have added this that is now that this feature is available in the Dialogflow messenger it's obviously made things far easier for people who are developing these type of chatbots
Note: This is my old website and is in maintenance mode. I am publishing new articles only on my new website.
If you are not sure where to start on my new website, I recommend the following article:
