Dialogflow ES Messenger HTML and CSS customizations
HTML Customizations – Required Attributes
(0:00 - 0:43) 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's 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 and you see that it has these four attributes.
(0:44 - 1:21) Now, if you look at the documentation, it makes it clear that the agent ID, the chat title and the language code are all required parameters. So, what I'm going to do now is I'm just going to go back to the snippet and I'm going to remove everything except the agent ID, just to show you what happens when you do that, like how well does Dialogflow handle these situations. So, let's go ahead and remove these and I'm going to save this.
(1:21 - 3:02) So, when you open this, that is when you go to the page, the first thing you notice is that there is no welcome message because we removed the attribute which is sort of indicating the intent which should fire, so we don't have that and if I open the page, you notice that it has replaced the chat title with a default chat text, it just has some default verbiage called chat and also the important thing is that if I were to try to interact with the bot, you notice that it says something went wrong, please try again and this is because the, it doesn't have all the required parameters that it needs. So, let's go back here and of course, the agent ID is already there, so what we are going to do now is we are just going to put the language code back into this bot, save it and let's try and open it and see what happens now, so I'm going to open this here and I'm going to say hi, now you can see that it did come back with the default welcome message. Now, it did not show the prompt which is what it showed before we even started interacting but the bot itself seems to work, so as you can see, it does provide this chat as the default text but otherwise, it's working quite okay, so if you go back and look at the code, you see that the only two absolutely mandatory parameters are the agent ID and the language code.
(3:02 - 4:04) So, now let's go back to the documentation, you can see that the chat title, it says it's required but I think that it just keeps, it automatically generates it in case it's not able to find it in the HTML attribute, now if you were to provide your own chat title, so here if I were to say chat title equals my bot and save it and open it, you can see that my bot comes as the chat title over here, so my point is that the chat title which you have as the attribute overwrites the name of the bot that you have in your dialogue flow console, so this is what will actually show on the page, if you have added it as an attribute. So, that's what we have when it comes to the required parameters in this HTML tag that we have for showing the chat widget.
HTML customizations – optional attributes
(0:00 - 0:31) All right, so now that we have seen the required HTML parameters, let us take a look at the optional parameters that you can use to customize your chat widget. And what I am going to do is I am going to go over the basic three parameters which are sort of like things 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 you know shows which is a URL to the icon that you want to appear in the chat.
(0:32 - 1:10) The expand option which is the attribute which sets if the chat dialog should be open by default when the page loads in by default the chat dialog is actually closed. And the third one is the wait open which is the Boolean attribute that delays the welcome eventEvents are used in both Dialogflow ES and Dialogflow CX as t... More until the dialog is actually open. So what I am going to do is I am going to go back to the WebStorm development environment here and what I am going to do is I am going to add this chat icon URL.
(1:12 - 1:38) So in case you are wondering what this is, this is a website called placeholder.com which dynamically allows you to generate images based on a specific size. So this is indicating that the image that I want is a 36 by 36 image that is 36 pixels by 36 pixels. And the reason I am doing that is because you can see that the documentation specifies that the icon size should be 36 by 36.
(1:39 - 2:17) And it also specifies the background color and the foreground color and some text which has to appear inside that image. So if I were to open it now, you can see that of course it does not look very pretty but you can see that you have this box which is the dynamically generated URL, the image and you can also see that it has a background color of black, foreground text color of white and it has the text MBD written inside that you know that is basically the chat icon right now. All right, so that does not look very nice so I am going to remove it.
(2:17 - 2:42) But I just wanted to show you how you can add the chat icon. In your case, you will have to get a proper image which represents the chat icon and put it on some server somewhere, make sure that it is a size 36 by 36 pixels and then you will be able to pass in the URL to that image and that should make sure that that particular image loads as the chat icon. So let us delete that.
(2:43 - 3:04) Now let us go back to this list of parameters here and you see that this is the expand is the attribute which sets the chat dialog to be open when the page loads. So what I am going to do now is take this attribute here and then add it. So what I am setting is expand equals true.
(3:04 - 3:40) So I want the chat widget to be open when the page loads. So let us see if that works and you can see that it does as soon as I open the page it automatically also shows the chat widget in expanded form and let us close these tabs. All right, so that is the other parameterBoth ES and CX support the concept of parameters. If entitie... More and one more parameter I wanted to show you is the wait open which is the Boolean attribute that delays the welcome event until the dialog is actually open.
(3:40 - 4:28) Now for this to work you do need an actual welcome event and remember that for now we do not have the you know the trigger for that. So what I am going to do is I am going to add this intent equals welcome and if you might remember from looking at the documentation that the intent attribute is what will be used to sort of trigger the first intent that is run when the chat dialog is open. That means when I set intent equals welcome like what I have done here it is sort of telling this chat widget to invoke the welcome event when this chat widget opens.
(4:28 - 4:49) So when I take a look at this page you can see that it is now opening in this expanded view. So what I am going to do now is go back here remove expand equals true. So what we have is this welcome event is going to fire and this is what it is going to look like.
(4:49 - 5:10) You can see that it is now appearing at the bottom of this page and the this message shows as soon as the page loads. Now the attribute that we were just looking at this wait open if I were to add that. So let's do that wait open equals true.
(5:12 - 5:36) So this has a welcome event associated that is this widget does have a welcome event associated with it. But there is also this attribute which says wait open which means that it's not going to fire as soon as we open the page. Let's take a look and I waited for a few seconds and notice that the automatic message pops up is not actually showing up now.
(5:36 - 5:54) But when you click on the icon now you see that it's automatically loading the welcome event. That is the welcome event is going to get fired. It's going to show that it's going to prompt the user with some message when the bot widget is open.
(5:54 - 6:05) That is the chat widget is open. It's just not going to automatically show that when the page loads. So just to make it very clear I'm going to remove this wait open equals true and run this one more time.
(6:06 - 6:10) And this time. Yeah. You see that it's automatically showing this message.
(6:10 - 6:26) So that's what the wait open attribute is all about. So with that what we have done is we have covered this list of attributes. But then there are a few which are a little more advanced and I'm going to take a little more time to explain them in the next set of videos.
Intent Attribute
(0:00 - 3:48) 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. Now usually the welcome event is what automatically fires in Dialogflow when you don't have a custom welcome event set in your agent and also if you've noticed as soon as you create a fresh Dialogflow agent it has this default welcome intentThis is the intent which is automatically added into the Sta... More as part of the agent creation and it also automatically adds this event called welcome into that welcome intent which means that for all practical purposes that is what Dialogflow provides out of the box as the intent which fires when your agent when somebody starts talking to your agent but it's actually possible to change the welcome intent.
So what I'm going to do is I'm going to change this to a different event and I'm just going to call it parallel. Now let's go back to the Dialogflow console and I'm going to call it parallel universe welcome intent and here all I'm going to do is I'm going to literally add an event called parallel. Notice that it is all uppercase so the case it is case sensitive it has to match the it has to match that is the case of the event has to match with what you're using inside your intent attribute and let's go back here and here I'm going to have a response which is hello from the parallel universe something like that so let's go ahead and save this and I'm going to go back to my web storm editor and now if I open this page what you should see is the welcome event is being replaced by the parallel event and that means that the response coming back from the Dialogflow agent in other words whatever is the prompt message which shows up has to be different.
So you can see now that it says hello from the parallel universe and just to clarify I'm going to change this to lowercase save it and run it again and well it still comes back so I'm going to take back what I said before I suppose that the event name is not case sensitive now I think that it used to be maybe I'm just completely wrong about that but either way now you know that you can use like case insensitive event names here and that would still trigger that intent but you I think you got the main point of this video which is that it's actually possible to change the message which comes back based on the based on the event that you're setting over here and that could be different from the actual welcome event or the you know the intent which automatically fires when the bot opens
Intent Attribute Scenarios
(0:00 - 0:16) All right, so there are a few more things that I want to talk about when it comes to the intent attribute inside the dfMessenger tag. So let us take a look at the dfMessenger welcome intent we had before. And notice that you have the welcome event set inside that intent.
(0:17 - 0:37) So what I am going to do is I am going to show you in the integrations pane, if you were to go and take a look at the auto-generated code snippet. So notice that inside the dfMessenger tag, you have this intent equals welcome attribute. So let us go back to the intent which had that event.
(0:38 - 0:58) Now I am going to delete this event from this intent. And what I am going to do after that is, so let us save for a second. Okay, now let us go back to the integrations and let us go and check out the auto-generated code.
(0:59 - 1:31) Notice that now inside the dfMessenger tag, you have the other three attributes, the title and the agent ID, the language code, but you do not have the intent equals welcome attribute. So what is happening here is that Dialogflow is looking at all the intentsBoth Dialogflow ES and Dialogflow CX have the concept of int... More you have in your agent, and it is checking to see if any of them have the welcome event. And if they do not, it is going to remove that from the auto-generated code snippet.
(1:32 - 2:27) And you will see why very soon as we go through the rest of this video. So what we have right now is there is this parallel welcome intent, which does have this event called parallel. And what will happen, so now let us go back to the WebStorm and what I am going to do is, I am going to take this, add this back, but this time I am just going to use the parallel as the event.
All right, so let us open this page and just wait for a second. And you can see that it comes with hello from the parallel universe, which is the, if you might remember, that is the response coming from the parallel universe welcome intent. On the other hand, if I were to delete this event, let us say I delete this event, save it.
(2:29 - 4:12) And let us go back to the editor here and let us run this or let us open this page. And notice that it is coming with, sorry, I did not get that. Can you refresh? Now, what has happened here is that it sent an event using the intent attribute.
The event's name was parallel, but that event is not actually present in any of the intents in the agent. So it just goes to the fallback intent. All right, so if you have this event in one of the intents, then it will trigger that intent.
On the other hand, if you do not have this event in any of the intents, it is just going to go to the fallback response. So that is something that we have observed. Now, the other thing that I want you to see is let us go back to the, let us go back to dialogue flow.
And what I am going to do next is I am going to add this event back here, save it. Now, let us go to the integrations tab, open this, and notice that it has this intent equals welcome. So what I will do is I will take this welcome intent.
So I am going to sort of, okay, let me just do it. In fact, I will copy this, go back here, and I will paste it. So we are back to the, so what we have here in this tag is just the default information, which is automatically generated by dialogue flow inside the dialogue flow console.
(4:13 - 4:41) And so now if you were to open this page, notice that it comes back with the welcome to the new and improved dialogue flow messenger message, which is exactly what we expect. And so if I were to delete the welcome event also, let us go back and do that. Delete the welcome event, save it.
(4:42 - 7:15) Let us go to the editor. And remember that the intent which is supposed to fire is corresponding to this welcome event, but the welcome event itself has been deleted from the agent right now. Let us open this page.
And it comes back with one more time, which is actually the phrase which is found in the fallback intent. So in other words, it triggered the fallback intent in the same way that it did when we were actually looking at the parallel event, but the event was actually deleted from the agent. So now we have considered four cases.
The first case is what happens if you choose an intent equals event value where the event is not the sort of the default value, which is welcome, but instead we use a different one, the parallel event. What happens if that event is present in the bot versus it is not. And then we use the default, which is welcome.
And what happens if it is present in the bot and it is not. And then I am going to show you another case where you do not have this attribute at all. So you do not have this intent equals something attribute at all.
And now if you were to open the page, basically nothing happens because it is not triggering any event. So you have to actually click on this to start interacting with your bot. So this is fine.
Now, what does this actually mean? Now let us go back to, I have a set of scenarios that I am describing in this table over here, where I will just go over all the things that we saw. If the intent attribute is present, so what I mean by that is if you had this intent equals something attribute inside the DF messenger tag, if the intent attribute is present and it uses the default welcome intent. So in this case, if it does not use the default welcome event, for example, if it uses the event called parallel and that event is present in the bot, then the custom intent will fire.
This is the intent which corresponds to the event named parallel. And if it has the intent attribute, it does not use the default welcome event, but the event is not present in the bot, it is going to the fallback intent. If it has intent attribute, it uses the default welcome event and the event is present in the bot, it is going to fire the welcome intent.
(7:15 - 8:24) If it has the intent attribute, it uses the default welcome event, but that event is not present in the bot, then it's going to the fallback intent. And finally, if it has no intent attribute, which is the last scenario we just saw, in these cases are not relevant to that example, then what happens is that there will be no automatic prompt, but the default fallback intent will not fire either. It's just going to wait for the user to send a message.
So that explains, that also explains what's going on with how Dialogflow auto generates this code for us over here. So now, because this agent for now, it has no intent, which has the welcome event, it's not going to pre-populate your auto generated code with an event that you can use because it knows that that will go to the fallback. And if that was firing, where the bot is just going to prompt the user, but unfortunately, it's coming with the default fallback message, it will definitely throw off any website visitors who come to your site.
(8:25 - 8:50) So that's why they don't use that parameter. They don't automatically add the intent equals attribute into the DF messenger tag, if you don't have the welcome event in your part. So I just wanted to point out all these different scenarios that you need to keep in mind as you're using the intent attribute inside your Dialogflow messenger tag.
Session ID Attribute Part 1
(0:00 - 1:37) 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 dialog flow it is called dialog flow 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 dialog flow sessions work. So I am going to ask you to go and do your own homework on that but once you understand how dialog flow sessions work you should be able to follow what I am going to explain in this particular video because it is still there are some peculiarities of the website chat bot in spite of understanding everything about dialog flow sessions you might still have to watch this video to see how dialog flow implements the session id for the web chat. So what I am going to do is I am going to you can see that I have first of all I have added this is page one into the body tag of the index.html page I have also created a page two dot html and notice that the body has the text this is page two and I have otherwise everything in this page is identical to page one there is basically almost nothing different except for the fact that I have the text inside the body of that page is slightly different.
(1:38 - 8:00) Also notice that now I am using this session id abcdef I think it just has to be a string I am not sure if there are any specific constraints but it probably does not allow special characters and things like that. So I would just stick with the regular old string for that for generating session ids. So here what is happening is that as the page loads the df messenger tag is going to send the session id or I am not going to session sending is not the right word it is you can it is better to say that the messenger I am sorry the chat widget is initialized with this session id that would be a better way to think about it.
So this session id is this value is initialized when the chat widget loads and on page two we are going to use the same session id. Now that is sort of like the concept of how dialogue flow I am sorry how sessions work on websites when a visitor comes to a specific page and then they click on some link and then go to the next page on the site effectively they are treated as though they are in the same session in the in terms of like the web programming. So what is going to happen now is so let us open the page and notice that it says this is page one.
Now what I am going to do is I am going to I am going to type a message to explain or indicate what we are doing of course the there is no text this is not being handled in the agent in any way so this is going to trigger the fallback intent and I am still going to proceed you know regardless of that fact. So what I am going to do is I am going to type something with session id from page one so that is the message that I am typing and you will see of course it is triggering the fallback intent. Now what I am going to do is I am going to go to the page two now if I have to just go to page two and load it like that it is if I click the link on the page so let us press enter now you can see that this is page two and I am going to say with session id from page two.
So again it is going to trigger the fallback intent nothing special there it is not you know what we have seen is not anything that would be surprising but because I use the same session id on both these pages if you were to go to dialogue flows console and you can actually see the history right now if you were to look at the history it is actually grouped based on the session id okay. So now what is happened here is that it is actually you can see that it has these two messages with session id from page one with session id from page two both of them triggered the fallback intent of course but you can also see that they got grouped together because they both belong to the same session like because we use the same session id as we interacted with the chat widget on the on the site because of that it all got grouped into the same conversation. Now in fact I can go back and you know go to the index page once again so here say with session id from index page again and you can see it is coming with hi how are you doing it somehow it actually seemed to have thought that it is the welcome intent something in this phrase must have triggered that but in any case let us go back to dialogue flow go to the history again so here you can see that it has got the with session id from index page again as part of the same conversation that is it's it's a because it's still using the same session id it's going to appear to dialogue flow as as though it all happened within the same conversation.
Now one thing that you might notice is that unlike the chat widgets that you get from a company like drift or intercom or something where you will actually see that the history of your conversation if you don't clear your browser cache you usually what you see is that it's maintained over multiple sessions and like you can see the past history that you had in the chat widget now the dialogue flow messenger integration is not the right tool for doing something like that and in fact if you try to use the dialogue flow messenger integration for showing the history of the conversation the user had on other pages on the same site I am guessing that it's going to be a lot of work in fact you might be much better off just going for some other third-party messenger I'm sorry third-party website integration like bot copy or something like that because in this case what is happening is that even though the session is marked properly and even though in your dialogue flow history you can actually see that all these messages are falling into the same session you have to do the work to go and fetch all the past messages from some kind of database which means first of all you need to have them stored somewhere so you're really looking at a lot of work if you want to do something like that and yeah I said like I said you know that's that's probably not the best use case for the dialogue flow messenger built-in integration at least as it stands now maybe they will improve this feature I'm not sure but as it stands now that's not the best use case so what we have seen now is that with the session id included you can see that it's actually able to group all these messages as though they belong to the same conversation
Session ID Attribute Part 2
(0:00 - 0:42) All right, so let us see what happens if we do not have the session ID attribute inside the messenger tag and we have everything else is identical. So let us go ahead and delete the session ID from both pages. I am going to make a small change where I am going to add a link to the other page from this page itself, go to page 2 and I am going to add a ahref equals tag, all right, let us do that, okay.
(0:42 - 2:20) So we have this page 1 and then I have a link to go to page 2 and just to make it complete what I am going to do now is go to index, so let us do that and remember that I have cleared the session ID from both the DF messenger tags in both these pages, okay. So let us open the page and what I am going to do here, now I am going to type without session ID from page 1. So it says, sorry could you say that again, now I am going to click on this, let us now go on to the next page, I am opening here, I am going to say without session ID from page 2, is that, can you say that again, I am going to index page one more time, open it without session ID from index page, let us do that, say that one more time, all right. So we have got these 3 messages that we have sent and the bot has responded with the default fallback intent message each time because we do not have anything to handle these messages in the bot, but here is the interesting thing, now let us go and look at what has happened in the history pane, okay.
(2:21 - 3:28) Now let us take a look at what is going on inside the history tab, you can see that without session ID from page 1 is one message, it is counting as one conversation, without session ID from page 2 is counting as a different conversation and then without session ID from index page is counting as a third conversation. Now the reason this is happening, that is all these 3 messages get their own conversations is actually because in your, as the page loads, say I clicked on page 2 again, so as the page loads, because we did not explicitly set a session ID, each page load generates a unique session ID, that is what is happening, that is the behavior of the dialogue flow messenger website integration, which means that every time a page loads and you send a message, it is going to count as a new session and thus a new conversation and it will appear as if it was a new conversation inside your history view in your dialogue flow console.
User ID Attribute
(0:00 - 0:29) 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.
(0:29 - 0:58) Now, imagine if you have a web application and you have a user who logs in to your web app. Now, that user is authenticated, that is, you know who that user is. And what you can do is, as you are generating the tag, that is, you generate the HTML for the DF messenger tag, you can look up that user because you just authenticated that user, you can, you probably have already in your database, you have a ID which represents that user.
(0:59 - 1:16) You can add that user ID as one of the tags, one of the attributes inside the DF messenger tag. It will be just another attribute like all these other ones. And the big advantage of that is that this user ID will be passed to your webhookYou can use webhooks to add custom business logic in both Di... More code.
(1:16 - 1:49) That is, if your intent is going to call a webhook, it's going to call some code to do some kind of calculation or fetch some data or something like that, usually what happens is it's going to send some JSON object across to your webhook code. And that JSON has this query params.payload field, that is, it's got a payload object associated with each request which goes to your webhook. And that payload will automatically incorporate this user ID.
(1:49 - 2:09) That is, provided you initialize your chat widget with that user's ID as you, you know, create the DF messenger tag, you'll probably do that dynamically in these cases. So that's the use of this. That's the reason why you might use this user ID attribute in the DF messenger.
(2:10 - 2:24) And if you can use that, what will happen is it's going to, it will provide you an easy way to provide customized or personalized answers to your user when they are interacting with your website chatbot.
CSS customizations
(0:00 - 2:27) One more feature which is missing from the web demo one-click integration and dialog flow which is not missing in other words it is present in the dialog flow 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 bots appearance to sort of blend with the theme that you already have in your website so you can change it to change the color of the chat icon and the actual chat window and all that so that it matches what you already have on your website. Now I'm not going to go through this in much detail I'm not a designer but what I can just show you is how this works so you can see that you have to actually put it inside a style tag and also you can see that there are these specific types of values that you can change the messenger bot message title bar color background color and so on so what you can do is you go to your editor and you do this paste it inside your like that you just paste it inside the head tag inside a style tag and then if you were to open this page notice that it has actually changed the color you can also see that even the text color is quite different now and the thing is you can notice that what you are using here is basically these are hexadecimal based values also in addition to the hexadecimal based color values you can also use the standard colors like blue orange green and all that and that will also be accepted inside the style tag so you can you can see that I've changed some of these from to like actual color names and if I were to click on this notice that it has a completely different user interface although obviously it's not looking very nice but you get the picture I'm not a designer and this is how you can change the look and feel of the chat widget that appears in your website by using CSS based customizations
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:
