This blog teaches you how to build chatbots with Dialogflow and how to design and customize the responses using text, images, cards, and more.
1. Introduction
Chatbots are becoming more and more popular as a way to interact with users and provide them with information, services, or entertainment. But how do you make your chatbot engaging and user-friendly? How do you design and customize the responses that your chatbot will send to the user?
In this blog, you will learn how to build chatbots with Dialogflow, a powerful and easy-to-use platform for creating conversational agents. You will also learn how to design and customize the responses that your chatbot will send to the user using text, images, cards, and more.
By the end of this blog, you will be able to:
- Create text responses that are natural and dynamic
- Add images to your responses to make them more appealing and informative
- Create cards and suggestion chips to offer the user more options and guidance
- Use rich messages and custom payloads to create interactive and customized responses
- Test and debug your responses to ensure they work as expected
Ready to get started? Let’s dive in!
2. What are Dialogflow Responses?
Dialogflow responses are the messages that your chatbot sends to the user in response to their queries or intents. Dialogflow responses can be simple text messages, or they can include rich media elements such as images, cards, suggestion chips, and more. Dialogflow responses can also be customized to suit different platforms, such as web, mobile, or voice.
Dialogflow responses are defined in the Responses section of each intent in the Dialogflow console. You can add multiple responses for each intent, and Dialogflow will randomly select one of them to send to the user. You can also use parameters and contexts to make your responses more dynamic and personalized.
Dialogflow responses can be divided into two types: default responses and fulfillment responses. Default responses are the ones that you define in the Dialogflow console, and they are sent to the user without any additional processing. Fulfillment responses are the ones that you generate using a webhook, which is a service that can perform some logic or computation based on the user’s query or intent. Fulfillment responses can be more complex and flexible than default responses, but they also require more coding and configuration.
In this blog, you will learn how to create both default and fulfillment responses using different types of media elements. You will also learn how to customize your responses for different platforms and how to test and debug them. But first, let’s see how to create simple text responses in the next section.
3. How to Create Text Responses
Text responses are the simplest and most common type of Dialogflow responses. They are simply text messages that your chatbot sends to the user in response to their queries or intents. Text responses can be used to provide information, answer questions, confirm actions, or guide the conversation.
To create text responses, you need to follow these steps:
- Go to the Dialogflow console and select the intent that you want to add text responses to.
- In the Responses section, click on the Add Response button and select Text Response from the dropdown menu.
- Enter the text that you want your chatbot to send to the user in the text box. You can add multiple text responses for each intent, and Dialogflow will randomly select one of them to send to the user.
- If you want to use parameters or contexts to make your text responses more dynamic and personalized, you can use the $ symbol followed by the name of the parameter or context. For example, if you have a parameter called name, you can use $name in your text response to insert the value of the parameter.
- Click on the Save button to save your text responses.
We have added three text responses for the greeting intent, and we have used the $name parameter to personalize the response. Now, when the user says hello to the chatbot, Dialogflow will randomly select one of these text responses and send it to the user. For example, the chatbot might say:
User: Hello Chatbot: Hi, $name. How can I help you today?
Text responses are easy to create and use, but they can also be boring and monotonous if you only use them. That’s why you should also learn how to add images to your responses to make them more appealing and informative. Let’s see how to do that in the next section.
4. How to Add Images to Responses
Images are a great way to enhance your chatbot’s responses and make them more engaging and informative. Images can help you illustrate a concept, show an example, or provide visual feedback. You can add images to your responses using the Image Response option in the Dialogflow console, or using the image object in the fulfillment webhook.
To add images to your responses using the Dialogflow console, you need to follow these steps:
- Go to the Dialogflow console and select the intent that you want to add images to.
- In the Responses section, click on the Add Response button and select Image Response from the dropdown menu.
- Enter the URL of the image that you want to display in the text box. The image URL must be publicly accessible and have a valid image format (such as JPG, PNG, or GIF).
- Optionally, you can also enter a text response that will accompany the image. This can be useful to provide some context or explanation for the image.
- Click on the Save button to save your image response.
We have added an image response that shows a picture of a product (a laptop) and a text response that provides some details about the product. Now, when the user asks to see a product, the chatbot will send both the image and the text to the user. For example, the chatbot might say:
User: Show me a product Chatbot: Here is one of our products: a laptop with 8GB RAM, 256GB SSD, and a 15.6-inch screen. It costs $999.
To add images to your responses using the fulfillment webhook, you need to follow these steps:
- Enable the fulfillment webhook for the intent that you want to add images to.
- In your webhook service, create a JSON response that includes an image object in the fulfillmentMessages array. The image object must have an imageUri property that contains the URL of the image. Optionally, you can also include a text object that contains a text response that will accompany the image.
- Send the JSON response back to Dialogflow.
Here is an example of how to create a JSON response that includes an image object for the show_product intent.
{
"fulfillmentMessages": [
{
"image": {
"imageUri": "https://example.com/laptop.jpg"
}
},
{
"text": {
"text": [
"Here is one of our products: a laptop with 8GB RAM, 256GB SSD, and a 15.6-inch screen. It costs $999."
]
}
}
]
}
As you can see, we have created a JSON response that includes an image object with the image URL and a text object with the text response. Now, when the user asks to see a product, the webhook will send this JSON response to Dialogflow, and Dialogflow will send both the image and the text to the user.
Adding images to your responses can make your chatbot more attractive and helpful, but you can also use other types of media elements to create more interactive and customized responses. Let’s see how to create cards and suggestion chips in the next section.
5. How to Create Cards and Suggestion Chips
Cards and suggestion chips are two types of media elements that you can use to create more interactive and customized responses for your chatbot. Cards are visual elements that can display a title, an image, a subtitle, and a button. Suggestion chips are clickable buttons that can display a text or an icon. You can use cards and suggestion chips to offer the user more options and guidance, such as showing products, services, categories, or actions.
To create cards and suggestion chips, you can use the Card Response and Suggestion Response options in the Dialogflow console, or use the card and suggestions objects in the fulfillment webhook.
To create cards and suggestion chips using the Dialogflow console, you need to follow these steps:
- Go to the Dialogflow console and select the intent that you want to add cards and suggestion chips to.
- In the Responses section, click on the Add Response button and select Card Response or Suggestion Response from the dropdown menu.
- For the card response, enter the title, the image URL, the subtitle, and the button text and URL for the card. You can add multiple cards for each intent, and Dialogflow will display them in a carousel. For the suggestion response, enter the text or the icon URL for each suggestion chip. You can add up to 8 suggestion chips for each intent.
- Click on the Save button to save your card and suggestion responses.
We have added two card responses that show the images, titles, subtitles, and buttons for two categories of products (laptops and smartphones). We have also added four suggestion responses that show the text for four categories of products (laptops, smartphones, tablets, and accessories). Now, when the user asks to see the categories, the chatbot will send both the cards and the suggestions to the user. For example, the chatbot might say:
User: Show me the categories Chatbot: Here are some of the categories that we offer:
To create cards and suggestion chips using the fulfillment webhook, you need to follow these steps:
- Enable the fulfillment webhook for the intent that you want to add cards and suggestion chips to.
- In your webhook service, create a JSON response that includes a card object and/or a suggestions object in the fulfillmentMessages array. The card object must have a title, an imageUri, a subtitle, and a buttons array that contains one or more button objects with a text and a postback property. The suggestions object must have a suggestions array that contains one or more suggestion objects with a title property.
- Send the JSON response back to Dialogflow.
Here is an example of how to create a JSON response that includes a card object and a suggestions object for the show_categories intent.
{
"fulfillmentMessages": [
{
"card": {
"title": "Laptops",
"imageUri": "https://example.com/laptop.jpg",
"subtitle": "Find the best laptop for your needs",
"buttons": [
{
"text": "View laptops",
"postback": "https://example.com/laptops"
}
]
}
},
{
"card": {
"title": "Smartphones",
"imageUri": "https://example.com/smartphone.jpg",
"subtitle": "Discover the latest smartphones and accessories",
"buttons": [
{
"text": "View smartphones",
"postback": "https://example.com/smartphones"
}
]
}
},
{
"suggestions": {
"suggestions": [
{
"title": "Laptops"
},
{
"title": "Smartphones"
},
{
"title": "Tablets"
},
{
"title": "Accessories"
}
]
}
}
]
}
As you can see, we have created a JSON response that includes two card objects and one suggestions object with the same information as the Dialogflow console. Now, when the user asks to see the categories, the webhook will send this JSON response to Dialogflow, and Dialogflow will send both the cards and the suggestions to the user.
Creating cards and suggestion chips can make your chatbot more interactive and customized, but you can also use other types of media elements to create rich messages and custom payloads. Let’s see how to do that in the next section.
6. How to Use Rich Messages and Custom Payloads
Rich messages and custom payloads are two types of media elements that you can use to create more advanced and customized responses for your chatbot. Rich messages are predefined media elements that Dialogflow supports, such as audio, video, or quick replies. Custom payloads are custom media elements that you can define yourself, such as maps, charts, or forms. You can use rich messages and custom payloads to create more engaging and interactive responses that suit your specific needs and goals.
To use rich messages and custom payloads, you need to use the fulfillment webhook, as the Dialogflow console does not support them. You need to follow these steps:
- Enable the fulfillment webhook for the intent that you want to use rich messages and custom payloads for.
- In your webhook service, create a JSON response that includes a payload object in the fulfillmentMessages array. The payload object must have a platform property that specifies the platform that you want to target, such as FACEBOOK, TELEGRAM, or GOOGLE_ASSISTANT. The payload object must also have a richContent property that contains an array of arrays of media elements. Each array represents a row of media elements, and each media element is an object that defines its type and properties.
- Send the JSON response back to Dialogflow.
Here is an example of how to create a JSON response that includes a payload object with a rich message and a custom payload for an intent called show_weather, which is triggered when the user asks for the weather in a location.
{
"fulfillmentMessages": [
{
"payload": {
"platform": "FACEBOOK",
"richContent": [
[
{
"type": "info",
"title": "Weather in New York",
"subtitle": "Sunny, 25°C"
}
],
[
{
"type": "image",
"rawUrl": "https://example.com/sun.jpg",
"accessibilityText": "Sun"
},
{
"type": "custom",
"content": {
"type": "chart",
"data": [
["Hour", "Temperature"],
["9 AM", 22],
["10 AM", 23],
["11 AM", 24],
["12 PM", 25],
["1 PM", 26],
["2 PM", 27]
],
"options": {
"title": "Temperature by hour",
"hAxis": {
"title": "Hour"
},
"vAxis": {
"title": "Temperature"
}
}
}
}
]
]
}
}
]
}
As you can see, we have created a JSON response that includes a payload object with a platform property set to FACEBOOK, and a richContent property that contains two arrays of media elements. The first array contains an info element that shows the title and subtitle of the weather in New York. The second array contains an image element that shows a picture of the sun, and a custom element that shows a chart of the temperature by hour. Now, when the user asks for the weather in New York, the webhook will send this JSON response to Dialogflow, and Dialogflow will send the rich message and the custom payload to the user on Facebook Messenger.
Using rich messages and custom payloads can make your chatbot more advanced and customized, but you also need to test and debug your responses to ensure they work as expected. Let’s see how to do that in the next section.
7. How to Test and Debug Responses
Testing and debugging your responses is an important step to ensure that your chatbot works as expected and provides a good user experience. Testing and debugging your responses can help you identify and fix any errors, inconsistencies, or inaccuracies in your responses. You can test and debug your responses using the Try it now simulator in the Dialogflow console, or using the Diagnostic Info tool in the Dialogflow fulfillment.
To test and debug your responses using the Try it now simulator, you need to follow these steps:
- Go to the Dialogflow console and select the agent that you want to test and debug.
- In the left sidebar, click on the Try it now button to open the simulator.
- Enter a query or an intent that you want to test in the text box and press Enter.
- Check the response that your chatbot sends to the user in the simulator. You can also check the Intent, Parameters, Contexts, and Fulfillment Status of the query in the simulator.
- If you find any errors or issues in your response, you can go back to the intent or the fulfillment and make the necessary changes.
- Repeat the process until you are satisfied with your response.
We have entered a query “What is the weather in New York?” in the simulator, and we have checked the response that the chatbot sends to the user. We can also see the intent, parameters, contexts, and fulfillment status of the query in the simulator. In this case, the response is correct and there are no errors or issues. However, if we find any errors or issues, we can go back to the intent or the fulfillment and make the necessary changes.
To test and debug your responses using the Diagnostic Info tool, you need to follow these steps:
- Enable the Diagnostic Info option in the Dialogflow fulfillment settings.
- In your webhook service, add a source property to the JSON response that identifies your webhook service.
- Send the JSON response back to Dialogflow.
- Go to the Dialogflow console and select the agent that you want to test and debug.
- In the left sidebar, click on the Try it now button to open the simulator.
- Enter a query or an intent that you want to test in the text box and press Enter.
- Click on the Diagnostic Info button in the simulator to see the detailed information about the query and the response.
- Check the Webhook Response section in the Diagnostic Info to see the JSON response that your webhook service sends to Dialogflow. You can also check the Webhook Status Code and the Webhook Latency to see if there are any errors or delays in your webhook service.
- If you find any errors or issues in your response, you can go back to your webhook service and make the necessary changes.
- Repeat the process until you are satisfied with your response.
We have entered a query “What is the weather in New York?” in the simulator, and we have clicked on the Diagnostic Info button to see the detailed information about the query and the response. We can see the webhook response that our webhook service sends to Dialogflow, which includes a payload object with a rich message and a custom payload. We can also see the webhook status code and the webhook latency, which indicate that our webhook service is working properly. In this case, the response is correct and there are no errors or issues. However, if we find any errors or issues, we can go back to our webhook service and make the necessary changes.
Testing and debugging your responses is a crucial step to ensure that your chatbot works as expected and provides a good user experience. You should test and debug your responses regularly and thoroughly, using the Try it now simulator and the Diagnostic Info tool. By doing so, you can identify and fix any errors, inconsistencies, or inaccuracies in your responses, and improve the quality and performance of your chatbot.
Now that you have learned how to test and debug your responses, let’s wrap up this blog with a conclusion in the next section.
8. Conclusion
In this blog, you have learned how to build chatbots with Dialogflow and how to design and customize the responses that your chatbot will send to the user using text, images, cards, and more. You have also learned how to use rich messages and custom payloads to create more advanced and customized responses, and how to test and debug your responses to ensure they work as expected.
By following this blog, you have gained the skills and knowledge to create engaging and user-friendly chatbots that can provide information, services, or entertainment to your users. You have also learned how to use the Dialogflow console and the fulfillment webhook to create and manage your chatbot’s responses.
Dialogflow is a powerful and easy-to-use platform for creating conversational agents, and it offers many features and options to customize your chatbot’s responses. You can use different types of media elements, parameters, contexts, and fulfillment to create dynamic and personalized responses that suit your specific needs and goals.
We hope you enjoyed this blog and found it useful and informative. If you have any questions or feedback, please feel free to leave a comment below. Thank you for reading and happy chatbot building!
