Как сделать изображение карусели кликабельным в Botframework версии 4

Question

Я использую карту героя для отображения списка каруселей в мессенджере FB. Я хочу разместить URL-ссылку за изображением, которое я показываю, чтобы при выборе карусели пользователь перенаправлялся на страницу оплаты. Как этого добиться с последним Botframework v4. В версию 3 включены типы действий 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 - это использовать Шаблоны сообщений . Вы можете добавить к изображению действие по умолчанию, которое может направить пользователя на URL-адрес или открыть веб-просмотр. Чтобы использовать шаблон 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);

Скриншот

Обратите внимание, что любой URL, который вы используете в своем шаблоне, должен быть в белом списке; в противном случае шаблон не будет отображаться. Для получения более подробной информации, ознакомьтесь с документацией Facebook Messenger на Белый список URL и Шаблоны Messenger .

Надеюсь, это поможет!