Embed chat widget into your website

(Autogenerated transcript)

 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. So what I'm going to do in this case is since I don't want this particular intent to be the actual welcome intent, I'm going to delete the welcome event from the default welcome. I'm going to add another intent, and I'm going to call it df-messenger-welcome.

 And what I'm going to do at the point is add the welcome event to this particular intent. And in the response, what I'm going to do is it say, welcome to the new Dialogflow Messenger. So that's what I have. And let's go ahead and save this. And if you actually were to type out the phrase something like hi or hello, notice that it's 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's say I say, who are you? And you can see that it's coming back with I missed that, say that again, and it's 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's going to be

 quite relevant. So the next thing we are going to do is we are going to embed this intent. Sorry, we are going to embed this chat bot 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's going to show you some script. This is JavaScript. And what you what you're 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'm going to do is I'm 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. So what I'm going to do is I'm going to create a new HTML file. And let's just call it something index dot HTML file doesn't matter. And I'm going to change the title to df messenger demo. And in the head, I'm going to add the stuff that was just copied from the from what we just copied from Dialogflow. So let's go ahead and save this. Now, as soon as I run this page, as soon as I open this page in my browser, notice that it's 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'm 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. 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's going to pop up an actual chat widget, and then you can start interacting with that widget. 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. So that is how, number one, that's how you set up the messenger, 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 web page 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. 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 a 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. So this is how you embed the Dialogflow Messenger bot into your website.