Botkit: Botkit carousel for Microsoft Bot Framework and other channels

Created on 22 Jun 2017  Â·  4Comments  Â·  Source: howdyai/botkit

Hi,
I am working on trying to create a carousel of cards and I have tried to create it by putting multiple array of attachments as shown below.

I am not sure how to display a carousel of cards and any help would be much appreciated.

I can not find any documentation online either.

Many Thanks

Ana

bot.reply(message, {
                attachments: [{
                    contentType: 'application/vnd.microsoft.card.hero',
                    content: {
                        title: "Hi! Welcome to Vauban Academy",
                        subtitle: "The perfect place to start your career",
                        text: "How can we help you?",
                        images: [{
                            url: "http://www.dezvoltarea-carierei.com/media/images/o/Vauban_200x150.jpg"
                        }],
                        buttons: [{
                            type: "imBack",
                            title: "Contact Us",
                            value: "Contact Us"
                        }, {
                            type: "imBack",
                            title: "Careers",
                            value: "Careers"
                        }, {
                            type: "imBack",
                            title: "Became Partner",
                            value: "Became Partner"
                        }]
                    }
                },{
                    contentType: 'application/vnd.microsoft.card.hero',
                    content: {
                        title: "Hi! Welcome to Vauban Academy",
                        subtitle: "The perfect place to start your career",
                        text: "How can we help you?",
                        images: [{
                            url: "http://www.dezvoltarea-carierei.com/media/images/o/Vauban_200x150.jpg"
                        }],
                        buttons: [{
                            type: "imBack",
                            title: "Contact Us",
                            value: "Contact Us"
                        }, {
                            type: "imBack",
                            title: "Careers",
                            value: "Careers"
                        }, {
                            type: "imBack",
                            title: "Became Partner",
                            value: "Became Partner"
                        }]
                    }
                }
                ]
            }); //end bot.reply()
Microsoft-Bot Framework-related help wanted

All 4 comments

What platform are you building for? Not all platforms support carousels, but your code appears correct for those that do.

bot.reply(message, {
                attachmentLayout:"carousel",
                attachments: [{
                    contentType: 'application/vnd.microsoft.card.hero',
                    content: {
                        title: "Hi! Welcome to Vauban Academy",
                        subtitle: "The perfect place to start your career",
                        text: "How can we help you?",
                        images: [{
                            url: "http://www.dezvoltarea-carierei.com/media/images/o/Vauban_200x150.jpg"
                        }],
                        buttons: [{
                            type: "imBack",
                            title: "Contact Us",
                            value: "Contact Us"
                        }, {
                            type: "imBack",
                            title: "Careers",
                            value: "Careers"
                        }, {
                            type: "imBack",
                            title: "Became Partner",
                            value: "Became Partner"
                        }]
                    }
                },{
                    contentType: 'application/vnd.microsoft.card.hero',
                    content: {
                        title: "Hi! Welcome to Vauban Academy",
                        subtitle: "The perfect place to start your career",
                        text: "How can we help you?",
                        images: [{
                            url: "http://www.dezvoltarea-carierei.com/media/images/o/Vauban_200x150.jpg"
                        }],
                        buttons: [{
                            type: "imBack",
                            title: "Contact Us",
                            value: "Contact Us"
                        }, {
                            type: "imBack",
                            title: "Careers",
                            value: "Careers"
                        }, {
                            type: "imBack",
                            title: "Became Partner",
                            value: "Became Partner"
                        }]
                    }
                }
                ]
            }); //end bot.reply()

This code worked for me.

Thank you so much!

On Sep 4, 2017 13:18, "Robinson C" notifications@github.com wrote:

bot.reply(message, {
attachmentLayout:"carousel",
attachments: [{
contentType: 'application/vnd.microsoft.card.hero',
content: {
title: "Hi! Welcome to Vauban Academy",
subtitle: "The perfect place to start your career",
text: "How can we help you?",
images: [{
url: "http://www.dezvoltarea-carierei.com/media/images/o/
Vauban_200x150.jpg"
}],
buttons: [{
type: "imBack",
title: "Contact Us",
value: "Contact Us"
}, {
type: "imBack",
title: "Careers",
value: "Careers"
}, {
type: "imBack",
title: "Became Partner",
value: "Became Partner"
}]
}
},{
contentType: 'application/vnd.microsoft.card.hero',
content: {
title: "Hi! Welcome to Vauban Academy",
subtitle: "The perfect place to start your career",
text: "How can we help you?",
images: [{
url: "http://www.dezvoltarea-carierei.com/media/images/o/
Vauban_200x150.jpg"
}],
buttons: [{
type: "imBack",
title: "Contact Us",
value: "Contact Us"
}, {
type: "imBack",
title: "Careers",
value: "Careers"
}, {
type: "imBack",
title: "Became Partner",
value: "Became Partner"
}]
}
}
]
}); //end bot.reply()

This code worked for me.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/howdyai/botkit/issues/894#issuecomment-326925562, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ARqwyiregVZ6SuYXtYD1TiB3JIZHUEpVks5se85xgaJpZM4OB1qS
.

Closing a resolved, thanks @robinsonc !

Was this page helpful?
0 / 5 - 0 ratings

Related issues

fieldcorbett picture fieldcorbett  Â·  4Comments

imjul1an picture imjul1an  Â·  3Comments

benbrown picture benbrown  Â·  3Comments

liornaar picture liornaar  Â·  3Comments

koubenecn picture koubenecn  Â·  3Comments