How to make a carousel image clickable in Botframe

Question

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.

Answer 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!