Custom CSS

If the built-in color and theme settings are not enough, you can restyle both widgets with your own CSS. The CSS is injected directly into the widget, so it works even though the widget runs in a Shadow DOM that your page's stylesheets cannot reach.

Available on Standard plans and higher, for both the floating widget and the inline widget — each with its own CSS field.

Where to Find It

• Floating widget: Dashboard → Chatbot → Widget Customization → Advanced tab
• Inline widget: Dashboard → Chatbot → Inline Widget → Advanced tab

The live preview next to the editor applies your CSS as you type. The field accepts up to 20,000 characters.

Stable Selectors

Your CSS targets the widget's elements via these documented classes. They are a stable contract: they keep working across widget updates.

Warning: Only these selectors are stable. All other internal class names may change without notice when the widget is updated and can break your styling. Re-check your styling after widget updates.

No !important Needed

Your CSS automatically overrides the widget's built-in styles — plain selectors are enough:

.wca-header {
  background: #0f172a;
}
.wca-message--bot {
  border-radius: 4px;
}

Technically, the widget moves its built-in styles into a CSS cascade layer when custom CSS is present, so your (unlayered) rules always win regardless of selector specificity.

Examples

Restyle the chat button with an animation:

@keyframes wca-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.wca-bubble {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  animation: wca-pulse 2s ease-in-out infinite;
}

Square message bubbles with a custom font size:

.wca-message--bot,
.wca-message--user {
  border-radius: 4px;
  font-size: 15px;
}

Custom input styling:

.wca-input {
  border: 2px solid #0f172a;
  border-radius: 8px;
}
.wca-input::placeholder {
  color: #94a3b8;
}

Limitations

• Position and size of the floating widget (offsets, width, height) are controlled by the dashboard settings, not by CSS — they are applied as inline styles
• Other internal classes beyond the documented .wca-* selectors are not stable
• @import and external url() references are allowed but count toward the character limit and add load time

Best Practices

• Prefer the built-in settings for colors, fonts, and images — use custom CSS only for what the settings can't do
• Stick to the documented selectors so widget updates don't break your styling
• Check your live site after widget updates, especially if you styled beyond the stable selectors
• Keep it small — a handful of targeted rules is easier to maintain than a full re-theme