Add suggested actions to messages in the v3 JavaScript SDK

  • Article

APPLIES TO: SDK v3

Suggested actions enable your bot to present buttons that the user can tap to provide input. Suggested actions appear close to the composer and enhance user experience by enabling the user to answer a question or make a selection with a simple tap of a button, rather than having to type a response with a keyboard. Unlike buttons that appear within rich cards (which remain visible and accessible to the user even after being tapped), buttons that appear within the suggested actions pane will disappear after the user makes a selection. This prevents the user from tapping stale buttons within a conversation and simplifies bot development (since you will not need to account for that scenario).

Suggested actions example

To add suggested actions to a message, set the suggestedActions property of the message to a list of card actions that represent the buttons to be presented to the user.

This code example shows how to send a message that presents three suggested actions to the user:

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

When the user taps one of the suggested actions, the bot will receive a message from the user that contains the value of the corresponding action.

Be aware that the imBack method will post the value to the chat window of the channel you are using. If this is not the desired effect, you can use the postBack method, which will still post the selection back to your bot, but will not display the selection in the chat window. Some channels do not support postBack, however, and in those instances the method will behave like imBack.

Additional resources