🎨 Customization

The widget uses Shadow DOM for style isolation.
You can customize it using CSS custom properties and ::part() selectors.

🎯 CSS Variables

Override these variables on the .chat-widget class:

.chat-widget {
  /* Colors (HSL format without hsl()) */
  --cw-primary: 221 83% 53%;
  --cw-secondary: 258 83% 66%;
  --cw-background: 0 0% 100%;
  --cw-foreground: 222.2 84% 4.9%;

  /* Layout */
  --cw-z-index: 50;
  --cw-button-bottom: 20px;
  --cw-button-right: 20px;
  --cw-window-bottom: 20px;
  --cw-window-right: 20px;

  /* Border radius */
  --cw-radius: 1rem;
}

🧩 Part Selectors

Style internal elements using ::part():

/* Floating button container */
.chat-widget::part(button) {}

/* Chat window container */
.chat-widget::part(window) {}

/* Chat header */
.chat-widget::part(header) {}

/* Messages area */
.chat-widget::part(body) {}

/* Input area */
.chat-widget::part(footer) {}

🖨️ Print Behavior

The widget automatically hides during printing.
No additional configuration is required.

🎞️ Reduced Motion

Animations are automatically disabled for users with
prefers-reduced-motion: reduce.

💡 Examples

📍 Reposition the widget

.chat-widget {
  --cw-button-bottom: 100px;
  --cw-button-right: 30px;
  --cw-window-bottom: 100px;
  --cw-window-right: 30px;
}

🔝 Higher z-index (above modals)

.chat-widget {
  --cw-z-index: 99999;
}

🚫 Hide widget on specific pages

.no-chat .chat-widget {
  display: none;
}

♿ Accessibility

The widget includes built-in accessibility features:

• role="dialog" and aria-modal="true" on the chat window

• aria-label on all interactive buttons

• aria-haspopup="dialog" on the floating button

• Full keyboard navigation support