How to send hero cards to the fb messenger using microsoft bot framework while using waterfall dialogs (Node js) - node.js

Question

I am trying to create a messenger bot using Microsoft bot framework
I am using a waterfall dialog to create the flow of the structure.
In this, I have multiple steps were in a particular step I need to send a carousel of four hero cards with buttons for each.
I have used the answer by steven,
Handling HeroCards responses In Microsoft Bot Framework v4 for NodeJS
I work fine while testing in bot emulator and webchat
But produces an error while testing in messenger bot
can anyone help me to rectify this error, Thanks in advance
async locationStep(step) {
// WaterfallStep always finishes with the end of the Waterfall or with another dialog; here it is a Prompt Dialog.
// Running a prompt here means the next WaterfallStep will be run when the user's response is received.
await this.sendIntroCard(step)
await step.context.sendActivity("How often do you use surface on the move?")
let acard =CardFactory.heroCard(
" ",
[`https://scontent.fmaa1-4.fna.fbcdn.net/v/t1.0-9/89121134_2372258766207358_5255590702309441536_n.jpg?_nc_cat=109&_nc_sid=8024bb&_nc_ohc=1cHak5WO_yoAX-VdtfO&_nc_ht=scontent.fmaa1-4.fna&oh=fd002544bc74bf53ae0185f4c192efe6&oe=5E82E09B`],
[{ type: ActionTypes.PostBack,
title: 'Never',
value: 'Never'}]
);
let bcard =CardFactory.heroCard(
" ",
['https://i.imgur.com/m2DWB7m.jpg'],
[{ type: ActionTypes.PostBack,
title: 'Once in a while',
value: 'Once in a while'}]
);
let ccard =CardFactory.heroCard(
" ",
['https://i.imgur.com/Kwn0FBn.jpg'],
[{ type: ActionTypes.PostBack,
title: 'A few days a week',
value: 'A few days a week'}]
);
let dcard =CardFactory.heroCard(
" ",
['https://i.imgur.com/mAlW0Bv.jpg'],
[{ type: ActionTypes.PostBack,
title: 'Every day',
value: 'Every day'}]
);
await step.context.sendActivity( {attachments:[acard,bcard,ccard,dcard],attachmentLayout: AttachmentLayoutTypes.Carousel
});
return await { status: DialogTurnStatus.waiting };
}

Answer 1

Your issue is caused by the space you have included as the title of your hero cards: " ". Fixing your problem is simple. You can using an actually empty string without the space ("") or even omitting the title altogether.
EDIT: As you've seen, the Bot Framework will add "Options" as the card's title if you haven't provided one because it uses Facebook Messenger's generic template which requires a title. There is nothing the Bot Framework can do and there's nothing you can do to bypass Facebook's API restrictions. However, if you really want to send a card with an image and buttons then you can use a media template. This will be inconvenient because you'll need to upload the image attachment beforehand so you can get an attachment ID using this API: https://developers.facebook.com/docs/messenger-platform/reference/attachment-upload-api
Rather than having your bot upload the images every time it needs to use them, you should be able upload each image once on your own and then give the ID's to your bot. Once you've uploaded your attachments, you can send a media template directly using the Send API or using the Bot Framework activity's channel data according to these instructions: https://blog.botframework.com/2017/03/28/custom-channel-data/
await step.context.sendActivity( {
"channelData": {
"attachment": {
"type": "template",
"payload": {
"template_type": "media",
"elements": [
{
"media_type": "image",
"attachment_id": "<YOUR_ATTACHMENT_ID>",
"buttons": [
{
"type": "postback",
"payload": "Never",
"title": "Never"
}
]
},
// More media templates ...
]
}
}
}
} );
Since this may be more complicated than you'd like, you might consider an alternative design like Messenger's quick replies.