N8N Chat UI
Docs
Custom CSS

Custom CSS

Learn how to add custom CSS styling to your chat widget for advanced customization beyond the built-in options.

Add your own custom CSS styling to fully customize your chat widget's appearance beyond the built-in customization options.

Premium Feature: Custom CSS is only available for premium users. Upgrade your plan to unlock this feature.

Overview

The custom CSS feature allows you to inject your own CSS styles directly into the chat widget, giving you complete control over its appearance. This is perfect for:

  • Matching your brand's exact design system
  • Adding animations and transitions
  • Fine-tuning spacing and typography
  • Creating unique visual effects
  • Overriding default styles for specific elements

Configuration

Custom CSS is configured using the customCSS property inside the theme object of your widget configuration:

{
  "theme": {
    "customCSS": ".n8n-chat-ui-bot-container { background-color: red !important; }"
    // Other theme properties
  }
  // Other properties
}

For multi-line styles, use template literals with backticks for better readability:

{
  "theme": {
    "customCSS": `
      .n8n-chat-ui-bot-container {
        background-color: #f9f9f9 !important;
        border-radius: 10px !important;
      }
 
      .n8n-chat-ui-bot-container .message {
        font-size: 14px !important;
      }
    `
    // Other theme properties
  }
  // Other properties
}

Best Practices

Always Use !important

We recommend adding !important to all your custom CSS rules to ensure they override the default widget styles:

.n8n-chat-ui-bot-container {
  background-color: red !important;
  padding: 20px !important;
  border-radius: 10px !important;
}

This ensures your custom styles take precedence over the widget's default styling, preventing conflicts and ensuring consistent appearance.

Use Specific Selectors

Always use the provided CSS class names to ensure your styles target the correct elements:

/* Good - specific selector with !important */
.n8n-chat-ui-bot-message {
  background-color: #f0f0f0 !important;
}
 
/* Avoid - too generic */
.message {
  background-color: #f0f0f0;
}

Troubleshooting

Styles Not Applying?

  • Try adding !important to override default styles
  • Check if you're using the correct CSS selectors
  • Verify your CSS syntax is correct
  • Make sure you have a premium subscription

Premium Upgrade

Custom CSS is a premium feature. If you haven't upgraded yet, visit our pricing page to unlock this and other advanced customization options.

Next Steps

Voice Input