Widget Theming

Make the widget feel like a natural part of your website by customizing colors, fonts, and styling.

Theme Options

WidgetTheme

primaryColorstringdefault: #6366f1

Primary color for buttons, links, and accents. Also used for user message bubbles.

backgroundColorstringdefault: #ffffff

Background color of the chat window.

textColorstringdefault: #1f2937

Main text color for messages and UI elements.

fontFamilystringdefault: system-ui, -apple-system, sans-serif

Font family for all text. Use web-safe fonts or load custom fonts on your page.

borderRadiusstringdefault: 16px

Border radius for the chat window. Use "0" for square corners.

headerColorstringdefault: primaryColor

Background color of the header. Defaults to primaryColor if not set.

userBubbleColorstringdefault: primaryColor

Background color of user message bubbles.

assistantBubbleColorstringdefault: #f3f4f6

Background color of assistant message bubbles.

Basic Example

RagChatsWidget.init({
  botId: 500">class="text-green-500">'YOUR_BOT_ID',
  apiKey: 500">class="text-green-500">'YOUR_API_KEY',
  theme: {
    primaryColor: 500">class="text-green-500">'#6366f1',
    backgroundColor: 500">class="text-green-500">'#ffffff',
    textColor: 500">class="text-green-500">'#1f2937',
  }
});

Theme Presets

Here are some common theme configurations to get you started:

Light Theme (Default)

theme: {
  primaryColor: 500">class="text-green-500">'#6366f1',
  backgroundColor: 500">class="text-green-500">'#ffffff',
  textColor: 500">class="text-green-500">'#1f2937',
  headerColor: 500">class="text-green-500">'#6366f1',
  userBubbleColor: 500">class="text-green-500">'#6366f1',
  assistantBubbleColor: 500">class="text-green-500">'#f3f4f6',
}

Dark Theme

theme: {
  primaryColor: 500">class="text-green-500">'#818cf8',
  backgroundColor: 500">class="text-green-500">'#1f2937',
  textColor: 500">class="text-green-500">'#f9fafb',
  headerColor: 500">class="text-green-500">'#111827',
  userBubbleColor: 500">class="text-green-500">'#6366f1',
  assistantBubbleColor: 500">class="text-green-500">'#374151',
}

Green/Nature Theme

theme: {
  primaryColor: 500">class="text-green-500">'#10b981',
  backgroundColor: 500">class="text-green-500">'#ffffff',
  textColor: 500">class="text-green-500">'#1f2937',
  headerColor: 500">class="text-green-500">'#059669',
  userBubbleColor: 500">class="text-green-500">'#10b981',
  assistantBubbleColor: 500">class="text-green-500">'#ecfdf5',
}

Purple/Vibrant Theme

theme: {
  primaryColor: 500">class="text-green-500">'#8b5cf6',
  backgroundColor: 500">class="text-green-500">'#faf5ff',
  textColor: 500">class="text-green-500">'#1f2937',
  headerColor: 500">class="text-green-500">'#7c3aed',
  userBubbleColor: 500">class="text-green-500">'#8b5cf6',
  assistantBubbleColor: 500">class="text-green-500">'#f3e8ff',
}

Custom Fonts

To use a custom font, first load it on your page, then reference it in the theme:

<!-- Load Google Font -->
<link href=500">class="text-green-500">"https:500">class="text-muted-foreground500">class="text-green-500">">//fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel=500">class="text-green-500">"stylesheet">

<script>
RagChatsWidget.init({
  botId: 500">class="text-green-500">'YOUR_BOT_ID',
  apiKey: 500">class="text-green-500">'YOUR_API_KEY',
  theme: {
    fontFamily: 500">class="text-green-500">'Inter, system-ui, sans-serif',
  }
});
</script>

CSS Custom Properties

The widget exposes CSS custom properties you can override for deeper customization:

/* Add to your stylesheet */
.ragchats-widget {
  --rc-primary: #6366f1;
  --rc-primary-foreground: #ffffff;
  --rc-background: #ffffff;
  --rc-foreground: #1f2937;
  --rc-muted: #f3f4f6;
  --rc-muted-foreground: #6b7280;
  --rc-border: #e5e7eb;
  --rc-radius: 16px;
  --rc-font-family: Inter, system-ui, sans-serif;
}

Shadow DOM

The widget uses Shadow DOM for style isolation. CSS custom properties work across the shadow boundary, but direct CSS selectors won't affect internal elements.

Responsive Design

The widget automatically adapts to different screen sizes. On mobile devices:

Chat window expands to full width
Touch-friendly button sizes
Optimized keyboard handling

Dark Mode

To support dark mode on your site, update the theme dynamically:

500">class=500">class="text-green-500">"text-muted-foreground">// Listen 500">for color scheme changes
500">const mediaQuery = window.matchMedia(500">class="text-green-500">'(prefers-color-scheme: dark)');

500">function updateWidgetTheme(isDark) {
  RagChatsWidget.updateConfig({
    theme: isDark ? {
      primaryColor: 500">class="text-green-500">'#818cf8',
      backgroundColor: 500">class="text-green-500">'#1f2937',
      textColor: 500">class="text-green-500">'#f9fafb',
      headerColor: 500">class="text-green-500">'#111827',
      assistantBubbleColor: 500">class="text-green-500">'#374151',
    } : {
      primaryColor: 500">class="text-green-500">'#6366f1',
      backgroundColor: 500">class="text-green-500">'#ffffff',
      textColor: 500">class="text-green-500">'#1f2937',
      headerColor: 500">class="text-green-500">'#6366f1',
      assistantBubbleColor: 500">class="text-green-500">'#f3f4f6',
    }
  });
}

500">class=500">class="text-green-500">"text-muted-foreground">// Initial theme
updateWidgetTheme(mediaQuery.matches);

500">class=500">class="text-green-500">"text-muted-foreground">// Listen 500">for changes
mediaQuery.addEventListener(500">class="text-green-500">'change', (e) => updateWidgetTheme(e.matches));

Brand Guidelines

Tips for matching your brand:

Use your brand's primary color for primaryColor
Keep contrast high — ensure text is readable against backgrounds
Match your site's typography with fontFamily
Consider your site's border radius — round or square corners
Add your logo using the logoUrl option