Change Multiple Options Layout

[Leeyong88]

Demo chat

Hi, is there anyway to change multiple options layout from horizontal to vertical?

Horizontal: Option1; Option 2; Option3

Vertical:

Option1;

Option2;

Option3;

Thanks for advise!!

[renatoromao · Accepted solution]

Hi @Leeyong88 ,

You can customize using CSS in a canvas app, is not by default feature.

Template to see the options in a horizontal alignment: https://powervirtualagents.microsoft.com/en-us/blog/helping-organizations-provide-real-time-informat...

Documentation to implement javascript and CSS inside the canvas app: https://powervirtualagents.microsoft.com/en-us/blog/change-your-power-virtual-agents-default-canvas-...

---
If you like this reply, please give kudos. And if this solves your problem, please accept this reply as the solution.

Thanks!
Renato Romão
https://www.linkedin.com/in/renatoromao/

[Leeyong88]

@renatoromao Appreciate for your reply. So that means any layout changes I have to use CSS in canvas app to edit it. And it requires basic coding knowledge to make the changes right?

[renatoromao]

Yes @Leeyong88 .

It's basic because is just using JS and CSS and have a lot of content on the internet around these technologies.

[RezaDorrani · Accepted solution]

Hi @Leeyong88 

suggestedActionLayout: 'carousel', // either "carousel" or "stacked"

stacked - will stack up the buttons one below the other.

https://powervirtualagents.microsoft.com/en-us/blog/change-your-power-virtual-agents-default-canvas-...

You would need to host this index.html file on a web server which is anonymously available.

If you want to learn more, we have a AMA webinar tomorrow

https://powervirtualagents.microsoft.com/en-us/blog/what-is-new-and-exciting-for-power-virtual-agent...

Regards,

Reza

[mlaurich]

So would the need for this suggest that there are to many choices and a redesign is more suitable? I am trying to grasp the concept of the topic layout and how granular do you go instead of just asking a question with 8-10 choices?

[Leeyong88]

Hi @mlaurich ,would like to hear about your opinion in design the BOT. 

In my design when comes to service catalog option, there are more branches.

Example: User chose the option About SimpleHelp. From this option there will be 5 or 6 potential questions in the choices. In the chat BOT it appear to be horizontal and users has to scroll left-right to see/read the choices. I wish to make it appear like right side layout (vertical). Thanks!!

[mlaurich]

The comment mentioned about using CSS to change the design to have the buttons vertical is all I have seen and I also was interested into doing that as well once I decided if the Q&A is a good design.

My bigger question is based on how PVA is coded, did they intend for 5 or 8 or greater answers to a question? Instead should the questions be more specific or granular only having 2-3 choices? Having more questions and smaller answers? maybe this is a personal choice but without the vertical buttons it seems they only planned for short 2-3 answer buttons.

Its hard to say how granular you should go with your topic and questions I feel and still trying to grasp the best way to do so. Would love to hear others about their thoughts on this as I have several paths that I will end up with 5+ answers.

[Leeyong88]

Hi All, 

Thanks for your guide I manage to change it in custom canvas as following: 

Since I customized canvas for my BOT. It won't reflect in my demo web BOT right?I want to ask if I want to publish in my custom website. I should provide this customized canvas code to IT Administrator for deploy right? (not the default embed code from channel > Custom Website)? @renatoromao @ ,could you please advise?

[renatoromao · Accepted solution]

Yes, @Leeyong88 !

You need to implement this code inside your custom website, it's not default code embedded.