Rich Card attachments are not showing on web chat or Skype, but showing fine on the emulator. The attachment contains the correct data and attributes and works fine if I use ContentType + ContentURL. But if I use rich card attachments, they don't show up on Web Chat or Skype. This is my code. Please help.
Message reply = context.MakeMessage();
var actions = new List<Microsoft.Bot.Connector.Action>();
actions.Add(new Microsoft.Bot.Connector.Action
{
Title = $"I like it",
Message = $"I like it message"
});
actions.Add(new Microsoft.Bot.Connector.Action
{
Title = $"Show me more",
Message = $"Show me more message"
});
reply.Attachments = new List<Attachment>();
reply.Attachments.Add(new Attachment()
{
Title = p.Title,
TitleLink = p.DetailPageURL,
ThumbnailUrl = p.MediumImage,
Text = p.Title,
Actions = actions,
FallbackText ="The message attachment is not rendering for: " + p.Title
});
await context.PostAsync(reply);
context.Wait(MessageReceived);
From the bot framework page:
Important:You should test Skype bots using the developer version of the Skype Web App until updated Skype apps for desktop and mobile are available at the end of July. https://web.skype.com/en/?ecsoverride=developer
This should be resolved now with latest Skype clients now that Bot Framework V3 has been released.
Related
I am using Adaptive Card 1.2 to be displayed on MS Teams. I want to style the action button but not able to do do.
subCard.Actions = new List<AdaptiveAction>() {
new AdaptiveSubmitAction {
Title = "Ok",
DataJson = "{ \"Type\": \"response_feedback\" }",
Style="positive",
}
};
From my testing, it seems like Style is not implemented in Teams, at least not at the moment. By the way, you can use App Studio to test this - there's a tab there called "card editor" where you can create card JSON, see a preview, and even send it to yourself.
We have an O365 add-in that works on Calendar. It puts HTML to the body of the invite. All works well except the Image we put. How to make the image appear in the Invitation email view?
var logo = "<div style=\"line-height:60px\"><img src=\"https://static-a.test.com/a2/custom-assets/enterprise/4714/isg_logo/d05aa76d58614c0e88b864eec963cec0.png\" height=\"30\" alt=\"Test Meet\" style=\"user-select: none;\" tabindex=\"0\"></div>";
var formattedBody = agenda
+ _.repeat(newLine, 1)
+ logo
+ testInvitation;
return Q.oinvoke(Office.context.mailbox.item.body, "setAsync", formattedUserBody, { coercionType: coercionType })
.then(function() {
logger.info("Add meeting completed successfully");
});
Is there another way to fix it or is it a known limitation of Outlook?
Logo renders properly in Calendar view, not on Email view
Some VSTO add-in can render the logo, but not Office 365 addin
Logo is seen in OWA and Mobile apps, but not in Outlook 2016 Mac and windows
We fixed the issue by following this link in Outlook 2013.
----- 01/09/19 - Update on Issues following the Solution provided ----------
The primary issue reported got fixed by the solution. Now, we can see Logo in email invitation, but it is broken in Calendar view.
The changed code:
var formattedBody = agenda
+ _.repeat(newLine, 1)
+ "<img src='cid:testMeet.png'/>"
+ testInvitation;
Office.context.mailbox.item.addFileAttachmentAsync(
"https://static-a.test.com/a2/custom-assets/enterprise/4714/isg_logo/d05aa76d58614c0e88b864eec963cec0.png",
"testMeet.png",
{asyncContext: null, isInline: true},
function (asyncResult) {
Office.context.mailbox.item.body.setAsync(
formattedBody,
{ coercionType: Office.CoercionType.Html, asyncContext:null });
});
This fix also breaks the logo rendering in Outlook Mobile App. Please advise as we need to have the logo between Agenda (if any) and our Text.
---- Screenshot 01/16/2019 -----
------ Outlook Matrix 01/26/2019 -------
Adding an image to the body this way is incorrect, and as you have seen, sometime buggy. Instead you should use addFileAttachmentAsync, more specifically the isInline property, which will allow you to use a cid: reference to add your image.
An example of this would be:
Office.context.mailbox.item.addFileAttachmentAsync(
"https://static-a.test.com/a2/custom-assets/enterprise/4714/isg_logo/d05aa76d58614c0e88b864eec963cec0.png",
"testMeet.png",
{asyncContext: null, isInline: true},
function (asyncResult) {
Office.context.mailbox.item.body.setAsync(
"<img src='cid:testMeet.png'/>",
{ coercionType: Office.CoercionType.Html, asyncContext: null });
});
I have defined a ThumbnailCard using this structure:
private static Attachment GetThumbnailCard()
{
var thumbnailCard= new ThumbnailCard
{
Title = "title",
Subtitle = "subtitle",
Text = "text",
Images = new List<CardImage>() { new CardImage(url: "http://example.com/image.jpg")},
Buttons = new List<CardAction>() { new CardAction(type: ActionTypes.ImBack, title: "Product 1", value: "Product 01") },
};
return thumbnailCard.ToAttachment();
}
And everything is working fine, the button is showing "Product 1" and when the user uses the button you see on the chat window the content of value in this case "Product 01".
But i need more functionality, so i review the documentation and found other parameters of the cardAction class like text and displayText.
So that when the user uses the button on the chat you will see "I want to buy Product 01", and the bot will get the Id of that product so it can check it on the database.
I have done this according to the documentation:
new CardAction(type: ActionTypes.ImBack, title: "Product 1", value: "IdOfProduct01", text: "Product 01", displayText: "I Want to buy Product 01")
And i am receiving the value on this method:
private async Task ReceivingButtonClick(IDialogContext context, IAwaitable<object> result)
{
var rpta = await result as Activity;
}
But when i try to access rpta.value it is always null, and the chat windows is still showing the content of value instead of displayText or text
Does anyone knows if maybe this functionality is not available yet, i'm using Microsoft.Bot.Builder 3.13.1 and i am testing this on the emulator, or maybe i'm receiving the result as an Activity and i should be receiving it as something else.
Thanks in advance for the answers.
This is the current behavior in BOT Framework. ImBack is similar to just typing a message and it sends back whatever was set in the 'value'. I guess you don't want to show id to the user when he/she clicks the product button. You can instead use ActionTypes.PostBack as type and that will send back the message to BOT but not show it on chat.
Try this:
new CardAction(type: ActionTypes.PostBack, title: "Product 1", value: "IdOfProduct01", text: "Product 01", displayText: "I Want to buy Product 01")
The problem with using PostBack is that it is not supported in all channels. So, make sure to check it for the channel you are implementing your bot for.
Does anyone knows if maybe this functionality is not available yet, i'm using Microsoft.Bot.Builder 3.13.1 and i am testing this on the emulator, or maybe i'm receiving the result as an Activity and i should be receiving it as something else.
The displayText and Text properties of CardAction were new added in v3 SDK, problem is that DirectLineJS hasn’t been modified to support these properties yet. You may refer to the source code of directLine.ts to see that problem.
And our emulator uses WebChat and WebChat uses DirectLine, so for ActionTypes.ImBack, that cause the problem.
You may submit an issue on Github BotFramework-WebChat, it will be convenient for us to monitor this issue. Thank you.
I am using hero card to display the result to the user for their questions but it's not displaying in MS Teams channel.
It's working in Skype.
Is there any issue in BOT framework regarding this?
And is there any way to fix this?
It may be the issue with the http:// and https://
cardImages.Add(new CardImage(url: "https://<ImageUrl1>"));
Just use the url as https://
and
ThumbnailCard plCard = new ThumbnailCard()
{
Title = "I'm a thumbnail card",
Subtitle = "Pig Latin Wikipedia Page",
Images = cardImages,
Buttons = cardButtons
};
I want to capture the user behavior in my chatbot after each response given by bot. it basically a feedback, like/dislike button in Facebook.
Is it possible in MS bot framework?
You can implement feedback yes no button or like button using rich card or hero card.
Many messaging channels provide the ability to attach richer objects. The Bot Framework has the ability to render rich cards as attachments. There are several types of cards supported: Hero Card, Thumbnail Card, Receipt Card, Sign-In Card, Animation Card, Video Card and Audio Card. Once the desired Card type is selected, it is mapped into an Attachment data structure. Check out the key code located in the CardsDialog class where the message.Attachments property of the message activity is populated with a card attachment.
public async Task DisplaySelectedCard(IDialogContext context, IAwaitable<string> result)
{
var selectedCard = await result;
var message = context.MakeMessage();
var attachment = GetSelectedCard(selectedCard);
message.Attachments.Add(attachment);
await context.PostAsync(message);
context.Wait(this.MessageReceivedAsync);
}
Hero Card
The Hero card is a multipurpose card; it primarily hosts a single large image, a button, and a "tap action", along with text content to display on the card. Check out the GetHeroCard method in the CardsDialog class for a Hero Card sample.
private static Attachment GetHeroCard()
{
var heroCard = new HeroCard
{
Title = "BotFramework Hero Card",
Subtitle = "Your bots — wherever your users are talking",
Text = "Build and connect intelligent bots to interact with your users naturally wherever they are, from text/sms to Skype, Slack, Office 365 mail and other popular services.",
Images = new List<CardImage> { new CardImage("https://sec.ch9.ms/ch9/7ff5/e07cfef0-aa3b-40bb-9baa-7c9ef8ff7ff5/buildreactionbotframework_960.jpg") },
Buttons = new List<CardAction> { new CardAction(ActionTypes.OpenUrl, "Get Started", value: "https://learn.microsoft.com/bot-framework") }
};
return heroCard.ToAttachment();
}
i have create a sample. Sharing image with you. On click of Yes it will show a card to give rating as well.