1. Home
  2. Docs
  3. Tutorials
  4. Include a Card in Your Conversational Application’s Response

Include a Card in Your Conversational Application’s Response

Interactions between a user and a conversational app; Alexa skill, Google Home action, or Facebook messenger bot, can include rich text cards, displayed in the chat or in the companion mobile app. These are graphical cards that describe or enhance the voice interaction. While cards do not replace the conversational response, they can be a great way to enrich the response with content that is hard to return in a verbal way.

Amazon Alexa Companion mobile app with Card
Amazon Alexa Companion mobile app with Card

 

While cards vary from one platform to another, they all share some common features:

Card Title

A textual title for the card. In some cases, the name of your application will be added.

Card Image

An image relevant to the card information.

Image Format and Size

You can provide images in the following formats:

  • JPEG
  • PNG

An image cannot be larger than 2 MB.

When including an image, you provide two URLs: a smaller resolution image and a larger resolution image. The different sizes are used when displaying cards on different sized screens:

Property Description Recommended Size (in pixels)
smallImage Displayed on smaller screens 720w x 480h
largeImage Displayed on larger screens 1200w x 800h

Card Content

A textual content for the card. In some cases, rich text using HTML format is supported.

Card Types

The “Standard” card type is used to return a rich text response, as described above. There are some special types used for specific use cases

Amazon Alexa

  • AskForPermissionsConsent – Ask the user to provide access permissions to the skill
  • LinkAccount – Ask the user to link their account in the companion mobile app

Returning a Card response

To return a card response we will use the method res.card.

res.card({
  type: "Standard",
  title: "Card Title",
  text: "Card Content",
  image: {
    smallImageUrl: "https://docs.conversation.one/wp-content/uploads/2017/12/card_demo_small.png",
    largeImageUrl: "https://docs.conversation.one/wp-content/uploads/2017/12/card_demo_large.png",
  }
});

 

Was this article helpful to you? Yes 1 No

How can we help?