I've been trying to send cards to Teams channels through a connector. The cards do appear but any hero image I try to send isn't displayed.
The Message Card Playground displays the image correctly but it simply doesn't show up in Teams. I have no issues with the "normal" images.
Here is the JSON that I'm sending through the webhook, but I've also tried the Twitter - Hero image sample card and it doesn't work either :
{
"#type": "MessageCard",
"#context": "http://schema.org/extensions",
"summary": "Hero card testing",
"title": null,
"text": null,
"themeColor": "19b5fe",
"sections": [
{
"title": null,
"activityImage": "https://pbs.twimg.com/profile_images/862653089916096512/ljJwcmFp_bigger.jpg",
"activityTitle": "Hero image card",
"activitySubtitle": "This is a test",
"facts": [],
"text": null,
"heroImage": {
"image": "https://pbs.twimg.com/media/DFv74A0XkAEdwQ_.jpg"
},
"images": []
}
]
}
Am I missing something ?
I hit the same problem. It looks like as a sort of workaround you can use the inline image markdown syntax in a non-section's text.
{
"#type": "MessageCard",
"#context": "http://schema.org/extensions",
"summary": "Summary",
"title": "Title",
"text": "",
"themeColor": "E81123"
}
I describe it as a workaround though because the image is not scaled in any way when displayed. As you can see from this example a large image is left very large and overflowing the container.
HeroImage is not currently supported in Teams. This is on the backlog but no ETA at this point.
Hero Images ('heroImage') are currently support only in Outlook. Would be available in Teams sometime in future.
Card with a hero image
Try the sample Twitter markup for in the card playground: https://aka.ms/messagecardplayground
Related
Going through the issues page of bot framework composer, I stumbled on this issue which shows an interesting UI card for getting the user's satisfactory :
Does this looks like an adaptive card ? How can we reproduce that ?
the easiest thing to do is go to the designer on Adaptivecards.io. They have a super simple Adaptive Cards Designer experience that is drag and drop.
on other tabs they have example templates which you can launch in the designer to see how they work and play with them.
In your example above, the card is simply a text field with two image links and the images are clickable.
You can use the containers and/or columns components in the designer to layout the items.
You can use a hero card to get user satisfaction response by using thumbs up/thumbs down emoji.
[Herocard
text = Are you satisfied?
buttons = 👍 | 👎
]
Following JSON is a sample for thumbs up and down input choice
{
"type": "TextBlock",
"text": "Do you like the product"
},
{
"type": "Input.ChoiceSet",
"style": "expanded",
"isMultiSelect": false,
"choices": [
{
"title": "👍",
"value": "yes"
},
{
"title": "👎",
"value": "no"
}
],
"placeholder": "Placeholder text",
"spacing": "None"
},
I'm trying to send a Connector Card with the Hero Image tag.
I have followed the examples from the MessageCard Playground
but even when copying the examples exactly, they will not show either. No errors, the card shows fine, except for the hero image.
The json I'm sending:
{
"#type": "MessageCard",
"#context": "http://schema.org/extensions",
"summary": "Task 42",
"title": "Task Done: \"Building the Super Computer\"",
"sections": [
{
"activityTitle": "Mice of Earth",
"activitySubtitle": "9/13/2016, 11:46am",
"activityImage": "http://static.website.com/images/smallimage.jpg",
"facts": [
{
"name": "Team:",
"value": "Team-Poster"
},
{
"name": "Task #:",
"value": "42"
}
],
"text": "Build supercomputer to answer the ultimate question",
"heroImage": {
"image": "http://static.website.com/images/party-1644648_1920.jpg",
"title": "This is the image's alternate text"
},
}
]
}
The Outlook Actionable Messages documentation also talks about the hero image, but lacks examples.
Yes, Currently the Hero Image is not supported in Microsoft teams for Connector Cards. You can follow the documentation here : https://msdn.microsoft.com/en-us/microsoft-teams/teams-bots-cards and https://msdn.microsoft.com/en-us/microsoft-teams/connectors, it is clearly stated.
I am trying to create a bot and deploy it onto different platforms, but when I return images in the carousel for the chatbot, Skype doesn't render them, while the same works for Facebook and even on the web widget provided by Gupshup.
If you want to know the chatbot platform i'm using it would be Gupshup with api.ai hooked for nlp , do you know the problem i am encountering?
I have tried different ways of getting the image. First I got it from the site I am making the chatbot for, then I tried shortening the url using google and finally I tried uploading the image on Google drive.The image format is jpg could that be the issue?
http://imgur.com/a/19aG3
[Update:7/5/2017] - Skype issue is now resolved. The carousel code that is working for Facebook Messenger will also work for Skype.
Sample JSON for Carousel on Skype:
{
"type": "catalogue",
"msgid": "cat_212",
"items": [{
"title": "White T Shirt",
"subtitle": "Soft cotton t-shirt \nXs, S, M, L \n$10",
"imgurl": "https://pixel.nymag.com/imgs/fashion/daily/2016/06/02/t-shirt/everlane.w710.h473.2x.jpg",
"options": [{
"type": "url",
"title": "View Details",
"url": "https://pixel.nymag.com/imgs/fashion/daily/2016/06/02/t-shirt/everlane.w710.h473.2x.jpg"
},
{
"type": "text",
"title": "Buy"
}
]
},
{
"title": "Grey T Shirt",
"subtitle": "Soft cotton t-shirt \nXs, S, M, L \n$12",
"imgurl": "https://cdn.shopify.com/s/files/1/0407/0829/products/Grey_t-shirt_front_1024x1024.jpg?v=1466588290",
"options": [{
"type": "url",
"title": "View Details",
"url": "https://cdn.shopify.com/s/files/1/0407/0829/products/Grey_t-shirt_front_1024x1024.jpg?v=1466588290"
},
{
"type": "text",
"title": "Buy"
}
]
}
]}
Result:
Images are not loading for the carousel on Skype because there have
been recent changes in Microsoft framework which are not yet
incorporated in Gupshup's bot platform. Although next week you should
be able to see those images load once we at Gupshup pushes the fix
into production. There will be no need of changing the code from your
end as the same code for carousel works across the supported
platforms.
I will update this answer once the fix is live into production.
PS: I work for Gupshup.
Consider there is a action card response from the MS bot & it looks as follows in skype:
When this similar response comes in the REST APIs i.e using Direct Line APIs. The following is the relevant part of JSON response.
{
"id": "1t90Ym3PEry|000000000000000014",
"conversationId": "1t90Ym3PEry",
"created": "2016-12-06T09:34:55.6280699Z",
"from": "rich3cards",
"images": [
"https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Seattlenighttimequeenanne.jpg/320px-Seattlenighttimequeenanne.jpg"
],
"attachments": [],
"eTag": "W/\"datetime'2016-12-06T09%3A34%3A54.94083Z'\""
},
{
"id": "1t90Ym3PEry|000000000000000014",
"conversationId": "1t90Ym3PEry",
"created": "2016-12-06T09:34:55.6280699Z",
"from": "rich3cards",
"text": "Hero Card\n\nSpace Needle\n\nThe <b>Space Needle</b> is an observation tower in Seattle, Washington, a landmark of the Pacific Northwest, and an icon of Seattle.\n\n(Current Weather) action?weather=Seattle, WA",
"images": [],
"attachments": [],
"eTag": "W/\"datetime'2016-12-06T09%3A34%3A54.94083Z'\""
}
Now, the question is about how do we parse this json to get the button data [(Current Weather) action?weather=Seattle, WA"] out of the text attribute? Is the only way is patter match ?
Has anyone faced or know solution, please put some light here too ;)
Update: If its different channel like skype/webchat/etc.. the JSON response looks very proper to consume, following is the sample JSON.
{
"type": "message",
"id": "5AdoK89rtSc|000000000000000018",
"timestamp": "2016-12-06T09:53:20.4777291Z",
"channelId": "webchat",
"from": {
"id": "rich3cards",
"name": "RichCards"
},
"conversation": {
"id": "5AdoK89rtSc"
},
"attachments": [
{
"contentType": "application/vnd.microsoft.card.hero",
"content": {
"title": "Hero Card",
"subtitle": "Space Needle",
"text": "The <b>Space Needle</b> is an observation tower in Seattle, Washington, a landmark of the Pacific Northwest, and an icon of Seattle.",
"images": [
{
"url": "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Seattlenighttimequeenanne.jpg/320px-Seattlenighttimequeenanne.jpg"
}
],
"buttons": [
{
"type": "postBack",
"value": "action?weather=Seattle, WA",
"title": "Current Weather"
}
]
}
}
]
As mentioned in the comments, you are using DirectLine v1.1. Unfortunately, v1.1 doesn't support attachments/cards and so there isn't a good way to understand/parse the card.
You might want to consider moving to DirectLine v3 which has full support for attachments.
Alternatively, if you want to support Cards, you might have to do something custom as shown in the DirectLine sample. There, the bot is sending the hero card through the ChannelData field and the client is parsing that accordingly. However, you might have to add the logic to detect who is talking to the bot so you send the cards as ChannelData only if the caller is DirectLine and not one of the other clients (such as skype)
I am using the Bot framework to create a chat bot. And I want to create message card (Hero or Thumbnail).
If you look at the skype bot api doc, there is a way to encode image bytes directly as the content url. https://docs.botframework.com/en-us/skype/chat/
"type": "message/image",
"attachments": [
{
"contentUrl": "<base64 encoded image>",
"thumbnailUrl": "<base64 encoded thumbnail>", // optional
"filename": "bear.jpg" // optional
}
]
This works fine for showing an image only. But I want the image to be part of a card.
The card is
{
"type":"message/card.carousel",
"attachments":[
{
"contentType":"application/vnd.microsoft.card.hero",
"content":{
"images":[
{
"image":"https://foo.com/path/image.jpg",
}
I have tried to set the image url property to the encoded bytes, but the client can't show it. What's the best way to achieve this?
You've got the basic idea. Use this instead:
"attachments": [
{
"contentType": "application/vnd.microsoft.card.hero",
"content": {
"title": "Title",
"subtitle": "SubTitle",
"text": "Text",
"images": [
{
"url": "image/jpeg;base64,{YOUR IMAGE}",
"alt": "Alt Image Description"
}
]
}
}
],