Google action learn more button

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