
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.