Free Chapter
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:
Images sent to Skype cards need to be stored on an HTTPS endpoint. Skype cards do not currently support postBack actions.
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:
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. |
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. |
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 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 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.
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. |
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. |
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. |
