Styling & Theming

Customize the FeedbackJar widget to match your brand and design system.

Dashboard Customization

Most styling is done through your FeedbackJar dashboard, which allows you to customize without code changes.

Available Options

Button Styling

• Button background color
• Button hover color
• Button icon/emoji
• Button position (left/right)

Panel Colors

• Background color (light mode)
• Background color (dark mode)
• Text color (light mode)
• Text color (dark mode)
• Border radius
• Border color

Input Field

• Background color
• Text color
• Border color
• Border radius
• Placeholder text

Submit Button

• Background color
• Hover color
• Text color
• Button label text

Content

• Widget title
• Widget subtitle

Theme Modes

FeedbackJar supports three theme modes:

Auto (System Preference)

Follows user’s system dark/light mode preference:

window.fj.init('YOUR_WIDGET_ID', {
  theme: 'auto'
});

Light Mode

Forces light theme:

window.fj.setTheme('light');

Dark Mode

Forces dark theme:

window.fj.setTheme('dark');

Dynamic Theme Switching

Match your website’s theme switcher:

// Listen to your theme changes
themeToggle.addEventListener('change', (e) => {
  const newTheme = e.target.checked ? 'dark' : 'light';

  // Update your site theme
  document.body.classList.toggle('dark-mode');

  // Update FeedbackJar theme
  window.fj.setTheme(newTheme);
});

React Example

import { useEffect } from 'react';
import { useTheme } from './hooks/useTheme';

function App() {
  const { theme } = useTheme(); // 'light' or 'dark'

  useEffect(() => {
    if (window.fj) {
      window.fj.setTheme(theme);
    }
  }, [theme]);

  return <div>Your app</div>;
}

Position Control

Change widget position dynamically:

// Move to left side
window.fj.setWidgetPosition('left');

// Move to right side
window.fj.setWidgetPosition('right');

Responsive Positioning

function updateWidgetPosition() {
  const isMobile = window.innerWidth < 768;
  window.fj.setWidgetPosition(isMobile ? 'right' : 'left');
}

window.addEventListener('resize', updateWidgetPosition);
updateWidgetPosition();

Shadow DOM Isolation

FeedbackJar uses Shadow DOM to prevent your CSS from affecting the widget (and vice versa). This ensures consistent appearance across all websites.

What This Means

• Your global styles won’t affect the widget
• Widget styles won’t leak into your page
• Customization must be done through dashboard or API methods

Brand Colors Example

To match your brand, set colors in the dashboard:

Example Brand Kit:

• Primary: #6366f1 (indigo)
• Background (light): #ffffff
• Background (dark): #1f2937
• Text (light): #111827
• Text (dark): #f9fafb

Apply these in your FeedbackJar dashboard under “Customization”.

CSS Custom Properties

While the widget uses Shadow DOM, you can still pass colors via initialization (if using custom CSS in your dashboard):

window.fj.init('YOUR_WIDGET_ID');

// Colors are managed in dashboard
// Runtime theme changes via API
window.fj.setTheme('dark');

Mobile Optimization

The widget automatically adapts to mobile screens:

• Panel becomes full-screen on small devices
• Button size adjusts for touch targets
• Text scales for readability

No additional configuration needed!

Accessibility

Built-in accessibility features:

• ARIA labels on all interactive elements
• Keyboard navigation support (Tab, Escape)
• Focus management
• High contrast mode support
• Screen reader friendly

Preview Your Changes

Changes made in the dashboard are reflected immediately. Visit your website to see updates in real-time.

Best Practices

Color Contrast

Ensure sufficient contrast between:

• Text and background (WCAG AA: 4.5:1 minimum)
• Button and background
• Focus indicators

Consistent Branding

Match your widget colors to your brand palette for a cohesive experience.

Test Both Themes

If using auto theme, test both light and dark modes to ensure readability in both.

Mobile Testing

Test on actual mobile devices to ensure button placement doesn’t interfere with other UI elements.