Search code examples
node.jsvisual-studio-codebotframework

How to include Product video in adaptive card ? - Bot Framework V4, Node.js


I am getting an error "Can't render a card" in Emulator for product video adaptive card.

I'm trying to include a product video in my adaptive card in Microsoft bot framework V4 using node.js. Below given is the json used in order to include the adaptive card.

I have saved the json content separately,

{

"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.1",
"fallbackText": "This card requires Media to be viewed. Ask your platform to update to Adaptive Cards v1.1 for this and more!",
"body": [
    {
        "type": "Media",
        "poster": "given the image url which resides in Blobs",
        "sources": [
            {
                "mimeType": "video/mp4",
                "url": "given the video url which resides in Blobs"
            }
        ]
    }
],
"actions": [
    {
        "type": "Action.OpenUrl",
        "title": "Learn more",
        "url": "https://adaptivecards.io"
    }
]
}

node.js code

const { CardFactory } = require('botbuilder');
const productContentPath = '/path/to/json/content';
await turnContext.sendActivity({
                text: 'Product Video',
                attachments: [CardFactory.adaptiveCard([productContentPath])]
            });

I don't know what is the wrong in the code, whether it is a permission issue or any other issue. I am not able to test not even in Emulator.The documentation for the json samples is from the following link. https://adaptivecards.io/samples/ProductVideo.html


Solution

  • WebChat - the underlying layer to the emulator - does not currently support v1.1 of AdaptiveCards, which is why the emulator cannot render your card. You can either change the version of your card from v1.1 to v1.0 or wait for WebChat to update on February 14th to use v1.1.

    This issue on GitHub has more detail about the WebChat update.