When building responses for our conversation tools we have the ability to send what is known as a Basic Card — this a response that is supported only for surfaces that support visual (actions.capability.SCREEN_OUTPUT) output. A Basic Card will look something like this on screen:

The important thing to note when using the Basic Card is that there must be a Simple Response sent beforehand, if not then the response will fail to be sent. This is so that there is always a speakable / readable response sent to the user for them to consume. When it comes to the Basic Card itself, you can only ever send one of these within the same response — attempting to do otherwise will also cause a failure.

Creating a Basic Card

To create a basic card, you’ll need to first add it to your imports for the actions on google SDK:

const { 
  BasicCard,
  actionsOnGoogle} = require('actions-on-google');

The next step is using your conversation instance to send a response. To do so, you need instantiate a new instance of the BasicCard class and provide the content to display, the following example generates the response shown earlier in this post:

conv.ask(new BasicCard({
  text: "Some text",
  title: "Some title",
    image: new Image({
      url: "some_image_url",
      alt: "Some alternative text",
    }),
}));

As well as this there are a collection of other properties that can be used, let’s take a quick look at all of the ones that are available:

• title — The title to be displayed on the card, this is optional.
• subtitle — The subtitle to be displayed on the card, this is optional.
• formattedText — This is the text to be displayed on the card. If no image is provided then this is required, otherwise it is optional.
• image — The image instance to be shown on the card with a fixed height of 192dp, this property is optional. The image will be loaded from the URL provided in this instance.
• buttons — An optional Button instance to be shown on the card, prompting further interaction with the card content. Allowing for an external URL to be launched when pressed.
• imageDisplayOptions — The way in which the image is to be displayed, using a ImageDisplayOptions value.

As you can see, these options provide us a way to build a contextual card to display to our user. A card must contain at least either some formattedText or an image, other than that the rest of the content is completely optional.

The Basic Card is a great way to display visual content to the user, whilst at the same time provide textual information — as well as allow for further exploration of the content by provided at most a single button to the card. We’ll explore other response types soon to help you be aware of the best way to display content in your conversations.

Tweets by hitherejoe