NodeJS / Facebook display a message with only buttons

[JpEncausse]

Hi, There is multiple ChatBot on the web displaying message with only buttons (no title)

When I create a message HeroCard or Keyboard (like prompt) with only buttons it works on the emulator but breaks on Facebook.

Is it possible to snd a message with only buttons ?

[jameslew]

According to Facebook Messenger's Bot API, their button card requires the text field to be specified for a buttons card. Facebook Button Temlate Reference.

You could use ChannelData to send a "QuickReplies" UI which is a list of buttons (akin to a Telegram keyboard) if that's what you're looking for.

[JpEncausse]

Thanks,

I'm sorry I didn't know quickreplies and channel data, it's something we can call from MSBot Builder ? Do you have a little link or a sample ?

Thanks !

On Wed, Sep 7, 2016 at 1:56 AM, jameslew notifications@github.com wrote:

According to Facebook Messenger's Bot API, their button card requires the text field to be specified for a buttons card. Facebook Button Temlate Reference https://developers.facebook.com/docs/messenger-platform/send-api-reference/button-template .

You could use ChannelData to send a "QuickReplies" UI which is a list of buttons (akin to a Telegram keyboard) if that's what you're looking for.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Microsoft/BotBuilder/issues/1182#issuecomment-245132689, or mute the thread https://github.com/notifications/unsubscribe-auth/ABFog69SsETUjBw2dVHNLasPBgostAH0ks5qnf2ngaJpZM4J1xN0 .

Jean-Philippe Encausse - R&D / IoT / Innovations http://www.encausse.net - http://arm-avocats.fr Twitter: @JpEncausse - Mob: +33 6 82 12 56 99 Do it Once, Use it Twice ~ Do it Twice, Make It Once

[ejadib]

@JpEncausse here is an example of how to do it. It's on C# but you will get the point. In node, you can pass extra properties via the Message.sourceEvent method.

[JpEncausse]

Mmm I tried something like this :

        msg.sourceEvent({
            "quick_replies" : [{
                "content_type": "text",
                "title": "Red",
                "payload": "DEVELOPER_DEFINED_PAYLOAD_FOR_PICKING_RED"
            },
            {
                "content_type": "text",
                "title": "Red",
                "payload": "DEVELOPER_DEFINED_PAYLOAD_FOR_PICKING_RED"
            }]
        })

But it seems nothing is sent in the JSON Outgoing. i try to dig

[JpEncausse]

I also try:

msg.data.sourceEvent = {};
msg.data.sourceEvent.quick_replies = [ ... ]

The message contains something

{
    "type": "message",
    "agent": "botbuilder",
    "sourceEvent": {
        "quick_replies": [
            {
                "content_type": "text",
                "title": "Red",
                "payload": "DEVELOPER_DEFINED_PAYLOAD_FOR_PICKING_RED"
            },
            {
                "content_type": "text",
                "title": "Red",
                "payload": "DEVELOPER_DEFINED_PAYLOAD_FOR_PICKING_RED"
            }
        ]
    },
    "address": { .... },
    "source": "facebook"
}

But Facebook do nothing

[jameslew]

@JpEncausse with the node BotBuilder, you don't need to use sourceEvent actually. The BotBuilder did a special thing for keyboard handling:

var keyboard = new builder.Keyboard(session).buttons([ … buttons … ]); var msg = new builder.Message(session).attachments([keyboard]);

That said, I'll paste the nodejs method of using sourceEvent this afternoon; I've got a bug in my sample I'm having someone look at before posting it.

[JpEncausse]

I tried with and without new builder.Keyboard() but it doesn't work the output message do not contains the buttons.

If I play aroud with underlaying code the message contains buttons. It is displayed in emulator but not in Facebook

[Stevenic]

@JpEncausse can you show me the code you're using to send a Keyboard which isn't working? When you use Prompts.choice() for Facebook we build a keyboard under the hood so it should certainly be working.

[jameslew]

So here's a variant using channeldata. note - I've confirmed with the Facebook reference, you still have to have a title for your quickreplies or it will just drop the message on the floor silently.

function oneOffTests_facebook_quick_replies(session) {

var replyMessage = new builder.Message(session)
    .text("Testing");

replyMessage.sourceEvent({ 
        facebook: { 
            quick_replies: [{
                content_type:"text",
                title:"Red",
                payload:"DEVELOPER_DEFINED_PAYLOAD_FOR_PICKING_RED"
            },            
            {
                content_type:"text",
                title:"Blue",
                payload:"DEVELOPER_DEFINED_PAYLOAD_FOR_PICKING_BLUE"
            }]
         }
    });

session.send(replyMessage);
}

And the reference link:

https://developers.facebook.com/docs/messenger-platform/send-api-reference/quick-replies

[JpEncausse]

Ah ah thanks @jameslew so we need a title ! :-( I thought quickreplies would be a workaround to avoid title and get buttons

We saw that on some facebook bots

Hum according to the doc it's text OR attachement ? It should works ?

@Stevenic

       var keyboard = builder.Keyboard().buttons([
            builder.CardAction.postBack(undefined, "btn1", "btn1"),
            builder.CardAction.postBack(undefined, "btn2", "btn2")
        ]);
        msg.attachments([keyboard]);

Then I set the address in a common code, and yes there is no title.

[JpEncausse]

@jameslew tested you code but get nothing only "testing"

[jameslew]

@JpEncausse make sure that you have the latest SDK, and verify on the web version of the Facebook UI in case your client isn't up to date. I know the code works with the latest public node SDK.

[Stevenic]

Is this still an issue?

[jameslew]

Closing due to no activity. If you're still having a challenge, create a new conversation and refer to this one for context.