如何在Botframework版本4中使轮播图片可点击 [英] How to make a carousel image clickable in Botframework version 4
问题描述
我正在使用英雄卡在FB Messenger上显示轮播列表.我想在显示的图像后面放置一个URL链接，以便在用户选择轮播时将其重定向到付款页面.如何使用最新的Botframework v4实现这一目标.在版本3中，动作类型包括OpenUrl.但是在V4中，我没有在文档中找到解决此问题的方法.
I am using hero card to display a list of carousels on FB messenger. I want to put an url link behind the image I am displaying so that when user selects the carousel he is redirected to the payment page. How to achieve this with the latest Botframework v4. In version 3 Action types included OpenUrl. but in V4 I didn't found a way to this in the docs.
请帮助.我在这里添加我的代码.
Kindly Help. I am adding my code here.
// Create the hero cards. Add the carousels to it.
var heroCard = new HeroCard
{
Title = "We are a travel agency trusted over 30 years, with 95 % positive customer reviews. and ",
Subtitle = "Call us from anywhere, anytime.",
Text = "We have A+ rating from BBB",
Images = new List<CardImage> { new CardImage(CarouselResult.Data[0].ImageUrl.ToString()) },
Buttons = new List<CardAction> { new CardAction(ActionTypes.OpenUrl, "Search Results", value: CarouselResult.Data[0].ApiUrl.ToString()) },
};
var heroCard1 = new HeroCard
{
Title = "We are a travel agency trusted over 30 years, with 95 % positive customer reviews. and ",
Subtitle = "Call us from anywhere, anytime.",
Text = "We have A+ rating from BBB",
Images = new List<CardImage> { new CardImage(CarouselResult.Data[1].ImageUrl.ToString()) },
Buttons = new List<CardAction> { new CardAction(ActionTypes.OpenUrl, "Search Results", value: CarouselResult.Data[0].ApiUrl.ToString()) },
};
var heroCard2 = new HeroCard
{
Title = "We are a travel agency trusted over 30 years, with 95 % positive customer reviews. and ",
Subtitle = "Call us from anywhere, anytime.",
Text = "We have A+ rating from BBB",
Images = new List<CardImage> { new CardImage(CarouselResult.Data[2].ImageUrl.ToString()) },
Buttons = new List<CardAction> { new CardAction(ActionTypes.OpenUrl, "Search Results", value: CarouselResult.Data[0].ApiUrl.ToString()) },
};
/////convert the hero cards to attachments
var attachments = new List<Attachment>() {
{ heroCard.ToAttachment() },
{ heroCard1.ToAttachment() },
{ heroCard2.ToAttachment() }
};
////add attachments to carousels
var reply1 = MessageFactory.Carousel(attachments);
请提出合适的解决方案.预先感谢.
Please suggest suitable solution. Thanks in advance.
推荐答案
使名片图像在Facebook Messenger频道中可点击的最简单方法是使用
The simplest way to make card images clickable in the Facebook Messenger channel is to use Messenger Templates. You can add a default action to the image that can either direct the user to a URL or open a Webview. To use a Messenger Template with the Microsoft Bot Framework, you need to add the template to the outgoing activity's channel data. You can create a carousel by adding multiple template elements. Take a look at the example below.
信使模板
var reply = turnContext.Activity.CreateReply();
var attachment = new
{
type = "template",
payload = new
{
template_type = "generic",
elements = new []
{
new {
title = "Three Strategies for Finding Snow",
image_url = "https://static01.nyt.com/images/2019/02/10/travel/03update-snowfall2/03update-snowfall2-jumbo.jpg?quality=90&auto=webp",
subtitle = "How do you plan a ski trip to ensure the best conditions? You can think about a resort’s track record, or which have the best snow-making machines. Or you can gamble.",
default_action = new {
type = "web_url",
url = "https://www.nytimes.com/2019/02/08/travel/ski-resort-snow-conditions.html",
},
buttons = new object[]
{
new {
type = "web_url",
url = "https://www.nytimes.com/2019/02/08/travel/ski-resort-snow-conditions.html",
title = "View Article"
},
new {
type = "element_share"
},
},
},new {
title = "Viewing the Northern Lights: ‘It’s Almost Like Heavenly Visual Music’",
image_url = "https://static01.nyt.com/images/2019/02/17/travel/17Northern-Lights1/17Northern-Lights1-superJumbo.jpg?quality=90&auto=webp",
subtitle = "Seeing the aurora borealis has become a must-do item for camera-toting tourists from Alaska to Greenland to Scandinavia. On a trip to northern Sweden, the sight proved elusive, if ultimately rewarding.",
default_action = new {
type = "web_url",
url = "https://www.nytimes.com/2019/02/08/travel/ski-resort-snow-conditions.html",
},
buttons = new object[]
{
new {
type = "web_url",
url = "https://www.nytimes.com/2019/02/11/travel/northern-lights-tourism-in-sweden.html",
title = "View Article"
},
new {
type = "element_share"
},
},
},new {
title = "Five Places to Visit in New Orleans",
image_url = "https://static01.nyt.com/images/2019/02/10/travel/03update-snowfall2/03update-snowfall2-jumbo.jpg?quality=90&auto=webp",
subtitle = "Big Freedia’s rap music is a part of the ether of modern New Orleans. So what better authentic travel guide to the city that so many tourists love to visit?",
default_action = new {
type = "web_url",
url = "https://static01.nyt.com/images/2019/02/17/travel/17NewOrleans-5Places6/17NewOrleans-5Places6-jumbo.jpg?quality=90&auto=webp",
},
buttons = new object[]
{
new {
type = "web_url",
url = "https://static01.nyt.com/images/2019/02/17/travel/17NewOrleans-5Places6/17NewOrleans-5Places6-jumbo.jpg?quality=90&auto=webp",
title = "View Article"
},
new {
type = "element_share"
},
},
},
},
},
};
reply.ChannelData = JObject.FromObject(new { attachment });
await turnContext.SendActivityAsync(reply, cancellationToken: cancellationToken);
屏幕截图
请注意，您在模板中使用的所有URL必须列入白名单；否则，模板将无法呈现.有关更多详细信息，请查阅将网址白名单和 Messenger模板.
Note, any URL that you use in your template must be Whitelisted; otherwise, the template won't render. For more details, check out Facebook Messenger's Documentation on Whitelisting a URL and Messenger Templates.
希望这会有所帮助！
这篇关于如何在Botframework版本4中使轮播图片可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
