Widget Settings

Customize your FeedbackJar widget from the dashboard under Widgets > Widget Settings. All changes are applied automatically when your widget loads.

Basic Settings

Show Powered By Branding

Display “Powered by Feedbackjar” link at the bottom of the feedback panel.

  • Default: Enabled
  • Location: Bottom of feedback panel
  • Appearance: Small text link with hover effect
Toggle: [✓] Show "Powered by" branding

Recommendation:

  • Keep enabled to support FeedbackJar development
  • Disable for white-label or enterprise needs

Appearance

Widget Position

Where the feedback button appears on your site.

Options:

  • Right (default) - Bottom right corner
  • Left - Bottom left corner
  • Bottom Right - Lower right area
  • Bottom Left - Lower left area

Best Practices:

  • Right position: Most common, doesn’t interfere with left navigation
  • Left position: Good for right-heavy layouts
  • Test on mobile to ensure button doesn’t cover important content

Can be overridden via code:

window.fj.setWidgetPosition('left');

Widget Title

Main heading displayed in the feedback panel.

  • Default: “Send Feedback”
  • Format: Plain text
  • Max length: ~50 characters recommended

Examples:

  • “Share Your Feedback”
  • “Send us feedback”
  • “Help Us Improve”
  • “What’s on your mind?”

Tip: Be welcoming and concise. This is the first thing users see.

Widget Subtitle

Subheading text below the title.

  • Default: “We’d love to hear from you!”
  • Format: Plain text
  • Max length: ~80 characters recommended

Examples:

  • “Your feedback helps us improve”
  • “Tell us what you think”
  • “Share your thoughts in 30 seconds”
  • “We read every message”

Tip: Set expectations or encourage specific feedback types.

Primary Color

Main accent color used throughout the widget.

  • Default: #3b82f6 (blue)
  • Format: Hex color code
  • Used for: Submit button, accents, highlights

Example:

Primary Color: #10b981 (green)

Best Practices:

  • Use your brand’s primary color
  • Ensure good contrast with background
  • Test in both light and dark modes

Background Color

Feedback panel background color.

  • Default: #ffffff (white)
  • Format: Hex color code
  • Adapts to: Theme setting (light/dark)

Example:

Background Color: #ffffff (white light mode)
Background Color: #1f2937 (dark mode alternative)

Tip: Match your site’s color scheme for consistency.

Trigger Button

Trigger Style

How the feedback button appears on your site.

Options:

  1. Icon + Text (default) - Icon with text label

    • Most discoverable
    • Recommended for first-time users
    • Example: 💬 Feedback

  2. Icon Only - Just the feedback icon

    • Minimal design
    • Good for experienced users
    • Takes less space

  3. Text Only - Just custom text

    • Clear call-to-action
    • Good for specific prompts
    • Example: Send Feedback

Recommendation: Icon + Text for best discoverability

Trigger Text

Custom text for the trigger button (when using Text Only or Icon + Text styles).

  • Default: “Feedback”
  • Format: Plain text or emoji
  • Max length: ~15 characters recommended

Examples:

  • “Feedback”
  • “Send Feedback”
  • “Help”
  • “Contact Us”
  • ”💡 Ideas”
  • ”💬 Feedback”
  • ”🐛 Report Bug”

Best Practices:

  • Keep it short (1-2 words)
  • Use clear language
  • Emojis work well and add personality
  • Match your brand voice

Button Shape

Shape of the trigger button.

Options:

  • Rounded (default) - Rounded corners
  • Square - Sharp corners
  • Circle - Fully circular (works best with Icon Only style)

Best Practices:

  • Match your site’s design language
  • Rounded is most common and friendly
  • Circle works well for icon-only buttons
  • Square for minimalist designs

Page Targeting

Exclude Pages

Hide the widget on specific pages using wildcard patterns.

Format: URL pathname patterns with wildcards (*)

Examples:

/admin/*          - Hide on all admin pages
*/settings        - Hide on any page ending with /settings
*checkout*        - Hide on any page containing "checkout"
/login            - Hide only on /login (exact match)

See: Page Targeting for detailed guide including:

  • Pattern syntax
  • Wildcard matching
  • SPA support
  • Common use cases
  • Debugging tips

Common patterns:

/admin/*
/checkout/*
/payment/*
*/settings
/login
/signup

Test thoroughly:

  • Navigate your site after adding excludes
  • Check SPA route changes work correctly
  • Verify widget appears on intended pages

Complete Example

Here’s a fully configured widget:

Basic Settings:

☑ Show "Powered by" branding

Appearance:

Position:          Right
Widget Title:      "Share Your Feedback"
Widget Subtitle:   "Help us improve your experience"
Primary Color:     #10b981 (green)
Background Color:  #ffffff (white)

Trigger Button:

Trigger Style:     Icon + Text
Trigger Text:      "💡 Feedback"
Button Shape:      Rounded

Page Targeting:

Exclude Pages:
  - /admin/*
  - */settings
  - /checkout/*

Result: A green-themed widget with ”💡 Feedback” button on the right, hidden on admin/settings/checkout pages, with powered by link.

Best Practices

Branding

Match Your Brand:

  • Use your brand’s primary color
  • Customize button text to match your voice
  • Choose title/subtitle that reflects your brand personality

Consistency:

  • Keep colors consistent with your site
  • Match border radius to your design system
  • Use familiar language and tone

User Experience

Button Placement:

  • Test both left and right positions
  • Ensure button doesn’t cover content on mobile
  • Consider your site’s layout and navigation

Button Style:

  • Icon + Text for new users (most discoverable)
  • Icon Only for minimal design
  • Text Only for clear call-to-action

Content:

  • Keep title concise and welcoming
  • Use subtitle to set expectations
  • Test different copy to see what resonates

Page Targeting:

  • Hide on admin/internal pages
  • Hide during checkout/payment flows
  • Hide on authentication pages (login/signup)
  • Use wildcards for flexible matching

Testing

After making changes:

  1. Save changes in dashboard
  2. Visit your website (hard refresh: Cmd+Shift+R or Ctrl+Shift+R)
  3. Test trigger button:
    • Verify style, text, and shape
    • Check positioning (desktop and mobile)
    • Test hover effects
  4. Open feedback panel:
    • Check title and subtitle
    • Verify colors and styling
    • Test submit button
  5. Test exclude pages:
    • Navigate to excluded pages
    • Confirm widget is hidden
    • Verify widget appears on other pages
  6. Test SPA navigation:
    • Navigate using client-side routing
    • Verify widget shows/hides correctly
  7. Check mobile view:
    • Test responsive behavior
    • Ensure button is accessible
    • Check panel fits screen

Common Issues

Changes not appearing?

  • Hard refresh (Cmd+Shift+R or Ctrl+Shift+R)
  • Clear browser cache
  • Check browser console for errors

Wildcard patterns not working?

  • Verify pattern syntax (/admin/* not /admin*)
  • Check current pathname: console.log(window.location.pathname)
  • Test pattern: See Page Targeting debugging

Widget conflicts with site?

  • Widget uses Shadow DOM to prevent style conflicts
  • Check z-index if button is hidden
  • Verify no JavaScript errors in console

Preview Changes

Changes made in the dashboard are applied immediately:

  1. Open your website in a separate tab
  2. Keep dashboard open in another tab
  3. Make changes in Widget Settings
  4. Click Save Changes
  5. Refresh your website to see updates

Tip: Keep dashboard and website side-by-side for quick iteration and testing.