Cards and buttons

Skype supports the following cards, which may have several properties and attachments. You can find information on how to use cards in the .NET SDK and Node.js SDK docs:

• Hero card
• Thumbnail card
• Carousel card (with hero or thumbnail images)
• Sign in card
• Receipt card

Images sent to Skype cards need to be stored on an HTTPS endpoint. Skype cards do not currently support postBack actions.

Hero card

The hero card renders a title, subtitle, text, large image, and buttons:

The hero card provides a very flexible layout; for example, it might contain the following:

• Image, title, subtitle, text, and three buttons
• Title, subtitle, text, and five buttons
• Title and six buttons
• Image and six buttons

The following table illustrates the flexible layout of hero card:

Property	Type	Description
title	Rich text	Title of the card, maximum two lines.
subtitle	Rich text	Subtitle appears just below the title, maximum two lines.
text	Rich text	Text appears just below the subtitle; two, four, or six lines depending on whether the title and subtitle are specified.
images:[]	Array of images	Image displayed at top of the card; aspect ratio is 16:9.
buttons:[]	Array of action objects	Set of actions applicable to the current card: three buttons, up to a maximum of six (+two if no is image is shown, +one if the title or subtitle are not included, +two if the text is not included.)
tap	Action object	This action will be activated when the user taps on the card itself.

 

Thumbnail card

The thumbnail card renders a title, subtitle, text, small thumbnail image, and buttons:

The following table explains the properties of a thumbnail card:

Property	Type	Description
title	Rich text	Title of the card, maximum two lines.
subtitle	Rich text	Subtitle appears just below the title, maximum two lines.
text	Rich text	Text appears just below the subtitle: two, four, or six lines depending on whether the title and subtitle are specified.
images:[]	Array of images	Image displayed at top of the card; the image aspect ratio in a thumbnail card is 1:1.
buttons:[]	Array of action objects	Set of actions applicable to the current card; maximum three buttons.
tap	Action object	This action will be activated when the user taps on the card itself.

Carousel

The carousel card can be used to show a carousel of images and text, with associated action buttons:

Properties are the same as for the hero or thumbnail card.

Images

Images are scaled up or down in size while maintaining the aspect ratio to cover the image area, and then cropped from the center to achieve the image aspect ratio for the card.

Images should be stored on an HTTPS endpoint, up to 1024x1024, up to 1 MB in size, and in PNG or JPEG. The properties are explained in the following table:

Property	Type	Description
url	URL	URL to the image; Must be HTTPS.
alt	String	Accessible description of the image.
value	String	Action assigned to the image.

Buttons

Buttons are shown at the bottom of the card--in a single row if they fit, or stacked. Button text is always on a single line and will be trimmed if it is too long. If more buttons than can be supported by the card are included, they will not be shown.

Actions

The following table consists of properties, types and descriptions for actions:

Property	Type	Description
type	String	Required field. One of openURL (opens the given URL), imBack (posts a message in the chat to the bot that sent the card), call (Skype or phone number), showImage (for images only, displays the image),or signin (sign in card only).
title	String	Text description that appears on the button.
tap	Action object	Value depending on the type of action. For openURL it is a URL, for signin it is the URL to the authentication flow, for imBack it is a user defined string (which may contain hidden metadata for the bot for, example, <meta roomid='10'/>, for call it can be skype:skypeid or tel:telephone, and for showImage it is not required.

Sign in

The sign in card can be used to initiate an authentication flow with predefined images and title:

The following table illustrates the properties, types and descriptions of sign in:

Property	Type	Description
text	Rich text	Text appears just below the subtitle: two lines maximum.
buttons:[]	Array of action objects	Single button of type signin.

Receipt

The receipt card can be used to send a receipt. If the height of the card is too large, it is partially folded and a Show all action is shown to expand it:

The following table explains the properties, types and descriptions of receipt card:

Property	Type	Description
title	Rich text	Title of the card. Maximum two lines.
facts:[]	Array of fact key-value pairs	Fact key is left aligned, value is right aligned.
items:[]	Array of purchased objects	Properties: title (maximum two lines), subtitle (one line), text (up to six lines depending if the title, subtitle, and price are present), price, image (1:1 aspect ratio), tap.
total	Rich text	Title of the card. Maximum two lines.
tax	Rich text	Title of the card. Maximum two lines.
vat	Rich text	Title of the card. Maximum two lines.
items:[]	Rich text	Title of the card. Maximum two lines.
images:[]	Array of images	Image displayed at top of the card. Aspect ratio 16:9.
buttons:[]	Array of action objects	Set of actions applicable to the current card.
tap	Action object	This action will be activated when the user taps on the card itself.