Style Target Map for Chatbot UI Control

Styling Channel

text

Supported channel
- config.styleOverrides

Stable Root Selector

html

<script>
  window.ChatbotSDK.mount("#cv-chat", {
    chatbotKey: "ctx-cb-xxxxxxxxxxxxxxxx",
    config: {
      domId: "cv-chat-shell",
      mode: "chat"
    }
  });
</script>

Use domId when you want your own stable CSS selector on the mounted root shell in addition to styleOverrides.

Layout Targets

styleOverrides Path	Applied Region
`layout.root`	Outer chat shell container
`layout.header`	Header row
`layout.title`	Header title element
`layout.messagesContainer`	Scrollable messages section

Message Targets

styleOverrides Path	Applied Region
`userMessage.bubble`	User bubble container
`userMessage.text`	User message text
`userMessage.avatar`	User avatar wrapper
`assistantMessage.bubble`	Assistant bubble container
`assistantMessage.text`	Assistant message text
`assistantMessage.avatar`	Assistant avatar wrapper

Input and Widget Targets

styleOverrides Path	Applied Region
`input.wrapper`	Input section wrapper
`input.container`	Input row container
`input.textarea`	Textarea element
`input.sendButton`	Send button
`input.poweredBy`	Powered-by text row
`input.poweredByBrand`	Powered-by brand segment
`widget.wrapper`	Floating wrapper (positioned shell)
`widget.window`	Floating chat window
`widget.launcher`	Floating launcher button

Related References

Style Overrides

Practical usage patterns for styleOverrides keys.

Config Reference

All public configuration options.

Default Behavior

Current widget language behavior.

Embed Troubleshooting

Troubleshoot non-applied styles and stale builds.