Widget Styling

The Intufind widget provides a comprehensive theming system for complete visual customization.

Theme Presets

Use built-in presets for quick styling:

// Apply dark theme
IntufindChatbot.applyPreset('dark');

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

Preset	Description
`default`	Clean, modern light theme
`dark`	Elegant dark theme
`minimal`	Simplified with minimal shadows

Theme Structure

The theme is organized into logical sections:

IntufindChatbot.setTheme({
  colors: { /* Color palette */ },
  spacing: { /* Spacing & dimensions */ },
  typography: { /* Font settings */ },
  shadows: { /* Shadow effects */ },
  animations: { /* Transitions */ },
  header: { /* Header styling */ },
  chatBubble: { /* Message bubbles */ },
  triggerButton: { /* Floating button */ },
  promptChip: { /* Suggested prompts */ },
  // ... more sections
});

Colors

Primary Colors

colors: {
  primaryColor: '#0084ff',      // Buttons, links, accents
  primaryHover: '#0073e6',      // Hover state
  primaryTextColor: '#ffffff',  // Text on primary backgrounds
}

Background Colors

colors: {
  widgetBackground: '#ffffff',           // Main widget background
  backgroundSecondary: '#f8f9fa',        // Secondary areas
  userBubbleBackground: '#0084ff',       // User message bubbles
  assistantBubbleBackground: '#f1f3f4',  // AI message bubbles
}

Text Colors

colors: {
  inputTextColor: '#202124',           // Input field text
  userBubbleTextColor: '#ffffff',      // User message text
  assistantBubbleTextColor: '#202124', // AI message text
  textSecondary: '#5f6368',            // Secondary text
  textMuted: '#9aa0a6',                // Muted/placeholder text
}

Border Colors

colors: {
  borderColor: '#dadce0',           // Default borders
  borderLight: '#f1f3f4',           // Light borders
  focusBorderColor: '#0084ff',      // Focus states
  messageBorderColor: 'rgba(0, 0, 0, 0.1)',
}

Status Colors

colors: {
  successColor: '#34a853',
  warningColor: '#fbbc04',
  errorColor: '#ea4335',
  infoColor: '#4285f4',
}

Spacing & Dimensions

spacing: {
  // Layout spacing
  spacing: '12px',
  spacingSmall: '8px',
  spacingLarge: '16px',

  // Border radius
  borderRadius: '12px',
  borderRadiusSmall: '8px',
  borderRadiusLarge: '18px',

  // Bubble padding
  bubblePaddingX: '16px',
  bubblePaddingY: '12px',

  // Widget dimensions
  widgetWidth: '420px',
  widgetMaxWidth: '1200px',
  widgetHeight: '550px',
  widgetMaxHeight: '1000px',
  widgetMinHeight: '400px',
  widgetMinWidth: '320px',
}

Typography

typography: {
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
  fontSize: '14px',
  fontSizeSmall: '12px',
  fontSizeLarge: '16px',
  lineHeight: '1.4',
  fontWeight: '400',
  fontWeightBold: '600',

  // Specific typography
  titleFontSize: '16px',
  titleFontWeight: '600',
  metaFontSize: '12px',
  timestampFontSize: '11px',
}

Shadows

shadows: {
  shadowLight: '0 1px 3px rgba(0, 0, 0, 0.1)',
  shadowMedium: '0 2px 8px rgba(0, 0, 0, 0.15)',
  shadowHeavy: '0 4px 20px rgba(0, 0, 0, 0.2)',
  cardShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
  focusShadow: '0 0 0 3px rgba(0, 132, 255, 0.1)',
}

Animations

animations: {
  transitionFast: '0.15s ease-out',
  transitionNormal: '0.25s ease-out',
  transitionSlow: '0.35s ease-out',
  easingDefault: 'cubic-bezier(0.4, 0, 0.2, 1)',
  easingBounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
}

Component Themes

Header

header: {
  background: '#f8fafc',
  borderColor: '#e2e8f0',
  padding: '16px',

  avatar: {
    size: '38px',
    borderRadius: '50%',
    borderWidth: '2px',
    borderColor: '#e2e8f0',
    backgroundColor: '#f1f5f9',
    display: true,
  },

  title: {
    color: '#0f172a',
    fontSize: '16px',
    fontWeight: '600',
  },

  subtitle: {
    color: '#64748b',
    fontSize: '12px',
  },

  closeButton: {
    color: '#64748b',
    hoverBackground: '#e2e8f0',
  },
}

Chat Bubbles

chatBubble: {
  user: {
    background: '#0084ff',
    textColor: '#ffffff',
    borderRadius: '18px',
  },
  assistant: {
    background: '#f1f3f4',
    textColor: '#202124',
    borderRadius: '18px',
  },
  maxWidth: '85%',
  paddingX: '16px',
  paddingY: '12px',
}

Trigger Button

triggerButton: {
  background: '#0084ff',
  borderColor: 'transparent',
  hoverBackground: '#0073e6',
  textColor: '#ffffff',
  iconColor: '#ffffff',

  bubble: {
    background: '#ffffff',
    textColor: '#202124',
    borderColor: '#dadce0',
  },
}

Prompt Chips

promptChip: {
  background: '#f6f7f8',
  textColor: '#202124',
  borderColor: '#dadce0',
  borderRadius: '16px',
  paddingX: '10px',
  paddingY: '6px',

  hover: {
    background: '#e8f0fe',
    textColor: '#202124',
    borderColor: '#1a73e8',
  },
}

Message Actions

messageActions: {
  display: true,
  userCopyButtonDisplay: false,
  borderColor: 'rgba(0, 0, 0, 0.1)',

  positive: {
    color: '#4caf50',
    hoverBackground: 'rgba(76, 175, 80, 0.08)',
  },
  negative: {
    color: '#f44336',
    hoverBackground: 'rgba(244, 67, 54, 0.08)',
  },
  copy: {
    successColor: '#28a745',
    hoverBackground: 'rgba(0, 123, 255, 0.08)',
  },
}

Timestamps

timestamp: {
  color: '#6c757d',
  userTimestampColor: 'rgba(255, 255, 255, 0.8)',
  fontSize: '11px',
  format: 'relative', // 'relative', 'absolute', or 'time-only'
  display: true,
}

Resize Handle

resize: {
  handle: {
    display: true,
    color: '#64748b',
    hoverColor: '#475569',
    activeColor: '#3b82f6',
    size: '16px',
  },
  resizing: {
    borderColor: 'rgba(59, 130, 246, 0.5)',
    shadowColor: 'rgba(0, 0, 0, 0.35)',
    cursor: 'nw-resize',
  },
}

Custom CSS

For complete control, inject custom CSS:

IntufindChatbot.setCustomCSS(`
  /* Custom styles */
  .intufind-widget {
    font-family: 'Your Font', sans-serif;
  }

  /* Gradient header */
  .intufind-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
  }

  /* Custom message bubbles */
  .intufind-message-bot {
    background: #f0f4f8;
    border-left: 3px solid #667eea;
  }
`);

Dark Theme Example

Complete dark theme configuration:

IntufindChatbot.setTheme({
  colors: {
    widgetBackground: '#1f1f1f',
    backgroundSecondary: '#2d2d2d',
    inputTextColor: '#ffffff',
    assistantBubbleBackground: '#2d2d2d',
    assistantBubbleTextColor: '#ffffff',
    textSecondary: '#b3b3b3',
    textMuted: '#8a8a8a',
    borderColor: '#404040',
    borderLight: '#505050',
  },
  header: {
    background: '#2d2d2d',
    borderColor: '#404040',
    title: { color: '#ffffff' },
    subtitle: { color: '#b3b3b3' },
    closeButton: {
      color: '#b3b3b3',
      hoverBackground: '#404040',
    },
  },
  triggerButton: {
    bubble: {
      background: '#2d2d2d',
      textColor: '#ffffff',
      borderColor: '#404040',
    },
  },
});

Brand Color Generator

Quickly generate a cohesive theme from your brand color:

// WordPress: Use the "Generate from Color" feature
// Shopify: Use the color picker with auto-generate

// Or manually set primary and derive others:
IntufindChatbot.setTheme({
  colors: {
    primaryColor: '#FF6B6B',
    primaryHover: '#FF5252',
    userBubbleBackground: '#FF6B6B',
    focusBorderColor: '#FF6B6B',
  },
  header: {
    avatar: { borderColor: '#FF6B6B' },
  },
  promptChip: {
    hover: { borderColor: '#FF6B6B' },
  },
});

Responsive Breakpoints

The widget automatically adjusts for different screen sizes:

breakpoints: {
  mobile: '768px',      // Full-screen mode
  smallMobile: '480px', // Compact layout
  tinyMobile: '420px',  // Minimal chrome
}

Adding Styles by Platform

WordPress

Go to Intufind → Chat → Appearance
Use the visual controls or Custom CSS field
Click Save Changes

Shopify

Go to Apps → Intufind → Settings → Styling
Use the color pickers and theme options
Add custom CSS in the Advanced section
Save changes

Custom Integration

<script>
window.IntufindConfig = {
  theme: {
    colors: {
      primaryColor: '#FF6B6B'
    }
  },
  customCSS: `
    .intufind-widget { border-radius: 24px; }
  `
};
</script>

Debugging Styles

Use browser DevTools to inspect and test:

Right-click the widget → Inspect
Find element classes (e.g., .intufind-message-bot)
Test styles in the Styles panel
Copy working styles to your configuration

Next Steps

Widget Customization — Behavior configuration
Chat Prompts — Configure suggestions
Dashboard Overview — Monitor performance