Skip to main content

Notifications

Power Platform Community / Forums / General / Customize the options ...
General
Answered

Customize the options display

Posted on by 7

Can we change the display alignment of options from being displayed horizontally, can it be displayed vertically.  

  • mjansonius Profile Picture
    mjansonius 2 on at
    Re: Customize the options display

    For the scenario of (Omnichannel) live chat integration with a (PVA/Copilot Studio) chatbot, you can have the multiple choice options display vertically by customizing the script tag that goes on the website.

     You'll need to add this bit: data-suggested-action-layout="stacked"

     

    So your script tag will look like this:

     

     

    <script v2 id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-suggested-action-layout="stacked"></script>

     

     

     

    Customize live chat widgets using data tags | Microsoft Learn

     

    Make sure to use the "Live Chat Widget 2.0 Script", you get it from the Channel configuration in the Customer Service Admin center.

    (Channels > Chat > Manage > select a chat channel > Edit > dialog "Chat channel settings" > tab "Chat widget")

     

    To be clear, this is about configuring the (OmniChannel) live chat script tag (for chat with or without a chatbot), which is NOT the same code as the webchat-tag when using a plain chatbot (without live chat integration) deployed directly from Copilot Studio.

  • yader.morales Profile Picture
    yader.morales 25 on at
    Re: Customize the options display

    Thank you! @webmonkee, maybe I forgot to add that it was a requirement in the legacy authoring canvas and I was looking for the option there. May I add that I have a lot of bots developed on the legacy that I would love to get features like that.

     

    Regardless, the next step would be to migrate them using the public guidance and test it out! https://learn.microsoft.com/en-us/power-virtual-agents/unified-authoring-conversion 

  • webmonkee Profile Picture
    webmonkee 29 on at
    Re: Customize the options display

    This has been resolved. From a Message component, click the "Add" button in the upper left corner and choose a Basic Card if you just want buttons, or an Adaptive Card if you wish to format a full card using JSON. then, in the properties for each button,  you can choose to send a visible or hidden message to the bot and use that value as a trigger for whatever the bot is supposed to do when the button is clicked, such as opening a new topic. You can also choose to have it open a URL directly or make a call, if either of those are needed instead.

     

    webmonkee_0-1695845617466.png

     

    webmonkee_1-1695845694040.png

     

  • yader.morales Profile Picture
    yader.morales 25 on at
    Re: Customize the options display

    Looking for an update as well! Since 2020 I have seen a comment that this was going to be an OOB functionality. For users that have Omnichannel integrated with PVA there is no option other than letting the end user struggle to scroll horizontally. I follow up on this idea but I don't see progress: 

     

    https://ideas.powervirtualagents.com/d365community/idea/19d34b0e-5276-49f0-b043-4a1d1d656afa 

     

    Do you have another idea where we can get heard about this requirement? @MattJimison  or @HenryJammes Thank you so much in advance!

  • Kumar_bi Profile Picture
    Kumar_bi 7 on at
    Re: Customize the options display

    @ggupta any update on this sir ? can i have a vertical choices display with low code/no code ?

  • lisha Profile Picture
    lisha 4 on at
    Re: Customize the options display

    Hi @webmonkee ,

     

    How can we update the code in original virtual agent chatbot so that we can see the change in original chatbot? Please help me to resolve my issue.

     

    Thanks

  • PowerPuffKK Profile Picture
    PowerPuffKK 84 on at
    Re: Customize the options display

    Hi @marvin_B ,

     

    The Teams version of PVA renders slightly differently and doesn't support stacked options which can only be accommodated using code. I've tried extending the PVA for Teams using Bot Framework but even thumbnail/hero cards get rendered differently. At present I don't think it's possible.

     

    Kristine

  • marvin_B Profile Picture
    marvin_B 2 on at
    Re: Customize the options display

    Hi Everyone,

     

    Is there a way to customize the options inside Teams? From what I gather, the solutions in these forums refer to customizing the web app. 

  • Verified answer
    PowerPuffKK Profile Picture
    PowerPuffKK 84 on at
    Re: Customize the options display

    Hi @DiegoPeres,

     

    I've had to do this for my first PVA project some time ago as the carousel format of the options was raised as an accessibility issue. It took a while to work it out but I have done so successfully and have used it ever since - I thought it might be easier to paste the code snippet that you can reuse if you wish. You'll need to go to https://docs.microsoft.com/en-us/power-virtual-agents/customize-default-canvas for the full code and then in the const styleOptions section, paste the line I have bolded below. This will change the layout of the suggested actions from carousel to stacked. I'd also suggest using the second bolded line with the wrapped text (this will ensure that for long text options, the text will be wrapped within the button - this also took me ages to figure out!).

     

    Please mark my answer as a solution if it helped!

     

    const styleOptions = {
    // Add styleOptions to customize web chat canvas
    botAvatarInitials: 'BT',
    accent: '#003087',
    botAvatarBackgroundColor: "#FFFFFF",
    botAvatarImage: 'https://image.flaticon.com/icons/png/128/265/265668.png',
    userAvatarInitials: 'BT',
    accent: '#003087',
    userAvatarBackgroundColor: "#FFFFFF",
    userAvatarImage: 'https://image.flaticon.com/icons/png/128/4776/4776976.png',
    hideUploadButton: true,
    suggestedActionLayout: 'stacked',
    suggestedActionDisabledBorder: null,
    suggestedActionDisabledBorderColor: '#E6E6E6',
    suggestedActionDisabledBorderStyle: 'solid',
    suggestedActionDisabledBorderWidth: 2,
    suggestedActionsStackedLayoutButtonTextWrap: true,
    emojiSet: true,

    };

     

     

    Kind regards,

    Kristine

    PowerPuffKK

  • DiegoPeres Profile Picture
    DiegoPeres 327 on at
    Re: Customize the options display

    Hi @ggupta 
    any news about the improvement to put the menus vertically?

Helpful resources

Quick Links

Exciting News for Copilot Studio Communi…

Get ready to experience a whole new level of engagement with the Copilot Studio…

Celebrating the May Super User of the…

LaurensM is an exceptional contributor to the Power Platform Community…

Check out the Copilot Studio Cookbook…

We are excited to announce our new Copilot Cookbook Gallery in the Community…

Leaderboard

#1
renatoromao Profile Picture

renatoromao 6,459

#2
Pstork1 Profile Picture

Pstork1 1,990

#3
Expiscornovus Profile Picture

Expiscornovus 1,700