Search code examples
node.jsbotframeworkfacebook-messengermessengerfacebook-messenger-bot

Multiple Buttons Displayed botframework fb messenger


I would like to display multiple buttons to the user, I tried using the builder.prompts.choice method but it seems to affect my conversation logic.

session.send(new builder.Prompts.choice(session, "Options", "ratios|chart|more|add", {listStyle: builder.ListStyle.button}));

I am using bot framework to connect to multiple channels and handle input/output but it does not handle my conversation logic, that is done separately by Watson. Would a hero card with no text or title, and just buttons work, because so I haven't got it working. Ideally, I would like a button click to be sent to the bot as an input text message. I am using node.js, and connecting to fb messenger. I Would prefer to not use channelData as I plan expand to other platforms

var hero = new builder.HeroCard(session)
  .title("title")
  .text("text")
  .buttons([
      builder.CardAction.imBack(session, "news", "news"),
      builder.CardAction.imBack(session, "news1", "news1"),
      builder.CardAction.imBack(session, "news2", "news2")
  ]);
session.send(hero);

Any help would be much appreciated. Thanks


Solution

  • You have a couple other options, one is suggested actions. The benefit to suggested actions is that once a user clicks on their response the actions disappear. This means you do not have to worry about handing a user response by clicking on something out of turn. You can run into this issue with a hero card for example.

    var msg = new builder.Message(session)
        .text("Thank you for expressing interest in our premium golf shirt! What color of shirt would you like?")
        .suggestedActions(
            builder.SuggestedActions.create(
                    session, [
                        builder.CardAction.imBack(session, "productId=1&color=green", "Green"),
                        builder.CardAction.imBack(session, "productId=1&color=blue", "Blue"),
                        builder.CardAction.imBack(session, "productId=1&color=red", "Red")
                    ]
                ));
    session.send(msg);
    

    Since you are using the facebook channel you can also use facebook quick replys. Sorry I do not have a node example of this, but I see there are multiple NPM libraries which will help you to use them. Such as facebook-quick-replies and botbuilder-quickreplies