Dialogflow Messenger Quickstart
Have a question about this course? Ask here | Check out course discounts and promotions
Course Preview
Note: ✅ indicates a sample lesson. Except for sample lessons, preview links will only work after you enroll in the course
Total video duration: This course does not have any videos
| Thumbnail | Excerpt |
|---|---|
| How to generate Rich Responses | |
| Text Lesson |
✅ How to generate the Description rich responseThe 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. Click here to generate a custom payload JSON for the Description rich response type |
| Text Lesson |
✅ How to generate the info card responseThe 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 click on the card. It will navigate to the home page of the BotFlo website. Click here to generate a custom payload JSON for the Info rich response |
| Text Lesson |
✅ How to generate the hyperlink responseButtons are a good way to add a hyperlink 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 Bots course. Create an intent called show.button.type as below. Click here to generate a custom payload JSON for the Hyperlink rich response type |
| Text Lesson |
✅ How to generate the Image responseYou 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 tend to look better. Click here to generate custom payload JSON for the Image response Add a new intent called show.image.type in your Dialogflow agent as below. Now test the response in the chat widget. |
| Text Lesson |
How to generate Suggestion Chips responseSuggestion chips are good choices for representing buttons in your Dialogflow chat widget. I don’t recommend using it for links, though. Create an intent called show.suggestion.chip.type as below. Now test it inside your chat widget. Click here to generate a custom payload JSON for the Suggestion Chips rich response type |
| Text Lesson |
How to generate the List responseThe 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. How it works 1 Add an Event to the intent that you want to fire 2 In the event payload for each list item, make sure you call the Event for the intent that you would like to fire, as you can see below Click here to generate a custom payload JSON for the List rich response |
| Text Lesson |
How to generate the Accordion response typeThe accordion type displays collapsible information. Add another intent to your Dialogflow agent as below. Click here to generate custom payload JSON for the Accordion rich response type |
| More How To Articles | |
| Text Lesson |
How to build better Dialogflow Messenger bots using these four obscure featuresIn this article, I will show you 4 features in Dialogflow Messenger which are somewhat obscure – in the sense that many people use the Dialogflow Messenger integration without really learning about them. And in my experience, almost no one knows ALL four of them. 1 Clicked suggestion chips are recognized as normal text message Recently, I was on a live chat with someone who was interested in the BotFlo app. And I pointed out that instead of using the List response, he could just use the suggestion chips. |
| Text Lesson |
Customizing the CSS of Dialogflow Messenger by manipulating the shadow DOMI get this type of question quite often on my YouTube channel. Someone wants to customize the look and feel of the Dialogflow Messenger more than what is currently supported (which isn’t a lot). There is a specific answer in StackOverflow on how to customize the icon position in Dialogflow Messenger. The answerer used the shadow DOM to manipulate the icon position inside the load event. Here, we are modifying the shadow root and changing the icon position using the vh CSS attribute. |
| Text Lesson |
How to send rich responses from webhook to Dialogflow MessengerRecently, I got this question on YouTube: i have added rich responses code in my dialogflow fulfillment. but when i am testing with dialogflow messanger integration, it is not diaplaying any images, cards on dialogflow messanger. Can you tell me what version i need to use? Based on the question, I suppose this person is using the Dialogflow fulfillment library. I recommend people avoid using the fulfillment libraries for Dialogflow unless they are building a voice bot. |
| Text Lesson |
How to send rich response from Python webhook to Dialogflow MessengerIn this post I will explain how to send rich responses from your webhook code to Dialogflow Messenger. I will explain the steps for the Description rich response type, and you should be able to follow the same steps and do it for the other rich response types. Let us start with the agent we used for the beginner tutorial. First, let us look at the Custom Payload response for the intent called “show.description” Now trigger this intent in the simulator using the appropriate training phrase. |
| Text Lesson |
How to use Dialogflow Messenger user-idThe user-id is one of the attributes you can use in Dialogflow Messenger HTML customization. In this tutorial, I will explain how it works. Suppose you want to associate a logged in user for your web app with a user ID, so that you can (for example) get details about their account. First, add the user-id into the HTML script for the Dialogflow Messenger embed code. Here is an example: Of course, normally, you would fetch this user-id from the server based on the logged-in user, and add it as one of the attributes of the df-messenger tag. |
| Text Lesson |
How to use the Dialogflow Messenger df-response-received eventI got this question on my YouTube channel recently: Hi, thanks for sharing this video! i have a question: – how i use Events JavaScript from dialogflow messenger (df-request-sent & df-response-received) I used the df-response-received event as part of my Dialogflow CX bot which helps you choose between ES, CX and Actions Builder. Here is some sample code: Suppose the dfMessenger object has been added to your HTML like this (just copy this from the Dialogflow console) |
| Text Lesson |
How to create clickable buttons which trigger an intent in Dialogflow MessengerThe terminology that Dialogflow Messenger uses is very confusing, but unfortunately it is probably a bit too late for the Google folks and go and update it now. So I have created an article which provides a step-by-step explanation on how to do this. 1 Dialogflow Messenger “buttons” do not behave like actual buttons What Dialogflow Messenger calls buttons do not behave like the buttons you would normally expect. In fact, not only do they NOT look like buttons, you are usually better off using them as clickable hyperlinks. |
Course Content
How to generate Rich Responses
More How To Articles