AdaptiveCard not rendering in Bot Framework Emulator / Web Chat

Question

Really hoping someone can help out on this.

I'm trying to achieve - a no-code chat bot using QnAMaker.ai and Azure Bot Services with AdaptiveCards to serve rich content.

I have a knowledgebase set up and published, I have a bot in Azure set up to serve that content and it seems to work okay at the first stage.

Now I'm trying to add AdaptiveCards without opening and editing the solution in VSCode - I really want to keep all this contained in a no-code solution.

I Googled how to add custom cards/content and found this post by LiveTiles - excellent - I thought, I can just add minified JSON and it will render what I want - lovely stuff!

However; despite there being a live output render on the LiveTiles site, when I take that JSON I cannot get it to render through either Web Chat or the Bot Framework Emulator.

I've tried...

• Copy/pasting the raw JSON into a QnAPair

{
    "contentType": "application/vnd.microsoft.card.adaptive",
    "content": {
        "type": "AdaptiveCard",
        "version": "1.0",
        "body": [
            {
                "type": "Image",
                "url": "",
                "size": "stretch",
                "selectAction": {
                    "type": "Action.OpenUrl",
                    "title": "Test",
                    "url": "https://www.livetiles.nyc/"
                }
            },
            {
                "type": "TextBlock",
                "text": "This is an adaptive card - if this renders it means it's worked!",
                "wrap": true
            }
        ],
        "actions": [
            {
                "type": "Action.Submit",
                "title": "Let's get started!",
                "url": "Let's get started!"
            }
        ]
    }
}

• Copy/pasting minified JSON into a QnAPair

{"contentType":"application/vnd.microsoft.card.adaptive","content":{"type":"AdaptiveCard","version":"1.0","body":[{"type":"Image","url":"","size":"stretch","selectAction":{"type":"Action.OpenUrl","title":"Test","url":"https://www.livetiles.nyc/"}},{"type":"TextBlock","text":"This is an adaptive card - if this renders it means it's worked!","wrap":true}],"actions":[{"type":"Action.Submit","title":"Let's get started!","url":"Let's get started!"}]}}

• Making a Source Excel File (which includes the JSON) and adding that to the knowledge base

All my attempts end up with the bot spitting the actual JSON at me when I ask it. Not the lovely rendered card I wanted.

Renders on the LiveTiles site:

Doesn't render on the Emulator

Or on the Web Chat

In QnAMaker.ai Test Function

Really hoping someone can offer some insight or advice to this.

Answer 1

Please try below json it works for me ,

{
  //"contentType": "application/vnd.microsoft.card.adaptive",
  //"content": {
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
      {
        "type": "Image",
        "url": "",
        "size": "stretch",
        "selectAction": {
          "type": "Action.OpenUrl",
          "title": "Test",
          "url": "https://www.livetiles.nyc/"
        }
      },
      {
        "type": "TextBlock",
        "text": "This is an adaptive card - if this renders it means it's worked!",
        "wrap": true
      }
    ],
    "actions": [
      {
        "type": "Action.Submit",
        "title": "Let's get started!",
        "url": "Let's get started!"
      }
    ]
  //}
}

I have added a screenshot below please check

code for send card as an attachment :
 var cardAttachment = Common.CreateAdaptiveCardAttachment();
                await turnContext.SendActivityAsync(MessageFactory.Attachment(cardAttachment), cancellationToken);