In this tutorial, I explain how to add a chatbot to your website using the Dialogflow Messenger integration.
What we will be building
The video below shows what we will be building in this tutorial.
Embed the chat widget into your website
Embedding the chat widget into your website is straight-forward.
Create your Dialogflow agent
Create a new Dialogflow agent, and remove the Welcome event from the Default Welcome Intent.
Add a new intent into your agent with the following information (note that it includes the Welcome event).
Add the script to your web page
Once you create your welcome intent, go to the Integrations pane, and select the Dialogflow Messenger integration.
Now copy the script into your clipboard.
Paste the script you copied into the <head> tag of your HTML page.
In that case, use a plugin like Insert Headers and Footers and add the script into the "Scripts in Header" section.
Test the integration
When you open the page in your browser, you will now see the chat widget at the bottom right of your web page.
Now click on the welcome message, and you should see the below.
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 Dialogflow Messenger Quickstart course.
For example, change the chat-title in your script within the df-messenger tag to "Dialogflow Messenger Bot".
When you open the page, you will see the new title in your chat window. If you don't provide any value for the chat-title attribute, the name of the Dialogflow agent will be used as default.
By far, the biggest feature of the Dialogflow Messenger integration is its support for rich responses such as links and images and buttons.
Let us go over these rich responses one by one.
The description type allows you to add multiple lines of text under a heading.
Create an intent called show.description.type as below:
To see the result, type the appropriate phrase into the chat widget.
The info type is similar to the card in the Google Assistant rich response, and it supports an image, a title and some text below the title.
Create a new intent in your Dialogflow agent called show.info.type. The image URL points to an image on my website.
Now check the result in the chat widget. You should be able to click anywhere inside the Info response type and a new browser tab will open and navigate to Google.com
You can also display images inside the web chat window in the Dialogflow Messenger. However, the image auto-resizes to fit the width of the window, so small images get expanded and look distorted. Larger images generally look better.
Photo credit: Unsplash
Add a new intent called show.image.type in your Dialogflow agent as below.
Now test the response in the chat widget.
Buttons are a good way to add a link to some page on your website. I don't recommend using the "event" parameter in the button type, and I explain why in the Dialogflow Messenger Quickstart course.
Create an intent called show.button.type as below.
Now test it in your chat widget.
Suggestion chips are good choices for representing buttons in your Dialogflow chat widget. I don't recommend using it for links, though, and I explain why in the Quickstart course.
Create an intent called show.suggestion.chip.type as below.
Now test it inside your chat widget.
List Response Type
The list response type is an interesting one.
Compared to the other rich responses, it is more complex to implement. But it also provides some benefits you don't have in other rich responses. Specifically, if you need a "listbox" style input - where the presented value has to be different from the underlying key - it is your only choice.
You need to add a second intent into your agent with the event PARALLEL as below.
Remember that you already have an intent called df-messenger-welcome with another event - the Welcome event.
Now add another intent in your agent as below:
Now you can test it in your chat widget. When you click on the second list item, it will trigger the parallel universe intent.
The accordion type displays collapsible information.
Add another intent to your Dialogflow agent as below.
Now test it in your chat widget.
Do you notice something unusual?
Yes, the Accordion supports HTML content! 🙂
You can get all this additional stuff in my Dialogflow Messenger Quickstart course:
- a more detailed explanation of HTML customizations
- the 5 different scenarios to consider for the intent attribute
- difference between session-id and user-id attributes
- video demos for each response type
- my recommendations on how to use different response types, and what to watch out for
- accordion HTML
- why I think you should not use the HTML inside the accordion type yet
- what tag is and isn't supported in the accordion HTML?
- download ZIP file for the entire agent to follow along
- Dialogflow Messenger Interactive Learning Bot
- Dialogflow Messenger Checklist bot
- Dialogflow Messenger decision tree chatbot
- BotFlo relaunch update
- Dialogflow Messenger: How to respond to user clicking on suggestion chip
- When NOT to use follow up intents in DialogFlow
- Dialogflow Context Lifespan
- Reader Question: Creating Dialogflow agents in web UI vs using code
- Dialogflow Messenger tutorial
- Do I need to hire a developer to build MY chatbot idea?