Dialogflow Messenger 1/25: Embed chat widget into your website

Full video list

Autoformatted transcript


All right so as we start this course the first thing that we’re going to do is we start with the fresh Dialogflow agent.

So I just created a Dialogflow agent now it’s called df hyphen 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 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 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 [m1].

And all 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 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 [m2] 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.


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 [m3] which you can use for creating this is mainly used for like web development stuff

What I’m going to do is I’m going to create a new HTML file and.

Let’s just call it something index.html5 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 [m4] 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 sh that you see here if you have 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 had to say hello you can see that it’s this is the [m5] 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.


If I were to say something like who are 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 a one more thing many people use WordPress [m6] for their websites.

And in case you’re 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 WPBeginner 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 somewhat easy option.

So you need to do that in 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