Extend Power Virtual Agent with vertical buttons and make this reusable

Sometimes you just want something different then what is possible out of the box. We have a requirement where a client wanted the choices in Power Virtual Agent presented vertically instead of horizontally. Luckily we are working on a platform which helps us achieve such requests. We use the Bot Framework Composer to create a dialog. And with some engineering we can even make such a dialog reusable for the entire bot!

Shows the test window in Power Virtual Agent and how vertical buttons create a nicer user experience inside a chatbot dialog.
Vertical buttons make for a better user experience

With Power Virtual Agent you can ask a multiple choice question. With the question you can present options for the user to choose from. These choices are presented in the window horizontally. If these extend the available screen room they are scrollable. However this hinders the user choosing the correct option. Consider the following options:

  • Account question
  • Order information
  • Store information
  • Other
Multiple choice question in the authoring canvas of Power Virtual Agent where 4 options are defined.
Multiple choice question

If only option 1 or 2 are shown, the user might not understand it can ask for “Store information” or “other” questions. Presenting the buttons vertically makes perfectly sense.

Shows how horizontal buttons might look confusing for the user to pick the right topic in Power Virtual Agent test window.
Horizontal Button might confuse the user

Extending Power Virtual Agent

With Bot Framework Composer we can extend what’s possible out of the box. We can present the user with an adaptive card for example. However this is a bit too much for this use case. Creating a dialog to show choices vertically is fairly easy in the Bot Framework Composer. This tutorial shows how to create a dialog to do exactly that. However this way it is not possible to use the answer from the Bot Framework dialog inside PVA. Also the questions are hardcoded.

I want to create a dialog which is reusable for multiple dialogs in our Power Virtual Agent. For this to work we first need to define 3 global variables in Power Virtual Agent. We can use these variables in the Bot Framework Composer. Sadly you have to do this using a workaround. You can only create variables when capturing answers or by using a Power Automate Cloud flow.

Shows the Power Automate cloud flow we use in Power Virtual Agent. With 2 input parameters and 3 output parameters
Cloud flow with all its input and output parameters

Let’s create a flow inside our dialog which returns 3 variables. One for the question, one for the multiple choice options and one to capture the answer from. Because we will use this Cloud Flow in other dialogs too. it has the benefit that the variable names are already correctly defined. This will make it easier to use in subsequent dialogs. Be sure to set the output variable to Bot. This will allow the Bot Framework Composer dialog to use the variable.

Shows the Power Automate Cloud flow action inside the authoring canvas of Power Virtual Agent. Highlights to set the output variable to Bot.
Be sure to set the variable to Bot

Bot Framework Composer to the rescue!

Now we create the Bot Framework Composer dialog. I will not go too much in detail as the documentation does this a lot better than I can. In the dialog we will ask a multiple choice question. Instead of typing the question in the Bot Responses window we will put in

${virtualagent.AgentQuestion}

This is the variable we defined in Power Virtual Agent which we can use inside the Bot Framework Composer. Not only can we use variables defined in Power Virtual Agent, we can also update them.

Shows that in the Bot response tab of the multiple choice dialog we enter a variable in responses
Enter a variable in the responses

On the User Input tab for Property we will type:

virtualagent.UserResponse

Note that this is without the $ and brackets. Which is not how variables are normally declared inside the Bot Framework Composer.

Shows the top part of the User input tab. In the property window a variable has been entered.
User input tab with the UserResponse variable entered

Further down on the User Input tab on the option List Style we choose heroCard. This will present our buttons vertically instead of horizontally.

Finally for our Array of Choices we choose Write an expression and put in our final variable we defined in Power Virtual Agent:

=${virtualagent.AnswerArray}
Shows the bottom part of the User input tab. For list style the heroCard is selected. For Array of choices the variable AnswerArray is selected
Hero card and array of choices
The dialog flow inside Bot Framework Composer. Prompt with multi-choice and follows by user input where all text entered are variables.
Full dialog inside Bot Framework Composer

Vertical Buttons just look so much nicer!

And that’s it for the Dialog. We can publish this into our Power Virtual Agent. Inside our authoring canvas, after our flow, we can redirect to our new dialog. Testing this conversation gives us vertical buttons!

Shows the authoring canvas in Power Virtual Agent where we redirect to our created dialog in Bot Framework Composer
After the cloud flow redirect to the VerticalButtonDialog
Shows the test window in Power Virtual Agent and how vertical buttons create a nicer user experience inside a chatbot dialog.
Vertical buttons make for a better user experience

I think vertical button alignment should be available to choose inside Power Virtual Agent out of the box. However it is great that we can extend Power Virtual Agent with the Bot Framework Composer. And with some engineering we can create a dialog which is reusable across your entire bot.