Subscribe

Google action learn more button

โœ๏ธ

Adding a learn more button to a Google action response

14 Sep, 2022 ยท 2 min read

Now that we are able to fetch data from an RSS feed and show it in the Google Action, how about we add a button to learn more.

A thing to note is that depending on the device, the button might not be rendered. For instance smart home devices won't show the button, the mobile assistant on the other hand will show them.

For this article i'll be using what we build yesterday, you can find the article here.

Adding a learn more button to Google action

We can actually add the button component as part of our allready existiong card and leverage the RSS data we fetched.

The card can look like this:

conv.add(
  new Card({
    title: jsonData.feed.entry[0].title._cdata,
    text: jsonData.feed.entry[0].content._cdata,
    image: new Image({
      url: 'https://daily-dev-tips.com/images/logo.png',
      alt: 'Daily Dev Tips logo',
    }),
    button: new Link({
      name: 'Read more',
      open: {
        url: jsonData.feed.entry[0].link._attributes.href,
      },
    }),
  })
);

Make sure your importing this new Link component like this:

const { Link } = require('@assistant/conversation');

And if we now test our action on mobile phones for instance we should see the button that will link to the specific article.

Below is a screen recording on my mobile phone showing the full flow.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Google actions recap

16 Sep, 2022 ยท 2 min read

Google actions recap

Deploying a Google action

15 Sep, 2022 ยท 2 min read

Deploying a Google action

Join 1828 devs and subscribe to my newsletter