Implementing Rich Responses in SUSI Action on Google Assistant
Google Assistant is a personal assistant. This tutorial will tell you how to make a SUSI action on Google, which can only respond to text messages. However, we also need rich responses such as table and rss responses from SUSI API. We can implement following types of rich responses: List Carousel Suggestion Chip List: A list will give the user multiple items arranged vertically. In SUSI webchat table type responses are handled with a list and it looks like this: Now in order to show to list from SUSI Action on Google, we will use first key (i.e Recipe Name in above screenshot) as a title for each item in the list and rest of keys as a description for that item. For building we will use the following code: assistant.askWithList(assistant.buildRichResponse() .addSimpleResponse('Any text you want to send before list'), // Build a list assistant.buildList(‘Title of the list here’) // First item in list .addItems(list[1]) // Second item in list .addItems(list[2]) // Third item in carousel .addItems(list[3]) ); In .addItems we will add the object after populating it from data that we will get from SUSI API and we will populate it with following code: for (var i = 0; i < metadata.count; i++) { list[i] = assistant.buildOptionItem('ID for item', ['keyword','keyword','keyword']) .setTitle('title of your item in the list here') .setDescription('description of item in list') } A list should have at least two items in it. List title and descriptions are optional and title of the item in the list is compulsory. We can also set image for list items in following way. .setImage('link for the image here', 'Image alternate text') Setting image in the list is optional and image size will be 48x48 pixels. Carousel: Carousel messages are cards that we can scroll horizontally. In SUSI webchat RSS type responses are handled with the list and it looks like this: In order to show carousel from SUSI Action on Google we will use the following code: assistant.askWithCarousel(assistant.buildRichResponse() .addSimpleResponse('Any text you want to send before carousel'), // Build a list assistant.buildCarousel() // First item in carousel .addItems(list[1]) // Second item in carousel .addItems(list[2]) // Third item in carousel .addItems(list[3]) ); Again we will populate .addItems() just like we did for the list. Carousel should have at least two tiles. Just like in the list, the title is compulsory and description and image are optional. Image size in the carousel is 128dp x 232dp. You can set image same as we have set image in the list above. Suggestion Chip: Suggestion chip is used to add a hint to a response i.e if you want to give the user a list of suggested responses, we can use suggestion chip. To add suggestion chip to any response you just have to add .addSuggestions(['Hint1', 'Hint2', 'Hint3', 'Hint4']) to your response code after .addSimpleResponse() See how SUSI Action on Google replies to table and RSS type responses in this video https://youtu.be/rjw-Vg4X57g and If you want to learn more about Actions on Google refer to https://developers.google.com/actions/components/…
