CODEWITHSUNDEEP
c#carouselbotframeworkfacebook-messenger
J-K
J-K

Reputation: 139

bot carousel not working in messenger

I have created a carousel using Hero Cards. It works fine in bot framework emulator but in Facebook messenger it shows only my first reply "Select an option" of the code below? Am I missing something, does messenger supports carousel? Why are the images and buttons missing?

Activity replyToConversation = activity.CreateReply("Select an option");
replyToConversation.AttachmentLayout = AttachmentLayoutTypes.Carousel;
replyToConversation.Attachments = new List<Attachment>();

Dictionary<string, string> cardContentList = new Dictionary<string, string>();
cardContentList.Add("Shirt", System.Web.HttpContext.Current.Server.MapPath(@"~\imgs\shirt.jpg"));
cardContentList.Add("shoes", System.Web.HttpContext.Current.Server.MapPath(@"~\imgs\shoes.jpg"));

foreach (KeyValuePair<string, string> cardContent in cardContentList)
{
    List<CardImage> cardImages = new List<CardImage>();
    cardImages.Add(new CardImage(url: cardContent.Value));

    List<CardAction> cardButtons = new List<CardAction>();

    CardAction plButton = new CardAction()
    {
        Value = "nike",
        Type = "postBack",
        Title = "shirt"
    };

    cardButtons.Add(plButton);

    HeroCard plCard = new HeroCard()
    {
        Title = "nike",
        Images = cardImages,
        Buttons = cardButtons
    };

    Attachment plAttachment = plCard.ToAttachment();
    replyToConversation.Attachments.Add(plAttachment);
}
await context.PostAsync(replyToConversation);

Upvotes: 1

Views: 438

Answers (1)

Nicolas R
Nicolas R

Reputation: 14619

I tried to implement your case on my bot, it's working using images hosted on the web, but not with "local" images from your bot folder.

Using local images I got an Exception on my bot, not just "Select an option".

Code for this test:

[Serializable]
public class Dialog49665918 : IDialog<object>
{
    public async Task StartAsync(IDialogContext context)
    {
        await context.PostAsync("Type anything to get user question or 'debug' to get debug version");
        context.Wait(this.MessageReceivedAsync);
    }

    private async Task MessageReceivedAsync(IDialogContext context, IAwaitable<object> result)
    {
        var activity = await result as Activity;

        var replyToConversation = activity.CreateReply("Select an option");
        replyToConversation.AttachmentLayout = AttachmentLayoutTypes.Carousel;
        replyToConversation.Attachments = new List<Attachment>();

        var cardContentList = new Dictionary<string, string>();

        if (!"debug".Equals(activity.Text, StringComparison.InvariantCultureIgnoreCase))
        {
            cardContentList.Add("Shirt", System.Web.HttpContext.Current.Server.MapPath(@"~\imgs\shirt.jpg"));
            cardContentList.Add("shoes", System.Web.HttpContext.Current.Server.MapPath(@"~\imgs\shoes.jpg"));
        }
        else
        {
            cardContentList.Add("Shirt", "https://media.deparis.me/3257-tm_large_default/tshirt-homme-papa-cool-et-tatoue.jpg");
            cardContentList.Add("shoes", "https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto/d4dd2144b22b41bfbbd5a7ff01674bb3_9366/Superstar_Shoes_White_C77153_01_standard.jpg");
        }

        foreach (var cardContent in cardContentList)
        {
            var cardImages = new List<CardImage>
            {
                new CardImage(url: cardContent.Value)
            };

            var plButton = new CardAction()
            {
                Value = "nike",
                Type = "postBack",
                Title = "shirt"
            };

            var cardButtons = new List<CardAction>
            {
                plButton
            };

            var plCard = new HeroCard()
            {
                Title = "nike",
                Images = cardImages,
                Buttons = cardButtons
            };

            var plAttachment = plCard.ToAttachment();
            replyToConversation.Attachments.Add(plAttachment);
        }
        await context.PostAsync(replyToConversation);
    }
}

Proof ("debug" case, with internet images):

Demo

Upvotes: 1

Related Questions