如何在Botframework版本4中点击旋转木马图像

Question

我正在使用英雄卡在FB信使上显示轮播列表。我想在我正在显示的图像后面放置一个url链接，这样当用户选择轮播时，他会被重定向到付款页面。如何使用最新的Botframework v4实现这一目标。在版本3中，Action类型包括OpenUrl。但在V4中，我没有在文档中找到这种方法。

请帮助。我在这里添加我的代码。

 // 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);

请提出合适的解决方案提前致谢。

Answer 1

在Facebook Messenger频道中制作卡片图像的最简单方法是使用Messenger Templates。您可以向图像添加默认操作，该操作可以将用户定向到URL或打开Webview。要将Messenger模板与Microsoft Bot Framework一起使用，您需要将模板添加到传出活动的频道数据中。您可以通过添加多个模板元素来创建轮播。看看下面的例子。

信使模板

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);

截图

请注意，您在模板中使用的任何网址都必须列入白名单;否则，模板将不会呈现。有关更多详细信息，请查看有关Whitelisting a URL和Messenger Templates的Facebook Messenger文档。

希望这可以帮助！