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-widget="your-widget-id"></script>

• One line. Your widget ID is embedded in the data-widget 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.
• If your project has multiple active widgets, the snippet automatically uses an array of IDs — FeedbackBar shows the best match per page.

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 — 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 — it 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), you can include all IDs in a single script tag:

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

FeedbackBar automatically shows only the most specific match for the current page — see Page Targeting for details.

Plain HTML

  <!-- your page content -->
  <script src="https://cdn.feedbackbar.io/widget.js" data-widget="your-widget-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-widget="your-widget-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-widget value — it's your unique widget ID.
No npm package, no build step, no configuration required for Simple mode.

← Getting Started Customise widget appearance →