问题
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.
回答1:
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.
Messenger Template
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);
Screenshot
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.
Hope this helps!
来源：https://stackoverflow.com/questions/55157573/how-to-make-a-carousel-image-clickable-in-botframework-version-4