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.
Related
How can I get user response from the adaptive card using Adaptive Cards Action.Submit action from MS Teams channel using Microsoft Bot Framework?
Here is my sample Adaptive Card with two button Yes and No. Once the user will click on any button, I need to capture the response in the bot application in the backend implemented using Microsoft Bot Framework 4.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"text": "Does this information help you?"
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Execute",
"title": "Yes",
"verb": "personalDetailsFormSubmit",
"id": "surveyReplyYes",
"userIds": "" ,
"data":{
"key1": true,
"key2":"okay"
},
"fallback": {
"type": "Action.Submit",
"title": "Yes"
}
},
{
"type": "Action.Execute",
"title": "No",
"verb": "personalDetailsFormSubmit",
"id": "surveyReplyNo",
"userIds": "" ,
"data":{
"key1": false,
"key2":"np"
},
"fallback": {
"type": "Action.Submit",
"title": "No"
}
}
]
}
]
}
Every channel has some additional requirement to achieve this kind of requirement obviously MS Teams Channels Adaptive card required special property with the name "msteams" to the object in an object submit action's data property. As per your adaptive card, it only contains 'data' property so change a little bit and try it out.
Example:
{
"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": {}
}
}
Reference: Adaptive Cards in Teams
Essentially, your bot is a service waiting to be called by the user. When the user sends a regular text message, that will come in to your bot as a "MessageActivity" event. However, if they click a button in an Adaptive Card, that will come as an "InvokeActivity" event, so you can hook into that and check if the user clicked one of your buttons, and respond appropriately. Here's an example of a bot doing that based on one of it's cards. See in particular OnMessageActivityAsync vs OnInvokeActivityAsync (C# only - see below for Node).
Here's another very detailed blog on working with this, covering both DotNet and Node, from the Microsoft Bot Framework team. That post is a bit old, so it doesn't cover what you're using in your sample, which is quite new - Universal Actions. It's just a slightly newer way of specifying the json for the Action.
This is totally optional, but there's also a way to make the card buttons behave a little differently. For instance, when the user clicks a button you can make it appear as if the user -typed- that text into the bot. See here for more on that.
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"
},
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.
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);
I am trying to initiate a call when pressing a button within an adaptive card (in microsoft teams)
I add URL as callto:[useremail]
eventhough when I write this in the search bar in chrome it works, but when pressing the button in the adaptive card it gives me an error on the chrome page.
any idea why might this happen?
Edit:
Here's a sample card of what I used:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"size": "small",
"style": "person",
"type": "Image",
"url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
"selectAction":{
"type": "Action.OpenUrl",
"url": "callto:rex#gmail.com"
}
}
]
}
]
}
]
}
]
}
It looks like links inside Teams don't support any protocols other than the usual HTTP/S. You can turn your callto link into an https link using a redirect URL service like these: https://www.cnet.com/news/10-links-to-shorten-your-links/
If you need to generate your callto links dynamically, I'm not sure how many of those services have API's your bot can use. TinyURL does though.
It's also pretty simple to just host your own redirection service in your own domain. You could even use the same domain that your bot is running on, so your link might end up looking something like this: https://rexbot.azurewebsites.net/api/callto/rex#gmail.com
Also, you might consider getting support for this from Teams directly. You can request that they support more URL protocols.
I trying to find how to put actionable icons on Adaptive cards to use with Microsoft Teams. The aim to replace button with image icon(with all button behavior).
in Adaptive Cards 1.2 any image can have an action, see this example:
{
"type": "Image",
"style": "Person",
"url": "${creator.profileImage}",
"size": "Small",
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://www.google.de"
}
The action can be submit, openUrl etc like other actions. You can find the option in the designer aswell to try it.