[Omnichannel] How do I style Adaptive Cards and their children when using Omnichannel Live Chat Widget / BotFramework WebChat?

[YayoKB]

I have a question

What I'm using:

• an embedded Omnichannel Live Chat Widget in a content snippet on a Power Apps page (as outlined here)
• the out-of-the-box script as outlined here
• an adaptiveCardsHostConfig (but it doesn't cover all the things I need to style)

I'm trying to style the adaptive cards and their content (such as the inputs, Action.OpenUrl items, etc.) beyond just basic styling. I want to be able to change the border radius, padding, etc. of these elements.

The most customization I can seem to do easily on adaptive cards' children is inside the webChatStyles prop:

cardEmphasisBackgroundColor: "red",
cardPushButtonTextColor: "green",
cardPushButtonBackgroundColor: "blue",

I know about the middleware, but there are three I've seen on the BotFramework-WebChat repo and have no idea which one to use and how to access it when using Omnichannel:

• activityMiddleware
• attachmentMiddleware
• cardActionMiddleware

Here is my script that contains the lcw() function:

    <script>
      function lcw() {
        return {
          styleProps: {
            generalStyles: {
              borderRadius: "12px",
              minWidth: "400px",
            },
          },
          controlProps: {
            hideFooter: true,
          },
          webChatContainerProps: {
            webChatStyles: {
              accent: "magenta !important",
              subtle: "lime !important",
              cardEmphasisBackgroundColor: "red",
              cardPushButtonTextColor: "red",
              cardPushButtonBackgroundColor: "red",
              backgroundColor: "#f3f4f7",
              bubbleBackground: "#e7ecf4",
              bubbleTextColor: "#3C4E6D",
              // other styles
            },
            webChatProps: {
              adaptiveCardsHostConfig: {
                allowCustomStyle: true,
                supportsInteractivity: true,
                containerStyles: {
                  // containerStyles
                },
                adaptiveCard: {
                  allowCustomStyle: true,
                },
              },
            },
            renderingMiddlewareProps: {
              attachmentAdaptiveCardStyles: {
                borderStyle: "solid",
                borderColor: "red",
                borderWidth: "2px",
              },
              userMessageStyleProps: {
                fontSize: "1rem",
                lineHeight: "1.5",
              },
              systemMessageStyleProps: {
                fontSize: "1rem",
                lineHeight: "1.5",
              },
            },
          },
        };
      }
    </script>

And here is the script that contains the Omnichannel bundle:

<script
      v2
      id="Microsoft_Omnichannel_LCWidget"
      src="https://oc-cdn-public-eur.azureedge.net/livechatwidget/scripts/LiveChatBootstrapper.js"
      data-app-id="APP_ID"
      data-lcw-version="prod"
      data-org-id="ORG_ID"
      data-org-url="ORG_URL"
      data-customization-callback="lcw"
      data-font-family-override="system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol"
      data-color-override="#2d8dd2"
    >
</script>

I've already asked this question on Stack Overflow if anyone would rather reply on there. Thank you!

[OEvgeny]

Not sure about OmniChannel, but here is how you could do this with vanilla Web Chat: https://stackblitz.com/edit/sb1-ads7jw?file=index.js,components%2FCustomSubmitAction.js

[YayoKB]

Not sure about OmniChannel, but here is how you could do this with vanilla Web Chat: https://stackblitz.com/edit/sb1-ads7jw?file=index.js,components%2FCustomSubmitAction.js

Hi, thanks for the reply and the resource :) I think that, unfortunately, the solution involves some other middleware that Omnichannel will have to expose for script-layer users. :(

[OEvgeny]

I'd suggest reaching out to OmniChannel team, so they provide feature parity with Web Chat at least on visual customization. Alternatively you could try overriding adaptive cards styles using CSS, but it's not recommended.