Adaptive card are not showing in webchat where as showing in MS Teams

Question

We are using the below code to display the adaptive card in Webchat and Teams. Its working correctly in Teams and in Webchat its displaying as a line.

Adaptive card is showing up in MS teams

Adaptive card is showing up in Webchat

Answer 1

Webchat and msteam are different channels so it's required additional properties for rendering actions in the bot framework.

The MS Teams Adaptive card required special property with the name msteams to the object in an object submit action’s data property in order to access this functionality.

{
"type": "Action.Submit",
"title": "Click me for messageBack",
"data": {
"msteams": {
"type": "messageBack",
"displayText": "I clicked this button",
"text": "text to bots",
"value": "{\"bfKey\": \"bfVal\", \"conflictKey\": \"from value\"}"
},
"extraData": {}
}
}

As per your card "id" property is missing in the "AdaptiveSubmitAction" and need to differentiate both channel property Data values in the implementation.

Replace the "AdaptiveActionSet" code with the below one.

new AdaptiveActionSet() {
Actions = new List < AdaptiveAction > () {
    new AdaptiveSubmitAction() {
        Title = ResourceString.SubmitText,
            Id = ResourceString.SubmitText,
            if (turnContext != null && turnContext.Activity.ChannelId == Channels.Msteams) {
                Data = new Jobject {
                    {
                        "msteams",
                        new JObject {
                            {
                                "type",
                                "messageBack"
                            }, {
                                "displayText",
                                "Hello"
                            }, {
                                "text",
                                "Hello"
                            }
                        }
                    }
                }
            }
        else {
            Data = new JObject {
                {
                    "type",
                    "messageBack"
                }, {
                    "displayText",
                    "Hello"
                }, {
                    "text",
                    "Hello"
                }
            }
        }
    }
}
}

Microsoft Docs : MS Team Docs