For our bot in Teams, using the Microsoft Bot Framework, I want the bot to send a card with a button that, when clicked, will open a task module through a deep link
Deep link:
https://teams.microsoft.com/l/task/<BOT_ID>?fallbackUrl=https://google.com&completionBotId=<BOT_ID>&height=large&width=large&title=Title&card=<card>
Where <card> comes from the example in the docs:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Here is a ninja cat:"
},
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png",
"size": "Medium"
}
],
"version": "1.0"
}
URL encode the JSON to: %7B%0A%20%20%20%20%22type%22%3A%20%22AdaptiveCard%22%2C%0A%20%20%20%20%22body%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22TextBlock%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Here%20is%20a%20ninja%20cat%3A%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22Image%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22url%22%3A%20%22http%3A%2F%2Fadaptivecards.io%2Fcontent%2Fcats%2F1.png%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22size%22%3A%20%22Medium%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%2C%0A%20%20%20%20%22version%22%3A%20%221.0%22%0A%7D
We then have deep link:
https://teams.microsoft.com/l/task/<BOT_ID>?fallbackUrl=https://google.com&completionBotId=<BOT_ID>&height=large&width=large&title=Title&card=%7B%0A%20%20%20%20%22type%22%3A%20%22AdaptiveCard%22%2C%0A%20%20%20%20%22body%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22TextBlock%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Here%20is%20a%20ninja%20cat%3A%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22Image%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22url%22%3A%20%22http%3A%2F%2Fadaptivecards.io%2Fcontent%2Fcats%2F1.png%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22size%22%3A%20%22Medium%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%2C%0A%20%20%20%20%22version%22%3A%20%221.0%22%0A%7D
Finally, send message through Bot Framework API:
POST https://smba.trafficmanager.net/emea/v3/conversations/<conv_id>/activities
Body:
{
"recipient": {
"id": "29:1uuzUvFTkcseXZ1Q2wOva1inGkpH1SqbHwqdXjG8MhUa8mkFsdUnvrgn4FnPbX8CwBl_GwDHSQGIlRSPKczwUFg"
},
"type": "message",
"text": "Hi 👋<br/><br/>What do you need?",
"textFormat": "xml",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content" : {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"actions": [{
"type": "Action.OpenUrl",
"title": "Display task",
"url": "https://teams.microsoft.com/l/task/<BOT_ID>?fallbackUrl=https://google.com&completionBotId=<BOT_ID>&height=large&width=large&title=Title&card=%7B%0A%20%20%20%20%22type%22%3A%20%22AdaptiveCard%22%2C%0A%20%20%20%20%22body%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22TextBlock%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Here%20is%20a%20ninja%20cat%3A%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22type%22%3A%20%22Image%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22url%22%3A%20%22http%3A%2F%2Fadaptivecards.io%2Fcontent%2Fcats%2F1.png%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22size%22%3A%20%22Medium%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%2C%0A%20%20%20%20%22version%22%3A%20%221.0%22%0A%7D"
}],
"body": []}}]}
The message appears in Teams as expected, but when clicking the button nothing happens. What am I doing wrong?
The issue was that I was sending my bot id instead of my app id for the APP_ID parameter.
I don't understand this in the docs though:
Note that it's valid for APP_ID and BOT_APP_ID to be the same, and in many cases will be if an app has a bot since it's recommended to use that as an app's ID if there is one.
How is one supposed to achieve this?
Related
On Microsoft Teams, we have a bot that sends AdaptiveCard message activities to users through the Microsoft Bot Framework REST API. Sometimes, the AdaptiveCard contains an Action.OpenUrl. With regular links such as https://google.com it works as expected, but since about one month, URL parameters with a mailto url such as mailto:recipient#domain.com no longer work: the message is sent, the button appears but clicking it does not do anything.
Sample request:
POST https://smba.trafficmanager.net/emea/v3/conversations/<conversation_id>/activities
Body:
"recipient": {
"id": "29:1uuzUvFTkcseXZ1Q2wOva1inGkpH1SqbHwqdXjG8MhUa8mkFsdUnvrgn4FnPbX8CwBl_GwDHSQGIlRSPKczwUFg"
},
"type": "message",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"url": "mailto:antoine.chopin#heyaxel.com",
"title": "TEST"
}
]
}
],
"actions": []
}
}
]
}
Currently openSafeUrlMT does not allow mailto urls. we already have a backlog feature request on this. Concern team is working on this.
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 using Microsoft bot framework, i have requirement to open URL after clicking button. I have achieve that by using Adaptive card. URL is opening in button click.
I need to implement confirmation option, when user click on button, pop should come and ask for confirmation of opening the URL.
I tried that it is working in emulator but in web it not working. it simply opens the URL without asking the confirmation.
My bot will be used in web.
I have refer https://adaptivecards.io/samples/
below is my code for adaptive card
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"actions": [
{
"type": "Action.OpenUrl",
"title": "Action.OpenUrl",
"url": "https://adaptivecards.io"
}
]
Thanks
Sanjeev Gautam
This happens only in Local Emulator,
For this to happen in browser you need to handle it differently, You can use the same adaptive cards to get this happen, I have mentioned one sample below for your reference
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "This is Vinay Jayaram Helping you to open a URL"
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "https://adaptivecards.io",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Are You sure you want to open this link?"
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "YES",
"url": "https://adaptivecards.io"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
}
]
}
Looks like this:
Onclick:
Reference: https://adaptivecards.io/explorer/Action.ShowCard.html
Let me know if this works fine for you. Happy Coding
I am serving out O365 connector cards to my teams channel in my chatbot, for the user to use an HttpPost action to send data back to the bot.
Here is a sample invoke message when the user saves:
{
"name": "actionableMessage/executeAction",
"type": "invoke",
"timestamp": "2018-06-16T20:58:24.388Z",
"localTimestamp": "2018-06-16T21:58:24.388+01:00",
"id": "snip",
"channelId": "msteams",
"serviceUrl": "https://smba.trafficmanager.net/emea-client-ss.msg/",
"from": {
"id": "snip",
"name": "my name",
"aadObjectId": "snip"
},
"conversation": {
"conversationType": "personal",
"id": "long conversation id"
},
"recipient": {
"id": "bot id",
"name": "bot name"
},
"entities": [
{
"locale": "en-US",
"country": "US",
"platform": "Web",
"type": "clientInfo"
}
],
"channelData": {
"tenant": {
"id": "tenant id"
},
"source": {
"name": "message"
}
},
"replyToId": "message id",
"value": {
"body": "{\"sportType\":\"1\", \"tournamentName\":\"FIFA Soccer World Cup\",\"startTime\":\"2018-06-14T03: 00: 00.000Z\", \"endTime\":\"2018-07-16T07: 30: 00.000Z\", \"timeZone\":\"Russian Standard Time\", \"tournamentId\": \"1\"}",
"actionId": "SaveTournament"
}
}
In response to a save card, I am returning an ActionCard in the response body, and I am including an HTTP header "CARD-UPDATE-IN-BODY" with a value "true". Here is a sample response message:
{
"#type": "ActionCard",
"inputs": [
{
"#type": "TextInput",
"isMultiline": true,
"maxLength": 500.0,
"id": "SaveStatus",
"isRequired": false,
"title": "Save Status",
"value": "You updated the tournament FIFA Soccer World Cup running from 6/14/2018 to 7/16/2018 in timezone Russian Standard Time"
}
],
"actions": [
{
"#type": "HttpPOST",
"body": "{\"tournamentId\": \"1\"}",
"name": "Update FIFA Soccer World Cup again",
"#id": "UpdateTournament#1"
}
],
"name": "Save Tournament",
"#id": "SaveTournament"
}
I have traced this in my web app so I know that is what is being returned to the bot framework middleware.
In my teams app in the browser,when I trace the response message with Fiddler, the card invoke response is not getting the refresh card I send, it is just getting a generic 200 response with an empty response body. Can anyone point me to a demo of refresh cards that work with Teams, or tell me what's wrong with my messages?
Teams doesn't support updating the original card by responding to the invoke message. Instead, you need to explicitly update the message by calling the Bot Framework API (see https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/bots/bot-conversations/bots-conversations#updating-messages).
The incoming invoke message has the information you need to update the original message:
<serviceurl>/v3/conversations/<conversationid>/activities/<activityid>
<serviceurl>: serviceUrl
<conversationid>: conversation.id
<activityid>: replyToId
(The details of how to update a message depends on exactly which SDK you're using, but in the end you'll need those 3 items to refer to the message.)
I'm trying to mention a user from an incoming webhook.
I tried a few iterations via Postman of
{
"text": "test #user"
}
or
{
"text": "test #user#email.com"
}
but none of these seem to work.
Is this simple but very important thing just not possible?
Thanks.
I'm afraid this isn't possible yet - the only way to do # mentions is by using the full Bot Framework APIs.
You're not the only one to have asked for this though, so I'll get it on the backlog.
This is now supported and documented here (https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-format?tabs=adaptive-md%2Cconnector-html#user-mention-in-incoming-webhook-with-adaptive-cards).
Sample:
{
"type": "message",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "Sample Adaptive Card with User Mention"
},
{
"type": "TextBlock",
"text": "Hi <at>Adele UPN</at>, <at>Adele AAD</at>"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"msteams": {
"entities": [
{
"type": "mention",
"text": "<at>Adele UPN</at>",
"mentioned": {
"id": "AdeleV#contoso.onmicrosoft.com",
"name": "Adele Vance"
}
},
{
"type": "mention",
"text": "<at>Adele AAD</at>",
"mentioned": {
"id": "87d349ed-44d7-43e1-9a83-5f2406dee5bd",
"name": "Adele Vance"
}
}
]
}
}
}]
}
If it helps anybody, after looking in to this and seeing it couldn't be done (still!?), a workaround for me was to change the channel notification settings to banner + feed for all new posts for relevant users in the channel. This eliminates the need to use the tag (if tagging the team).
It is supported in Teams now, however the sample code does not work in Microsoft card playground, I didn't know the code actually worked until I tried in Postman.