Widget Styling

Both the chat and search widgets support extensive customization through themes, CSS custom properties, and custom CSS injection.

Theme Basics

Chat Widget Theme

window.intufindConfig = {
  publishableKey: 'if_pk_xxx',
  theme: {
    primaryColor: '#6101fe',
    widgetBackground: '#ffffff',
    fontFamily: '"Inter", sans-serif',
  },
};

Or update dynamically:

window.IntufindChatbot.setTheme({
  primaryColor: '#6101fe',
});

Search Widget Theme

window.intufindSearchConfig = {
  publishableKey: 'if_pk_xxx',
  theme: {
    primaryColor: '#6101fe',
    colorScheme: 'dark',
  },
};

Or update dynamically:

window.IntufindSearch.setTheme({
  primaryColor: '#6101fe',
});

Chat Widget Theme Options

Colors

Property	Default	Description
`primaryColor`	`#6101fe`	Primary brand color
`primaryHover`	—	Primary color on hover
`primaryActive`	—	Primary color when active
`widgetBackground`	`#ffffff`	Main widget background
`backgroundSecondary`	—	Secondary background color
`userBubbleBackground`	`#6101fe`	User message bubble color
`assistantBubbleBackground`	`#f3f4f6`	Assistant message bubble color
`textSecondary`	—	Secondary text color
`textMuted`	—	Muted text color
`borderColor`	—	Default border color
`focusBorderColor`	—	Focus state border color

Status Colors

Property	Default	Description
`successColor`	`#10b981`	Success state color
`warningColor`	`#f59e0b`	Warning state color
`errorColor`	`#ef4444`	Error state color
`infoColor`	`#3b82f6`	Info state color

Spacing

Property	Default	Description
`spacing`	`1rem`	Base spacing unit
`spacingSmall`	`0.5rem`	Small spacing
`spacingLarge`	`1.5rem`	Large spacing
`spacingXl`	`2rem`	Extra large spacing
`borderRadius`	`0.5rem`	Default border radius
`borderRadiusSmall`	`0.25rem`	Small border radius
`borderRadiusLarge`	`1rem`	Large border radius

Typography

Property	Default	Description
`fontFamily`	system font	Font family
`fontSize`	`0.875rem`	Base font size
`fontSizeSmall`	`0.75rem`	Small font size
`fontSizeLarge`	`1rem`	Large font size
`lineHeight`	`1.5`	Base line height
`fontWeight`	`400`	Normal font weight
`fontWeightBold`	`600`	Bold font weight

Widget Dimensions

Property	Default	Description
`widgetWidth`	`400px`	Default widget width
`widgetMinWidth`	`320px`	Minimum width
`widgetMaxWidth`	`100vw`	Maximum width
`widgetHeight`	`600px`	Default widget height
`widgetMinHeight`	`400px`	Minimum height
`widgetMaxHeight`	`100vh`	Maximum height

Shadows

Property	Default	Description
`shadowLight`	—	Light shadow
`shadowMedium`	—	Medium shadow
`shadowHeavy`	—	Heavy shadow
`cardShadow`	—	Card shadow
`focusShadow`	—	Focus ring shadow

Animations

Property	Default	Description
`transitionFast`	`150ms`	Fast transition duration
`transitionNormal`	`200ms`	Normal transition duration
`transitionSlow`	`300ms`	Slow transition duration

Search Widget Theme Options

Color Scheme

window.IntufindSearch.setTheme({
  colorScheme: 'auto', // 'light', 'dark', or 'auto'
});

Component Themes

window.IntufindSearch.setTheme({
  // Overlay backdrop
  overlay: {
    background: 'rgba(0, 0, 0, 0.7)',
    blur: '12px',
  },
  
  // Modal container
  modal: {
    background: '#0a0a0a',
    border: 'rgba(255, 255, 255, 0.1)',
    borderRadius: '20px',
    shadow: '0 20px 60px rgba(0,0,0,0.3)',
    maxWidth: '800px',
  },
  
  // Search input
  input: {
    background: '#1a1a1a',
    text: '#ffffff',
    placeholder: 'rgba(255, 255, 255, 0.4)',
    border: 'rgba(255, 255, 255, 0.1)',
  },
  
  // Results list
  results: {
    background: 'transparent',
    hoverBackground: 'rgba(255, 255, 255, 0.08)',
    selectedBackground: 'rgba(255, 255, 255, 0.12)',
    text: '#ffffff',
    secondaryText: 'rgba(255, 255, 255, 0.5)',
  },
  
  // Search term highlighting
  highlight: {
    color: '#ffffff',
    background: 'rgba(97, 1, 254, 0.3)',
  },
  
  // Facet filter chips
  facets: {
    chipBackground: 'rgba(255, 255, 255, 0.08)',
    chipActiveBackground: '#6101fe',
    chipText: 'rgba(255, 255, 255, 0.6)',
    chipActiveText: '#ffffff',
  },
});

Custom CSS

For advanced customization, inject custom CSS:

Chat Widget

window.IntufindChatbot.setCustomCSS(`
  /* Custom header gradient */
  .itf-chat-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  /* Rounded message bubbles */
  .itf-chat-bubble {
    border-radius: 20px;
  }
  
  /* Custom send button */
  .itf-chat-send-button {
    background: #6101fe;
    border-radius: 50%;
  }
`);

Search Widget

window.IntufindSearch.setCustomCSS(`
  /* Larger modal */
  .itf-search-modal {
    max-width: 900px;
  }
  
  /* Custom input styling */
  .itf-search-input {
    font-size: 18px;
    padding: 20px;
  }
  
  /* Custom result cards */
  .itf-search-result {
    border-radius: 12px;
    padding: 16px;
  }
`);

CSS Custom Properties

Both widgets use CSS custom properties (CSS variables) that you can override:

Chat Widget Variables

:root {
  /* Colors */
  --itf-chat-primary: #6101fe;
  --itf-chat-primary-hover: #5001d4;
  --itf-chat-background: #ffffff;
  --itf-chat-user-bubble: #6101fe;
  --itf-chat-assistant-bubble: #f3f4f6;
  --itf-chat-text: #1f2937;
  --itf-chat-text-secondary: #6b7280;
  --itf-chat-border: #e5e7eb;
  
  /* Spacing */
  --itf-chat-spacing: 1rem;
  --itf-chat-border-radius: 0.5rem;
  
  /* Typography */
  --itf-chat-font-family: system-ui, -apple-system, sans-serif;
  --itf-chat-font-size: 0.875rem;
}

Search Widget Variables

:root {
  /* Colors */
  --itf-search-primary: #6101fe;
  --itf-search-modal-bg: #0a0a0a;
  --itf-search-input-bg: #1a1a1a;
  --itf-search-input-text: #ffffff;
  --itf-search-result-text: #ffffff;
  --itf-search-result-hover: rgba(255, 255, 255, 0.08);
  --itf-search-highlight-bg: rgba(97, 1, 254, 0.3);
  
  /* Dimensions */
  --itf-search-modal-max-width: 800px;
  --itf-search-border-radius: 20px;
}

Theme Presets

Chat Widget Presets

// Dark theme
window.intufindConfig = {
  publishableKey: 'if_pk_xxx',
  themePreset: 'dark',
};

// Available presets: 'default', 'dark', 'minimal'

Search Widget Color Schemes

// Auto (follows system preference)
window.IntufindSearch.setTheme({ colorScheme: 'auto' });

// Always dark
window.IntufindSearch.setTheme({ colorScheme: 'dark' });

// Always light
window.IntufindSearch.setTheme({ colorScheme: 'light' });

Dark Mode

Chat Widget Dark Mode

Provide a separate dark theme:

window.intufindConfig = {
  publishableKey: 'if_pk_xxx',
  theme: {
    primaryColor: '#6101fe',
    widgetBackground: '#ffffff',
  },
  darkTheme: {
    widgetBackground: '#1a1a1a',
    assistantBubbleBackground: '#2d2d2d',
  },
};

Search Widget Dark Mode

The search widget automatically detects system preference when using colorScheme: 'auto':

window.intufindSearchConfig = {
  publishableKey: 'if_pk_xxx',
  theme: {
    colorScheme: 'auto',
    primaryColor: '#6101fe',
    darkPrimaryColor: '#8b5cf6', // Used in dark mode
  },
};

Examples

Minimal Light Theme

window.IntufindChatbot.setTheme({
  primaryColor: '#000000',
  widgetBackground: '#ffffff',
  userBubbleBackground: '#000000',
  assistantBubbleBackground: '#f5f5f5',
  borderRadius: '4px',
  fontFamily: '"Helvetica Neue", Arial, sans-serif',
});

Bold Brand Theme

window.IntufindChatbot.setTheme({
  primaryColor: '#ff6b00',
  widgetBackground: '#1a1a1a',
  userBubbleBackground: '#ff6b00',
  assistantBubbleBackground: '#2d2d2d',
  borderRadius: '16px',
  fontFamily: '"Poppins", sans-serif',
});

Glassmorphism Search

window.IntufindSearch.setTheme({
  colorScheme: 'dark',
  overlay: {
    background: 'rgba(0, 0, 0, 0.5)',
    blur: '20px',
  },
  modal: {
    background: 'rgba(255, 255, 255, 0.1)',
    border: 'rgba(255, 255, 255, 0.2)',
    borderRadius: '24px',
  },
  input: {
    background: 'rgba(255, 255, 255, 0.05)',
  },
});

Best Practices

Color Contrast

Ensure sufficient contrast for accessibility:

Text on backgrounds: minimum 4.5:1 ratio
Large text: minimum 3:1 ratio
Use tools like WebAIM Contrast Checker

Consistent Branding

Match your website's design system:

Use your brand's primary color
Match font families
Use consistent border radius values
Align spacing with your grid system

Mobile Considerations

Test on mobile devices:

Touch targets should be at least 44x44px
Text should be readable without zooming
Ensure the widget doesn't overlap critical content

Performance

Keep custom CSS minimal:

Avoid expensive selectors
Don't override too many properties
Use CSS custom properties for dynamic values

Troubleshooting

Styles not applying

Check CSS selector specificity
Ensure setCustomCSS is called after widget loads
Verify there are no typos in property names

Theme not updating

Call setTheme() or configure() after changes
Some properties require a page refresh
Check console for validation errors

CSS conflicts

Widget CSS uses .itf- prefix to avoid conflicts
Check for overly broad selectors in your theme
Use !important sparingly in custom CSS

Next Steps

Chat Widget — Chat widget configuration
Search Widget — Search widget configuration
Framework Integration — Framework-specific guides