Forum Discussion
arie_schwartzman
Microsoft
MicrosoftUse Video Cards in Health Bot using Web Chat
There are several ways to display video content inside a Health Bot conversation using WebChat client.
One way is to use Adaptive Cards. But if you don't need all the layout features of an adaptive card, you can also use a much simpler "VideoCard" attachment as part of a prompt or a statement in your Health Bot scenario flow. Based on the video source url, it will host YouTube or Vimeo video clips inside an iframe in the WebChat widget. Create a prompt or a statement step, click on adding a "Dynamic Card" and paste code snippet such as this:
(function(){
return [
{
contentType: "application/vnd.microsoft.card.video",
content: {
media: [{
url: "https://youtu.be/rwe2291YT8Rxw?si=t5m40pOGou5XdFqm"
}],
}
}
]
})()
This will generate an attachment JSON that will be added to the prompt/statement activity. Obviously, you can use an expression instead of the hard codes URL link.
When running the bot scenario, in WebChat widget, you will see the prompt hosting the native player with all the features.
Hi,
Can we attach an array of Adaptive Cards using the Dynamic Card, to display as a Carousel?
I am trying to do something like below in a Dynamic Card, but it just displays empty cards in the carousel.
(function(){
var data = ${dataList};
var cards = data.map(function(item) {
return {
type: "AdaptiveCard",
$schema: "http://adaptivecards.io/schemas/adaptive-card.json",
version: "1.3",
body: [
{
type: "Container",
isVisible: true,
items: [
{
type: "Image",
style: "person",
url: item.imageUrl,
altText: item.imageAltText,
size: "medium"
},
{
type: "TextBlock",
text: item.title,
weight: "bolder",
size: "medium",
wrap: true
}
]
},
{
type: "ActionSet",
actions: [
{
type: "Action.OpenUrl",
title: "View Profile",
url: item.buttonUrl,
id: item.buttonId
}
]
}
]
}
});
return cards;
})();
Am I missing something here?
Thanks,
Abhilash
