Carousel Card 在 BotFramework for Facebook Messenger 中运行不正常
Carousel Card is not working well in BotFramework for Facebook Messenger
我实现了一个机器人,它向用户发送英雄卡作为响应。
正如我所料,下面的代码向信使发送了一个轮播。
ConnectorClient connector = new ConnectorClient(new Uri(activity.ServiceUrl));
#region HeroCard
Activity replyToConversation = activity.CreateReply("Should go to conversation, with a hero card");
replyToConversation.Recipient = activity.From;
replyToConversation.Type = "message";
replyToConversation.Attachments = new List<Attachment>();
List<CardImage> cardImages = new List<CardImage>();
cardImages.Add(new CardImage(url: "https://upload.wikimedia.org/wikipedia/en/a/a6/Bender_Rodriguez.png"));
cardImages.Add(new CardImage(url: "https://upload.wikimedia.org/wikipedia/en/archive/a/a9/20151112035044!Banyan_Tree_(_Shiv_Bajrang_Dham_Kishunpur).jpeg"));
List<CardAction> cardButtons = new List<CardAction>();
CardAction plButton = new CardAction()
{
Value = "https://en.wikipedia.org/wiki/Pig_Latin",
Type = "openUrl",
Title = "WikiPedia Page"
};
CardAction plButton2 = new CardAction()
{
Value = "https://en.wikipedia.org/wiki/Pig_Latin",
Type = "openUrl",
Title = "WikiPedia Page"
};
cardButtons.Add(plButton);
cardButtons.Add(plButton2);
HeroCard plCard = new HeroCard()
{
Title = "I'm a hero card",
Subtitle = "Pig Latin Wikipedia Page",
Images = cardImages,
Buttons = cardButtons
};
Attachment plAttachment = plCard.ToAttachment();
replyToConversation.Attachments.Add(plAttachment);
var reply = await connector.Conversations.SendToConversationAsync(replyToConversation);
#endregion
但是,我收到了以下不是轮播的消息。
问题是如何使用 botframework 的本机变量(不使用手动生成 json)将轮播发送到 Facebook Messenger?
问题已通过以下更改解决:
- 首先,创建两张卡片和附件
- 其次,将
AttachmentLayout
设置为"carousel"
。
修改后的代码如下:
ConnectorClient connector = new ConnectorClient(new Uri(activity.ServiceUrl));
#region HeroCard
Activity replyToConversation = activity.CreateReply("Should go to conversation, with a hero card");
replyToConversation.Recipient = activity.From;
replyToConversation.Type = "message";
replyToConversation.Attachments = new List<Attachment>();
// First Change
// Card #One
List<CardImage> cardImages1 = new List<CardImage>();
cardImages1.Add(new CardImage(url: "https://upload.wikimedia.org/wikipedia/en/a/a6/Bender_Rodriguez.png"));
List<CardAction> cardButtons1 = new List<CardAction>();
CardAction plButton1 = new CardAction()
{
Value = "https://en.wikipedia.org/wiki/Pig_Latin",
Type = "openUrl",
Title = "WikiPedia Page"
};
cardButtons1.Add(plButton1);
HeroCard plCard1 = new HeroCard()
{
Title = "I'm a hero card",
Subtitle = "Pig Latin Wikipedia Page",
Images = cardImages1,
Buttons = cardButtons1
};
Attachment plAttachment1 = plCard1.ToAttachment();
replyToConversation.Attachments.Add(plAttachment1);
// Card #Two
List<CardImage> cardImages2 = new List<CardImage>();
cardImages2.Add(new CardImage(url: "https://upload.wikimedia.org/wikipedia/en/archive/a/a9/20151112035044!Banyan_Tree_(_Shiv_Bajrang_Dham_Kishunpur).jpeg"));
List<CardAction> cardButtons2 = new List<CardAction>();
CardAction plButton2 = new CardAction()
{
Value = "https://en.wikipedia.org/wiki/Pig_Latin",
Type = "openUrl",
Title = "WikiPedia Page"
};
cardButtons2.Add(plButton2);
HeroCard plCard2 = new HeroCard()
{
Title = "I'm a hero card",
Subtitle = "Pig Latin Wikipedia Page",
Images = cardImages2,
Buttons = cardButtons2
};
Attachment plAttachment2 = plCard2.ToAttachment();
replyToConversation.Attachments.Add(plAttachment2);
// Second Change
replyToConversation.AttachmentLayout = "carousel";
var reply = await connector.Conversations.SendToConversationAsync(replyToConversation);
#endregion
您可以在下面的 Facebook Messenger 中找到轮播图片:
我实现了一个机器人,它向用户发送英雄卡作为响应。 正如我所料,下面的代码向信使发送了一个轮播。
ConnectorClient connector = new ConnectorClient(new Uri(activity.ServiceUrl));
#region HeroCard
Activity replyToConversation = activity.CreateReply("Should go to conversation, with a hero card");
replyToConversation.Recipient = activity.From;
replyToConversation.Type = "message";
replyToConversation.Attachments = new List<Attachment>();
List<CardImage> cardImages = new List<CardImage>();
cardImages.Add(new CardImage(url: "https://upload.wikimedia.org/wikipedia/en/a/a6/Bender_Rodriguez.png"));
cardImages.Add(new CardImage(url: "https://upload.wikimedia.org/wikipedia/en/archive/a/a9/20151112035044!Banyan_Tree_(_Shiv_Bajrang_Dham_Kishunpur).jpeg"));
List<CardAction> cardButtons = new List<CardAction>();
CardAction plButton = new CardAction()
{
Value = "https://en.wikipedia.org/wiki/Pig_Latin",
Type = "openUrl",
Title = "WikiPedia Page"
};
CardAction plButton2 = new CardAction()
{
Value = "https://en.wikipedia.org/wiki/Pig_Latin",
Type = "openUrl",
Title = "WikiPedia Page"
};
cardButtons.Add(plButton);
cardButtons.Add(plButton2);
HeroCard plCard = new HeroCard()
{
Title = "I'm a hero card",
Subtitle = "Pig Latin Wikipedia Page",
Images = cardImages,
Buttons = cardButtons
};
Attachment plAttachment = plCard.ToAttachment();
replyToConversation.Attachments.Add(plAttachment);
var reply = await connector.Conversations.SendToConversationAsync(replyToConversation);
#endregion
但是,我收到了以下不是轮播的消息。
问题是如何使用 botframework 的本机变量(不使用手动生成 json)将轮播发送到 Facebook Messenger?
问题已通过以下更改解决:
- 首先,创建两张卡片和附件
- 其次,将
AttachmentLayout
设置为"carousel"
。
修改后的代码如下:
ConnectorClient connector = new ConnectorClient(new Uri(activity.ServiceUrl));
#region HeroCard
Activity replyToConversation = activity.CreateReply("Should go to conversation, with a hero card");
replyToConversation.Recipient = activity.From;
replyToConversation.Type = "message";
replyToConversation.Attachments = new List<Attachment>();
// First Change
// Card #One
List<CardImage> cardImages1 = new List<CardImage>();
cardImages1.Add(new CardImage(url: "https://upload.wikimedia.org/wikipedia/en/a/a6/Bender_Rodriguez.png"));
List<CardAction> cardButtons1 = new List<CardAction>();
CardAction plButton1 = new CardAction()
{
Value = "https://en.wikipedia.org/wiki/Pig_Latin",
Type = "openUrl",
Title = "WikiPedia Page"
};
cardButtons1.Add(plButton1);
HeroCard plCard1 = new HeroCard()
{
Title = "I'm a hero card",
Subtitle = "Pig Latin Wikipedia Page",
Images = cardImages1,
Buttons = cardButtons1
};
Attachment plAttachment1 = plCard1.ToAttachment();
replyToConversation.Attachments.Add(plAttachment1);
// Card #Two
List<CardImage> cardImages2 = new List<CardImage>();
cardImages2.Add(new CardImage(url: "https://upload.wikimedia.org/wikipedia/en/archive/a/a9/20151112035044!Banyan_Tree_(_Shiv_Bajrang_Dham_Kishunpur).jpeg"));
List<CardAction> cardButtons2 = new List<CardAction>();
CardAction plButton2 = new CardAction()
{
Value = "https://en.wikipedia.org/wiki/Pig_Latin",
Type = "openUrl",
Title = "WikiPedia Page"
};
cardButtons2.Add(plButton2);
HeroCard plCard2 = new HeroCard()
{
Title = "I'm a hero card",
Subtitle = "Pig Latin Wikipedia Page",
Images = cardImages2,
Buttons = cardButtons2
};
Attachment plAttachment2 = plCard2.ToAttachment();
replyToConversation.Attachments.Add(plAttachment2);
// Second Change
replyToConversation.AttachmentLayout = "carousel";
var reply = await connector.Conversations.SendToConversationAsync(replyToConversation);
#endregion
您可以在下面的 Facebook Messenger 中找到轮播图片: