Exploring Actions on Google Responses: Basic Card

When sending responses from our Actions on Google conversational tools, there are a number of different ways in which we can present content to our users. In this post we’re going to look at adding responses to our conversations using the Basic Card.

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 { 
  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.

Leave a Reply

Your email address will not be published. Required fields are marked *