Search code examples
node.jsbotframeworkchatbotfacebook-messenger-bot

SuggestedActions vs Keyboard in BotFramework?


What is the difference between SuggestedActions and Keyboard class in BotFramework?

I am currently trying to run a waterfall where I present a question, user picks an option and I jump to the next step in the waterfall. I have implemented the buttons with suggested actions feature

const msg = new builder.Message(session)
    .text("Which pair?  \nExample: ETH BTC")
    .suggestedActions(
    builder.SuggestedActions.create(
        session, [
            builder.CardAction.postBack(session, "BTC USD", "BTC USD"),
            builder.CardAction.postBack(session, "ETH USD", "ETH USD"),
            builder.CardAction.postBack(session, "ETH BTC", "ETH BTC"),
            builder.CardAction.postBack(session, "XRP BTC", "XRP BTC"),
            builder.CardAction.postBack(session, "ZEC USD", "ZEC USD")
        ]
    ));
session.send(msg);

The same is also doable with Keyboard class

const msg = new builder.Message(session)
    .text("Which pair?  \nExample: ETH BTC")
    .addAttachment(new builder.Keyboard(session)
        .buttons([
            builder.CardAction.postBack(session, "BTC USD", "BTC USD"),
            builder.CardAction.postBack(session, "ETH USD", "ETH USD"),
            builder.CardAction.postBack(session, "ETH BTC", "ETH BTC"),
            builder.CardAction.postBack(session, "XRP BTC", "XRP BTC"),
            builder.CardAction.postBack(session, "ZEC USD", "ZEC USD")
        ]).toAttachment()
    )
session.send(msg);

How do I capture the response from this button in the next waterfall step or should I switch to using prompts instead. Also what is the difference between this and the keyboard class


Solution

  • SuggestedActions is the replacement of Keyboard (e.g. in C# you will see they Keyboard related stuff marked as Obsolete).

    To capture the response, you can send the suggested actions as part of prompt choice, as shown in the feature-suggestedActions example.

    bot.dialog('/', [
        function (session) {
    
            var msg = new builder.Message(session)
                .text("Hi! What is your favorite color?")
                .suggestedActions(
                    builder.SuggestedActions.create(
                        session,[
                            builder.CardAction.imBack(session, "green", "green"),
                            builder.CardAction.imBack(session, "blue", "blue"),
                            builder.CardAction.imBack(session, "red", "red")
                        ]
                    )
                );
            builder.Prompts.choice(session, msg, ["green", "blue", "red"]);
        },
        function(session, results) {
            session.send('I like ' +  results.response.entity + ' too!');
        }
    ]);