Lägga till omfattande kortbilagor i meddelanden med Bot Connector-API:et
Vissa kanaler gör att din robot kan skicka omfattande kort till användare. Ett rtF-kort är en bifogad fil som innehåller interaktiva element, till exempel knappar, text, bilder, ljud, video och så vidare.
Den här artikeln beskriver hur du skapar omfattande kort som du kan koppla till ett meddelande. Se hur du lägger till mediebilagor i meddelanden för specifika instruktioner om hur du lägger till en bifogad fil i ett meddelande.
Typer av omfattande kort
Ett omfattande kort består av en rubrik, en beskrivning, en länk och bilder. Ett meddelande kan innehålla flera rtF-kort, som visas i listformat eller karusellformat. Bot Framework stöder för närvarande åtta typer av omfattande kort:
| Korttyp | beskrivning |
|---|---|
| AdaptiveCard | Ett anpassningsbart kort som kan innehålla valfri kombination av text, tal, bilder, knappar och indatafält. Se stöd per kanal. |
| Animeringskort | Ett kort som kan spela upp animerade GIF-filer eller korta videor. |
| Ljudkort | Ett kort som kan spela upp en ljudfil. |
| HeroCard | Ett kort som vanligtvis innehåller en enda stor bild, en eller flera knappar och text. |
| Miniatyrkort | Ett kort som vanligtvis innehåller en enda miniatyrbild, en eller flera knappar och text. |
| Kvittonkort | Ett kort som gör det möjligt för en robot att ge användaren ett kvitto. Den innehåller vanligtvis listan över objekt som ska inkluderas på kvittot, skatt och total information och annan text. |
| SignInCard | Ett kort som gör det möjligt för en robot att begära att en användare loggar in. Den innehåller vanligtvis text och en eller flera knappar som användaren kan klicka på för att initiera inloggningsprocessen. |
| Videokort | Ett kort som kan spela upp videor. |
Dricks
Information om vilka funktioner som stöds på varje kanal finns i artikeln kanalreferens .
Bearbeta händelser inom omfattande kort
Om du vill bearbeta händelser inom rich cards använder du CardAction-objekt för att ange vad som ska hända när användaren klickar på en knapp eller trycker på en del av kortet. Varje CardAction objekt innehåller följande egenskaper:
| Property | Type | Beskrivning |
|---|---|---|
| channelData | sträng | kanalspecifika data som är associerade med den här åtgärden |
| displayText | sträng | test för att visa i chattflödet om knappen klickas |
| text | sträng | text för åtgärden |
| type | sträng | typ av åtgärd (ett av de värden som anges i tabellen nedan) |
| rubrik | sträng | knappens rubrik |
| bild | sträng | bild-URL för knappen |
| värde | sträng | värde som krävs för att utföra den angivna typen av åtgärd |
Kommentar
Knappar i adaptiva kort skapas inte med hjälp av CardAction objekt, utan i stället med hjälp av schemat som definieras av adaptiva kort.
Se Lägga till ett adaptivt kort i ett meddelande för ett exempel som visar hur du lägger till knappar i ett adaptivt kort.
Om du vill fungera korrekt tilldelar du en åtgärdstyp till varje klickbart objekt på ett hero-kort. Den här tabellen visar och beskriver tillgängliga åtgärdstyper och vad som ska finnas i den associerade värdeegenskapen.
Kortåtgärden messageBack har en mer generaliserad betydelse än de andra kortåtgärderna. Mer information om messageBack och andra kortåtgärdstyper finns i avsnittet Kortåtgärd i aktivitetsschemat.
| Typ | Beskrivning | Värde |
|---|---|---|
| call | Initierar ett telefonsamtal. | Målet för telefonsamtalet i det här formatet: tel:123123123123. |
| downloadFile | Laddar ned en fil. | URL:en för filen som ska laddas ned. |
| imBack | Skickar ett meddelande till roboten och publicerar ett synligt svar i chatten. | Text på meddelandet som ska skickas. |
| messageBack | Representerar ett textsvar som ska skickas via chattsystemet. | Ett valfritt programmatiskt värde som ska inkluderas i genererade meddelanden. |
| openUrl | Öppnar en URL i den inbyggda webbläsaren. | Url:en som ska öppnas. |
| playAudio | Spelar upp ljud. | URL:en för det ljud som ska spelas upp. |
| playVideo | Spelar upp en video. | URL:en för videon som ska spelas upp. |
| postBack | Skickar ett meddelande till roboten och kanske inte publicerar ett synligt svar i chatten. | Text på meddelandet som ska skickas. |
| showImage | Visar en bild. | URL:en för den bild som ska visas. |
| signin | Initierar en OAuth-inloggningsprocess. | URL:en för OAuth-flödet som ska initieras. |
Lägga till ett Hero-kort i ett meddelande
Så här lägger du till en omfattande kortbilaga i ett meddelande:
- Skapa ett objekt som representerar den typ av kort som du vill lägga till i meddelandet.
- Skapa ett bifogat objekt:
- Ange dess
contentTypeegenskap till kortets medietyp. - Ange dess
contentegenskap till det objekt som du skapade för att representera kortet.
- Ange dess
- Lägg till objektet
Attachmentiattachmentsmeddelandets matris.
Dricks
Meddelanden som innehåller omfattande kortbilagor anger textvanligtvis inte .
I vissa kanaler kan du lägga till flera omfattande kort i matrisen attachments i ett meddelande. Den här funktionen kan vara användbar i scenarier där du vill ge användaren flera alternativ. Om din robot till exempel tillåter användare att boka hotellrum kan den ge användaren en lista med omfattande kort som visar typerna av tillgängliga rum. Varje kort kan innehålla en bild och lista över bekvämligheter som motsvarar rumstypen och användaren kan välja en rumstyp genom att trycka på ett kort eller klicka på en knapp.
Dricks
Om du vill visa flera rtF-kort i listformat anger du aktivitetsobjektets attachmentLayout egenskap till "list".
Om du vill visa flera rtf-kort i karusellformat anger du Activity objektets attachmentLayout egenskap till "karusell".
Om kanalen inte stöder karusellformat visas de omfattande korten i listformat, även om attachmentLayout egenskapen anger "karusell".
I följande exempel visas ett fullständigt meddelande som innehåller en enda Hero-kortbilaga. I den här exempelbegäran https://smba.trafficmanager.net/teams representerar den grundläggande URI:n. Bas-URI:n för begäranden om att dina robotproblem kan vara annorlunda. Mer information om hur du anger bas-URI finns i API-referens.
POST https://smba.trafficmanager.net/teams/v3/conversations/abcd1234/activities/5d5cdc723
Authorization: Bearer ACCESS_TOKEN
Content-Type: application/json
{
"type": "message",
"from": {
"id": "12345678",
"name": "sender's name"
},
"conversation": {
"id": "abcd1234",
"name": "conversation's name"
},
"recipient": {
"id": "1234abcd",
"name": "recipient's name"
},
"attachments": [
{
"contentType": "application/vnd.microsoft.card.hero",
"content": {
"title": "title goes here",
"subtitle": "subtitle goes here",
"text": "descriptive text goes here",
"images": [
{
"url": "https://www.publicdomainpictures.net/pictures/30000/t2/duck-on-a-rock.jpg",
"alt": "picture of a duck",
"tap": {
"type": "playAudio",
"value": "url to an audio track of a duck call goes here"
}
}
],
"buttons": [
{
"type": "playAudio",
"title": "Duck Call",
"value": "url to an audio track of a duck call goes here"
},
{
"type": "openUrl",
"title": "Watch Video",
"image": "https://www.publicdomainpictures.net/pictures/30000/t2/duck-on-a-rock.jpg",
"value": "url goes here of the duck in flight"
}
]
}
}
],
"replyToId": "5d5cdc723"
}
Lägga till ett adaptivt kort i ett meddelande
Det adaptiva kortet kan innehålla valfri kombination av text, tal, bilder, knappar och indatafält. Adaptiva kort skapas med det JSON-format som anges i Adaptive Cards, vilket ger dig fullständig kontroll över kortinnehåll och format.
Använd informationen på webbplatsen Adaptive Cards för att förstå schemat för adaptiva kort, utforska adaptiva kortelement och se JSON-exempel som kan användas för att skapa kort med varierande sammansättning och komplexitet. Dessutom kan du använda Den interaktiva visualiseraren för att utforma adaptiva kortnyttolaster och förhandsgranskningskortutdata.
I följande exempel visas ett enda adaptivt kortbilagor som representerar en arbetstilldelning. Om du vill skicka detta till en användare måste du lägga till det som en bifogad fil i ett meddelande.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Publish Adaptive Card schema",
"weight": "bolder",
"size": "medium"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
"size": "small",
"style": "person"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Matt Hidinger",
"weight": "bolder",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "none",
"text": "Created {{DATE(2017-02-14T06:08:39Z, SHORT)}}",
"isSubtle": true,
"wrap": true
}
]
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
"wrap": true
},
{
"type": "FactSet",
"facts": [
{
"title": "Board:",
"value": "Adaptive Card"
},
{
"title": "List:",
"value": "Backlog"
},
{
"title": "Assigned to:",
"value": "Matt Hidinger"
},
{
"title": "Due date:",
"value": "Not set"
}
]
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "Comment",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "comment",
"isMultiline": true,
"placeholder": "Enter your comment"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK"
}
]
}
},
{
"type": "Action.OpenUrl",
"title": "View",
"url": "https://adaptivecards.io"
}
]
}
Det resulterande kortet innehåller en rubrik, information om vem som skapade kortet (deras namn och avatar), när kortet skapades, en beskrivning av arbetstilldelningarna och information som är relaterad till tilldelningen. Det finns också knappar som kan klickas för att antingen kommentera arbetstilldelningen eller visa den:
