Overview

FeedbackBar adds a small thumbs-up/down bar to your site. When a visitor clicks, a short survey modal appears, captures their sentiment and optional comments, and sends everything to your dashboard in real time. The widget is under 15 KB gzipped, loads asynchronously, and never blocks your page.

• Collects positive/negative sentiment with optional star rating and email
• Tracks which page the feedback came from automatically
• All responses appear instantly in your FeedbackBar dashboard
• Works on any site — static HTML, React, WordPress, Shopify, etc.

Quick Start — 3 steps, 2 minutes

Create a free account

Create a project & widget

Name your project, customise colours and text in the dashboard, and copy the embed snippet.

Paste the script tag

Add one line before your closing </body> tag — done.

<script src="https://cdn.feedbackbar.io/widget.js" data-widget="your-widget-id"></script>

What you'll need:A FeedbackBar account (free) and the ability to add a script tag to your site's HTML.

Integration Methods

Perfect for most use cases. All settings are managed through the FeedbackBar dashboard with instant updates.

<script src="https://cdn.feedbackbar.io/widget.js" data-widget="your-widget-id"></script>

Benefits:

Zero configuration required
Dashboard-managed settings
Instant updates without code changes
Optimal CDN caching
Automatic updates and bug fixes

Configuration Options

Theme Customization

theme: {
  primaryColor: "#007244",
  textColor: "#FFFFFF",
  borderRadius: 8,
  fontSize: "medium"
}

Positioning

position: {
  placement: "bottom-right",
  offsetX: 20,
  offsetY: 20
}

Custom Text

text: {
  question: "Was this helpful?",
  positivePrompt: "What did you like?",
  negativePrompt: "What could we improve?",
  thankYouMessage: "Thank you!"
}

Behavior Settings

behavior: {
  showAfterSeconds: 5,
  hideAfterDismiss: true,
  showOnMobile: true,
  collectRating: true,
  collectEmail: true,
  pattern: "/products/*"
}

Control display timing, data collection, and page targeting

Page Targeting

URL Pattern Matching

Control which pages display your widget using URL patterns. Perfect for targeting specific sections of your site.

behavior: {
  pattern: "/products/*"  // Show only on product pages
}

Pattern Examples:

"/products/*"All product pages

"/blog/*/comments"Blog comment sections

"/checkout"Exact checkout page

"*/help"Any help page

How it works:

• Uses * as wildcard for any characters
• Matches against window.location.pathname
• No pattern = show on all pages
• Case-sensitive matching
• Secure regex escaping prevents injection

Use Cases

• E-commerce: Target product pages, checkout flow, or category pages
• SaaS: Show on specific feature pages or after onboarding steps
• Content sites: Target article pages, tutorials, or documentation
• Support: Display on help pages or after support interactions

Data Collection Options

Configurable Feedback Fields

Control what information you collect from users to balance data richness with form simplicity.

Star Rating (collectRating)

When enabled, users who provide negative feedback will be asked to rate their experience on a 1-5 star scale.

collectRating: true(default)

Email Collection (collectEmail)

When enabled, users can optionally provide their email address for follow-up communication.

collectEmail: true(default)

Pro Tip

For high-traffic pages or mobile users, consider disabling email collection to reduce friction and increase completion rates. You can configure these settings per widget in your dashboard under "Customize Experience" → "When & Where to Show".

Advanced Examples

A/B Testing

<script>
  const variant = Math.random() > 0.5 ? 'emerald' : 'teal';

  window.FeedbackBarConfig = {
    widgetId: "wgt_abc123",
    theme: {
      primaryColor: variant === 'emerald' ? '#007244' : '#10B981'
    }
  };
</script>
<script src="https://cdn.feedbackbar.io/widget.js"></script>

Page-Specific Customization

<script>
  const isCheckoutPage = window.location.pathname.includes('/checkout');

  window.FeedbackBarConfig = {
    widgetId: "wgt_abc123",
    position: {
      placement: isCheckoutPage ? "top-right" : "bottom-right"
    },
    behavior: {
      showAfterSeconds: isCheckoutPage ? 10 : 5,
      pattern: "/checkout/*"  // Only show on checkout pages
    }
  };
</script>

Best Practices

Performance

• Place scripts before closing </body> tag
• Simple mode provides optimal caching
• Widget loads asynchronously

User Experience

• Use showAfterSeconds to avoid interruption
• Set hideAfterDismiss: true
• Choose complementary colors
• Test on mobile devices

Development

• Start with Simple Mode
• Use Dashboard for initial config
• Switch to Advanced when needed
• Test thoroughly

Troubleshooting

Configuration Not Applied

• Simple Mode: Changes apply instantly from dashboard
• Advanced Mode: Verify FeedbackBarConfig is set before widget script
• Clear browser cache if using CDN

Ready to collect feedback?

Create your free account, set up a widget, and start hearing from your users in under 2 minutes.

Start Free — No Credit Card

Getting Started