Demo code for clicking a rich card button and triggering a dialog to begin. This allows us to provide the user information via rich cards, as well as determine the next action that will provide the user with the correct dialog/information. The goal is to create a more natural human-to-bot experience. The alternative would be to provide the rich card, then prompt the user for dialog options (2 steps) instead of one.
There are three main parts to this solution which will help organize your code.
When the user presses a button, the rich card will return a dialog action to the bot (read more about dialogActions here). The bot requires us to define the action so the bot knows what events to execute when the action is called. There are different actions available to developers, but we will stick to the beginDialogAction() for now.
The code will look like this:
bot.beginDialogAction('Profile', '/profile')
Also keep in mind, if you wish to have multiple buttons corresponding to different actions, you must define them seperately. The demo code I included has two buttons each with their own action defined. (refer to the code)
Either as a global variable, or inside your card function, you must define the array of actions for you to make available to the user. In this example, the dialogAction has four parameters:
- session (passed in from the calling dialog)
- action name (String must match step #1)
- action parameters to pass (null in this example)
- The title (the string that appears on the button).
var buttonList = [builder.CardAction.dialogAction(session, 'Profile', null, 'Profile')]
The last step is to add the buttons option to the card. Each array item will correspond to seperate buttons. See my example of the hero card in the code (I include two buttons). Read more about cards.
.buttons(buttonList)
