Hey Google, a little bit richer!

Hola! Surely, Actions On Google & Dialogflow are pretty amazing platforms when it’s being used to create the conversation flow. Always think of creating a richer voice experience for your client to get things done across Google. I have been helping my friends and my circle of AoG dev enthusiasts to build Actions and guiding. Google Assistant is now available on more than 1 Billion+ devices that includes Assistant enabled smart speakers to smart displays. So, it’s important for you to deliver perfect content for all of your users. In this article, I want you to dive into Rich Responses like Basic Card, Lists, Carousel and more.

You can learn about setting up the rich responses with your Fulfillment from this Actions On Google Doc. I wouldn’t be repeating all the words in the docs, instead, I’ll show you how you can set up those Rich Responses with the Dialogflow Console.

First, navigate into Dialogflow Console. If you haven’t already logged into the console, you will need to Sign In with your Google Account and Accept some T&C. Create your new Agent and get ready!

Simple Response

Basically, a Simple Response is the single chat bubble with TTS/SSML sound.

• The simple response is supported in all kinds of devices that support either actions.capability.AUDIO_OUTPUT or actions.capability.SCREEN_OUTPUT or both.

You can send at most 2 chat bubbles per turn, also make sure that you’re not passing more than 640 characters per chat bubble. But, keep it natural and fast, so it’s recommended to stay between 300 characters per chat bubble. Don’t you remember the rule in Conversation Design?

“Write Simple Dialogs, but Never Simpler!”

Now let’s take a look into how you can send Simple Response to your users with Dialogflow.

1. First, create a new intent by clicking the small + icon on the right side of the intents option in the left navigation panel.
2. Name the intent, “SimpleResponse”. The name doesn’t matter, so you can name whatever you want.
3. Add “Simple Response” to Training Phrases.
4. And in the Responses section click on the Google Assistant tab and then click on ADD RESPONSES button.
5. Select SimpleResponse from the pop-up selection list.

You can now add your response. Also, you can customize the voice output with SSML.

• Click on the Customize audio output.
• Add your SSML code in the speech output box.
• Now click Save.

Here I have added an example:

Now, let’s go a little richer experience with the suggestion chips.

Suggestion Chips

Suggestion Chips are a great help for your users to follow up the conversation easily. It gives hints on the responses they can make. If there is a primary call for action during your conversation flow, you can list it first to provide the best experience. Here I have an example of usage of Simple Response with my Action for the GDG Kozhikode community.

This is it. From the example, you can see how Suggestion Chips can help your users to follow up the conversation.

Suggestion Chips requires the actions.capability.SCREEN_OUTPUT to be used. Another type of Suggestion Chip is the LinkOutSuggestion which requires the actions.capability.WEB_BROWSER to be used in your Action. Now let’s look at how simple it’s to build up with the Dialogflow. In the Intent menu on Dialogflow under Response > Google Assistant tab click on Add Responses to set up both Suggestion and LinkOutSuggestion.

Fill the boxes with the Suggestions you want to show.

You can do the same with Fulfillment by this snippet:

It’s even richer, right? Now let’s check out the Cards.

Basic Card

Image from AoG Doc

A Basic Card is a combination of multiple visual elements that include:

• Image
• Heading
• Subheading
• Text
• Link Button
• Border

Look at this example from Actions On Google Docs.

Basic Card requires the actions.capability.SCREEN_OUTPUT. The text which should not contain any links is required if there is no image specified. Similarly, the image is required if there is no formatted text. Or you can add both of them at the same time. Image source is a URL, and you can use motion images like GIF file. The title, subtitle, link button, and border are optional. Now take a look at the snippet to create a BasicCard.

The text in BasicCard supports almost all Unicode characters including Emojis and also some markdown formatting.

Or with the Dialogflow Console: fill up the BasicCard fields appropriately!

Carousel Card

This is a visual selection response.

Image by Actions On Google

You can show a maximum of 10 tiles and a minimum of 2 tiles in a single Carousel.

Tiles should contain a required Title, an optional image of 128 dp tall x 232 dp wide, or optional plain text (Markdown is not supported) of maximum 4 lines.

Tapping an item simply generates a chat bubble with the same text as the element title. And to manage the conversation flow you must set up an intent to handle actions_intent_OPTION event. Users can also say the title of the item to respond (voice interaction is allowed).

Setup of Carousel is made very simple with the Dialogflow Console and even with the Fulfillment code.

Just fill up the fields to create Carousel cards.

Now let’s handle the user interaction.

1. Create a new intent
2. Name the intent “actions.intent.OPTION”
3. Add actions_intent_OPTION in the Events section.
4. Scroll down to Fulfillment section and enable webhook call for the intent.
5. Now, in your webhook, add this snippet:

Done!

Lists

The single-select list presents the user with a vertical list of multiple items and allows the user to select a single one. Selecting an item from the list generates a user query (chat bubble) containing the title of the list item.

Say, it’s very similar to the Carousel Cards.

Make sure your Action shows what is most important to your users at the top of the list (for example, the most popular, the recently purchased, or the most talked about). The list initially displays up to 10 elements, but users can expand the list to show more elements. The number of items that the list shows before expansion may also change depending on the surface and time.

In the Google Assistant Responses on Dialogflow, click on Add Responses > List to create a list response. You can add more list items by clicking the Add Item button given at the bottom of the list container.

User can select a list item by taping or by saying the title of the item. As in Carousel Cards selection, you will need to set up an intent to handle actions_intent_OPTION event for the user to select a list item.

For that:

1. Create a new intent
2. Name the intent “actions.intent.OPTION”
3. Add actions_intent_OPTION in the Events section.
4. Scroll down to Fulfillment section and enable webhook call for the intent.
5. Now, in your webhook, add this snippet:

Even more

There are even more kinds of responses that include

• Table cards
• Media response, etc.

I hope you can check the Actions On Google Docs for learning how to do that. You can set up those responses with Dialogflow as easy as the other responses. Try it out!

Conclusion

All these types of responses make your Action to bring the next level of experience to the user. By building high-quality Action, you can get things done for your user across Google.

Now, Head over to the Actions on Google community to discuss Actions with other developers. You can use the hashtag #AoGDevs on Twitter to join in the conversation with other Actions On Google developers and even our community experts. Join the Actions On Google developer community program and you could earn a $200 monthly Google Cloud credit and an Assistant t-shirt when you publish your first app.

Thanks!