Configuration Options

Customize the FeedbackJar widget through your dashboard and initialization options.

Initialization Options

Options passed to fj.init(widgetId, options):

{
  position: 'right',
  theme: 'auto',
  trigger: 'default'
}

See Initialization for details.

Dashboard Customization

Configure these options in your FeedbackJar dashboard (applied automatically when widget loads):

Widget Settings

All customization options are available in the dashboard under Widgets > Widget Settings.

See the complete Widget Settings guide for detailed configuration options including:

  • Basic settings (powered by branding)
  • Appearance (position, colors, title, subtitle)
  • Trigger button (style, text, shape)
  • Page targeting (exclude pages with wildcards)

Quick Reference

Button Color - Background color for feedback button Button Hover Color - Background color on hover Panel Background - Panel background color Border Radius - Corner rounding Widget Title - Heading text in panel Widget Subtitle - Subheading text

Runtime Configuration

Change settings programmatically after initialization:

Position

window.fj.setWidgetPosition('left'); // or 'right'

Theme

window.fj.setTheme('dark'); // 'auto', 'light', or 'dark'

Enable/Disable

window.fj.setWidgetEnabled(false); // or true

Example: Complete Setup

// Initialize with options
window.fj.init('wgt_abc123xyz', {
  position: 'right',
  theme: 'auto',
  trigger: 'default'
});

// Identify user
window.fj.identify({
  id: 'user_123',
  email: 'john@example.com',
  firstName: 'John',
  lastName: 'Doe'
});

// Later: change theme based on user preference
const userTheme = localStorage.getItem('theme');
window.fj.setTheme(userTheme);

Best Practices

Match Your Brand

Use dashboard customization to match your website’s color scheme and branding.

Responsive Design

The widget automatically adapts to mobile screens, but test different positions to find what works best for your layout.

Performance

The widget is designed to load asynchronously without blocking page load. Default settings are optimized for performance.

Accessibility

  • Widget button has proper ARIA labels
  • Panel can be closed with Escape key
  • Focus management for keyboard navigation

Preview Changes

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