How to embed the widget on your site

3 min read

Embedding FeedbackBar takes one snippet of code and about two minutes. This article walks you through getting the snippet from your dashboard, choosing the right embed mode, and adding it to any type of site.

Step 1: Get your embed code

Sign in to your FeedbackBar dashboard.
Open your project and go to the Widgets tab.
Click the settings icon on the widget you want to embed.
In the settings panel, find the Embed Code card. It appears just below the widget status toggle.
Click the Copy button (top-right of the code block). It turns green with a checkmark when copied.

If the Copy button is greyed out, the widget is archived. Archived widgets cannot be embedded. Unarchive it from the widget card menu first.

Step 2: Choose Simple or Advanced mode

The embed code panel has two tabs. Choose before you copy. The snippet is different for each.

Simple (Recommended)

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

• One line. Your project ID is embedded in the data-project attribute.
• All settings (colours, position, text, timing) are managed from the dashboard.
• Changes apply to your live site instantly, no code update needed.
• The CDN URL is static, so browsers cache it efficiently.
• Add or remove widgets entirely from the dashboard — this snippet never changes.

Use this for 95% of cases.

Advanced

<script>
  window.FeedbackBarConfig = {
    widgetId: "your-widget-id",
    theme: { primaryColor: "#007244", borderRadius: 8 },
    position: { placement: "bottom-right", offsetX: 20, offsetY: 20 },
    text: {
      question: "Was this helpful?",
      positivePrompt: "What did you like?",
      negativePrompt: "What could we improve?",
      thankYouMessage: "Thank you!"
    },
    behavior: { showAfterSeconds: 5, hideAfterDismiss: true }
  };
</script>
<script src="https://cdn.feedbackbar.io/widget.js"></script>

• Settings are hardcoded in your HTML, so dashboard changes won't override them.
• The config block must appear before the widget script tag.
• Use this for A/B testing, page-specific overrides, or when you need settings locked in code.

The Advanced snippet in your dashboard is pre-populated with your current widget settings. It's not a generic template.

Step 3: Paste it into your site

Add the snippet just before the closing </body> tag on every page where you want the widget to appear. The widget loads asynchronously and will never block your page from rendering.

Multiple widgets? If you have separate widgets for different sections (e.g. one for your whole site and one for your blog), no changes needed — the data-project snippet above handles it automatically. FeedbackBar shows the most specific match for the current page.

Prefer explicit control? List widget IDs directly:

<script src="https://cdn.feedbackbar.io/widget.js" data-widget="wgt_homepage, wgt_blog"></script>

See Page Targeting for details.

Plain HTML

  <!-- your page content -->
  <script src="https://cdn.feedbackbar.io/widget.js" data-project="your-project-id"></script>
</body>
</html>

WordPress

Go to Appearance → Theme File Editor → footer.php (or use a plugin like Insert Headers and Footers) and paste the snippet before </body>.

Alternatively, paste it in Appearance → Customize → Additional CSS, but note that CSS injection won't work for scripts. Use the footer.php method or a dedicated plugin.

React / Next.js

Add the script to your root layout or _document.tsx:

// app/layout.tsx (Next.js App Router)
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://cdn.feedbackbar.io/widget.js"
          data-project="your-project-id"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

Use strategy="lazyOnload" to ensure the widget doesn't affect your Core Web Vitals score.

Shopify

Go to Online Store → Themes → Edit code → Layout → theme.liquid and paste the snippet just before </body>.

Google Tag Manager

Create a new tag: Custom HTML. Paste the snippet. Set the trigger to All Pages (or a specific page trigger). Publish the container.

GTM fires scripts after the page loads, which is fine for FeedbackBar. The widget is designed to initialise late without any issues.

Step 4: Verify it's working

Open your site in a browser.
Wait for the delay you configured (default: 5 seconds after page load).
The widget bar should appear in the corner you selected.
Click it, submit a test response, and check your Feedback tab in the dashboard. It should appear within 30 seconds.

If the widget doesn't appear, see Widget not appearing on my site.

Handing off to a developer

If you're not the one adding the code, share this page with your developer along with the snippet from your dashboard. The only thing they need to know:

Paste the snippet before </body> on every page.
Don't modify the data-project value. It's your unique project ID.
No npm package, no build step, no configuration required for Simple mode.

Embed strategies

FeedbackBar supports three embed approaches. They all work, and you can mix them across pages.

Strategy	Best for	Snippet
Project-level	Most users. Embed once, manage everything from the dashboard. Never update code when you add widgets.	`data-project="proj_abc"`
Per-widget (comma-separated)	SPAs or static sites where you want explicit control over which widgets are active.	`data-widget="wgt_a, wgt_b"`
Single widget	CMS templates (WordPress, Shopify) where each template has its own widget.	`data-widget="wgt_abc"`

Page-level overrides with FeedbackBarConfig

You can combine any embed strategy with window.FeedbackBarConfig to override settings on specific pages. The config block must appear before the widget script tag.

Override a specific widget

Set widgetId to target overrides at one widget only. Other widgets on the page are unaffected.

<script>
  window.FeedbackBarConfig = {
    widgetId: "wgt_pricing",
    text: {
      question: "Finding what you need?",
      negativePrompt: "What's unclear about our pricing?"
    }
  };
</script>
<script src="https://cdn.feedbackbar.io/widget.js" data-project="your-project-id"></script>

Override whichever widget shows

Omit widgetId to apply overrides to whatever widget the server resolves for the current page.

<script>
  window.FeedbackBarConfig = {
    text: { question: "Quick question before you go:" },
    behavior: { showAfterSeconds: 30 }
  };
</script>
<script src="https://cdn.feedbackbar.io/widget.js" data-project="your-project-id"></script>

How it works: The widget loads its config from the server first, then merges your FeedbackBarConfig overrides on top. Only the properties you specify are changed — everything else uses your dashboard settings.

Getting Started Customise widget appearance