Bot Framework Suggested Actions without Sending a Response to Chat

Last week, I received a LinkedIn invitation from a gentleman who mentioned that he follows my Bot Framework video tutorials on YouTube. He was reaching out to ask a question about displaying choices to users, but didn't want the selected choice to be echoed in the chat window.

This isn't an uncommon scenario, and I've actually answered this question several times, including once on StackOverflow. I even updated the official Bot Framework documentation to include language explaining this.

Following the Scott Hanselman principle of never emailing information that you could put at a URL, I decided to write up a quick post about the problem and solution, so that it had a URL to sit at that I controlled.

What is the basic problem? In the Bot Framework SDK, you can offer users suggested actions in the dialog. Here is the example from the Bot Framework documentation:

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);
      

Notice the builder.CardAction.imBack() method. You use SuggestedActions to create an array of possible actions for the user, and those actions function in a specific way. For imBack, the method literal stands for "instant message back," which means that it will echo the selected action back to the user in the chat window. In the example above, selecting the suggested action of "Green" will echo "productId=1&color=green" to the chat window.

Understandably, this isn't the ideal result in all situations. When I was first building out chatbots, I noticed this, and wanted a better solution. Luckily, I was building Node.JS SDK bots in TypeScript and Visual Studio Code has a great TypeScript language service. Using autocomplete and autosuggestion functionality, I could experiment with the different methods, read their descriptions, and choose different options without having to explicitly look through the Bot Framework code base.

That's how I came across the postBack() alternative to imBack(), which posted the user's information back to the bot, rather than echoing it in the chat window. You could rewrite the above code simply by swapping out the function call:

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.postBack(session, "productId=1&color=green", "Green"),
                          builder.CardAction.postBack(session, "productId=1&color=blue", "Blue"),
                          builder.CardAction.postBack(session, "productId=1&color=red", "Red")
                      ]
                  ));
      session.send(msg);
      

Once I found this, and saw how easy it was to swap out, I decided to fork the Bot Framework documentation, add it in, and then do a pull request. That way anybody else looking for a solution could find it in the official documentation.

The only caveat to this is that support for postBack() is dependent on the channel you are deploy to. In the event that you deploy to a channel that doesn't support postBack(), the Bot Framework will fall back to imBack().