Custom CSS for Feedback Widget (Complete Guide)

Want to customize the Boost Toad widget to match your brand perfectly? This guide covers everything from basic color changes to advanced CSS customization.

What you'll learn:

✓Changing widget colors and fonts
✓Positioning and sizing
✓Animations and transitions
✓Dark mode support
✓Mobile responsiveness
✓Advanced CSS techniques

Basic Styling

▸Dashboard-Based Customization

The easiest way to customize appearance:

✓Go to Boost Toad Dashboard
✓Select your project
✓Click Settings → Appearance
✓Customize:

- Primary color - Button position - Widget size - Font family

This covers 90% of use cases without writing CSS.

▸When to Use Custom CSS

Use custom CSS when you need:

✓Matching complex brand guidelines
✓Advanced animations
✓Responsive adjustments
✓Dark mode theming
✓Custom button shapes

CSS Customization

The widget uses Shadow DOM for style isolation. To customize, use CSS variables:

/* Set global CSS variables */
:root {
  --feedback-widget-primary: #6366f1;
  --feedback-widget-background: #ffffff;
  --feedback-widget-text: #1f2937;
  --feedback-widget-border: #e5e7eb;
  --feedback-widget-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

css

▸Available CSS Variables

/* Colors */
--feedback-widget-primary: #6366f1;        /* Primary brand color */
--feedback-widget-primary-hover: #4f46e5;  /* Hover state */
--feedback-widget-background: #ffffff;     /* Background color */
--feedback-widget-text: #1f2937;           /* Text color */
--feedback-widget-text-light: #6b7280;     /* Secondary text */
--feedback-widget-border: #e5e7eb;         /* Border color */
--feedback-widget-error: #ef4444;          /* Error state */
--feedback-widget-success: #10b981;        /* Success state */

/* Sizing */
--feedback-widget-button-size: 60px;       /* Trigger button size */
--feedback-widget-modal-width: 500px;      /* Modal width */
--feedback-widget-modal-height: 600px;     /* Modal max height */
--feedback-widget-border-radius: 8px;      /* Border radius */

/* Positioning */
--feedback-widget-bottom: 20px;            /* Distance from bottom */
--feedback-widget-right: 20px;             /* Distance from right */
--feedback-widget-z-index: 9999;           /* Z-index */

/* Typography */
--feedback-widget-font-family: system-ui, -apple-system, sans-serif;
--feedback-widget-font-size: 16px;
--feedback-widget-line-height: 1.5;

/* Shadows */
--feedback-widget-shadow: 0 10px 25px rgba(0,0,0,0.1);
--feedback-widget-shadow-lg: 0 20px 40px rgba(0,0,0,0.15);

/* Transitions */
--feedback-widget-transition: all 0.2s ease;

css

▸Example: Custom Brand Colors

:root {
  --feedback-widget-primary: #ff6b6b;
  --feedback-widget-primary-hover: #ee5a5a;
  --feedback-widget-background: #fafafa;
  --feedback-widget-border-radius: 12px;
}

css

▸Example: Dark Mode

/* Automatic dark mode based on system preference */
@media (prefers-color-scheme: dark) {
  :root {
    --feedback-widget-background: #1f2937;
    --feedback-widget-text: #f9fafb;
    --feedback-widget-text-light: #d1d5db;
    --feedback-widget-border: #374151;
  }
}

/* Manual dark mode toggle */
[data-theme="dark"] {
  --feedback-widget-background: #1f2937;
  --feedback-widget-text: #f9fafb;
  /* ... */
}

css

▸Example: Custom Positioning

/* Bottom left instead of bottom right */
:root {
  --feedback-widget-bottom: 20px;
  --feedback-widget-left: 20px;  /* Use left instead of right */
  --feedback-widget-right: auto;  /* Disable right positioning */
}

/* Mobile: Full width at bottom */
@media (max-width: 640px) {
  :root {
    --feedback-widget-bottom: 0;
    --feedback-widget-left: 0;
    --feedback-widget-right: 0;
    --feedback-widget-modal-width: 100%;
    --feedback-widget-border-radius: 16px 16px 0 0;
  }
}

css

▸Advanced: Custom Animations

/* Custom slide-in animation */
@keyframes feedbackSlideIn {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

:root {
  --feedback-widget-animation: feedbackSlideIn 0.3s ease-out;
}

css

▸Best Practices

DO:

✓Use CSS variables for easy themingkeep
✓Test on mobile devices
✓Consider dark mode
✓Use relative units (rem, em)
✓Maintain accessibility (contrast, focus states)

DON'T:

✓Override Shadow DOM styles directly
✓Use !important (use CSS variables instead)
✓Set fixed pixel sizes for everything
✓Forget to test across browsers

Common Use Cases

▸1. Matching Brand Colors

/* Brand: Stripe-style */
:root {
  --feedback-widget-primary: #635bff;
  --feedback-widget-primary-hover: #0a2540;
  --feedback-widget-border-radius: 6px;
  --feedback-widget-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
}

css

▸2. Minimalist Design

:root {
  --feedback-widget-primary: #000000;
  --feedback-widget-background: #ffffff;
  --feedback-widget-border: 1px solid #000000;
  --feedback-widget-border-radius: 0;
  --feedback-widget-shadow: none;
}

css

▸3. Playful/Fun Brand

:root {
  --feedback-widget-primary: #ff6b6b;
  --feedback-widget-border-radius: 20px;
  --feedback-widget-shadow: 0 8px 30px rgba(255, 107, 107, 0.3);
}

css

Wrapping Up

With CSS customization, you can make the Boost Toad widget match your brand perfectly. Use CSS variables for easy theming, and test across devices for the best experience.

Get started with Boost Toad →