AI Chatbot Widget Style Overrides Guide

Supported Styling Surface

styleOverrides: {
  layout?: {
    root?: CSSProperties;
    header?: CSSProperties;
    title?: CSSProperties;
    messagesContainer?: CSSProperties;
  };
  userMessage?: {
    bubble?: CSSProperties;
    text?: CSSProperties;
    avatar?: CSSProperties;
  };
  assistantMessage?: {
    bubble?: CSSProperties;
    text?: CSSProperties;
    avatar?: CSSProperties;
  };
  input?: {
    wrapper?: CSSProperties;
    container?: CSSProperties;
    textarea?: CSSProperties;
    sendButton?: CSSProperties;
    poweredBy?: CSSProperties;
    poweredByBrand?: CSSProperties;
  };
  widget?: {
    wrapper?: CSSProperties;
    window?: CSSProperties;
    launcher?: CSSProperties;
  };
}

How to Style

text

Use config.styleOverrides with CSSProperties objects.
Apply only the keys listed in this page and Style Target Map.

Reference Styling Example

html

<link rel="stylesheet" href="https://cdn.cortexvia.in/chatbotsdk-web.css" />
<script src="https://cdn.cortexvia.in/chatbotsdk-web.iife.js"></script>
<div id="cv-chat"></div>
<script>
  window.ChatbotSDK.mount("#cv-chat", {
    chatbotKey: "ctx-cb-xxxxxxxxxxxxxxxx",
    config: {
      mode: "chat",
      inputPlaceholder: "Ask anything...",
      styleOverrides: {
        layout: {
          root: { borderRadius: "20px", border: "1px solid #e2e8f0" },
          messagesContainer: { backgroundColor: "#f8fafc" }
        },
        userMessage: {
          bubble: { backgroundColor: "#0f172a", color: "#ffffff" },
          text: { fontSize: "14px" }
        },
        assistantMessage: {
          bubble: { backgroundColor: "#ffffff", border: "1px solid #e2e8f0" },
          text: { color: "#0f172a", fontSize: "14px" }
        },
        input: {
          container: { borderColor: "#cbd5e1", backgroundColor: "#ffffff" },
          sendButton: { backgroundColor: "#0f172a" }
        },
        widget: {
          wrapper: { zIndex: 9999 }
        }
      }
    }
  });
</script>

Styling Strategy for Large Teams

Step 1: set shell shape and spacing in layout.

Step 2: set role contrast in userMessage and assistantMessage.

Step 3: set input and action affordance in input.

Step 4: tune floating behavior in widget when mode is chatbot.

Safety Note

Prefer overriding only what you need. Broad style overrides can accidentally reduce readability or touch-target accessibility in mobile layouts.

Related References

Style Target Map

Exact mapping from styleOverrides paths to UI regions.

Modes and Layout

Mode behavior that changes effective layout surface.

Embed Troubleshooting

Debug non-applied styles and layout conflicts.