Skip to main content

Install the Widget

The widget is a single, cross-origin JavaScript file hosted on our CDN. You can install it four ways, depending on how much control you need.

Option 1 — Google Tag Manager (recommended)​

Best for most teams. No engineering. No deploy.

  1. Open your container at tagmanager.google.com (or install the Google Tag Manager for WordPress plugin first if you don't have a container yet).

  2. Tags → New → Custom HTML.

  3. Paste:

    <script src="https://cdn.pay4feedback.com/widget.js"
            data-campaign="YOUR_CAMPAIGN_ID"
            crossorigin="anonymous"
            async></script>

  4. Trigger: All Pages (or a narrower pageview trigger if you only want it on specific routes).

  5. Click Save.

  6. Click the big blue Submit button in the top right to publish the GTM container. Saving is not enough — GTM only pushes to production on Submit.

New to GTM? Google's own guide walks through creating a container and adding it to your site: Google Tag Manager Help → Quick start guide.

Find YOUR_CAMPAIGN_ID in the dashboard next to the campaign name.

warning

GTM Custom HTML tags sometimes get blocked by content security policies (CSP). If you have script-src configured, add cdn.pay4feedback.com to its allowlist.

Option 2 — WordPress plugin​

Best for WordPress sites that don't already have GTM.

  1. Download pay4feedback-latest.zip.
  2. In your WordPress admin: Plugins → Add New → Upload Plugin → pick the ZIP → Install Now → Activate.
  3. Go to Settings → Pay4Feedback.
  4. Paste the four config values from the dashboard's Deploy the widget → WordPress plugin step:
    • Tenant ID (UUID)
    • Widget API key (p4f_live_…) — copy it from the dashboard the moment it's revealed; we only show it once
    • Campaign ID (UUID)
    • Base URL — leave the default unless you self-host
  5. Pick a Trigger (e.g. "After 10 seconds on page"), tick Enable widget, click Save Changes.

That's the minimum. The plugin also gives you a few things the raw script tag can't:

  • [pay4feedback] shortcode — drop the widget inline anywhere in a post or page. Accepts a per-instance override: [pay4feedback campaign="7c1a...-..."].
  • Auto-identify logged-in users — tick "Auto-identify" and the plugin passes the WordPress user ID to Pay4Feedback.identify() automatically, so responses correlate with your user base. Email is a separate opt-in (GDPR).
  • WooCommerce trigger — tick "Trigger on order complete" and the widget opens automatically on the thank-you page for every paid order. Perfect for post-purchase feedback.
  • Consent-plugin integration — Complianz, CookieYes, and Real Cookie Banner are detected automatically. When "Respect consent plugin" is on (default), the widget only loads after the visitor grants marketing consent.
note

The plugin is GPL-2.0+. Source lives at wordpress-plugin/pay4feedback/ in the main repository. We plan to submit it to the wordpress.org plugin directory so you can install it without downloading a ZIP — no ETA yet.

Option 3 — Direct <script> tag​

Best for teams who don't use GTM, or who want to load the widget only on specific pages.

Add this right before </body>:

<script src="https://cdn.pay4feedback.com/widget.js"
        data-campaign="YOUR_CAMPAIGN_ID"
        crossorigin="anonymous"
        async></script>

The async attribute means the script won't block page load.

Option 4 — JavaScript API​

Best for teams who want to trigger the widget imperatively — e.g. only after a user completes a specific action.

<script src="https://cdn.pay4feedback.com/widget.js"
        data-campaign="YOUR_CAMPAIGN_ID"
        data-autostart="false"
        crossorigin="anonymous"
        async></script>

<script>
  document.getElementById('exit-button').addEventListener('click', () => {
    window.Pay4Feedback.show();
  });
</script>

The API:

window.Pay4Feedback.show();          // open the widget
window.Pay4Feedback.hide();          // close it
window.Pay4Feedback.identify({       // attach user context (optional)
  userId: 'abc-123',
  email: 'user@example.com',         // only if you have consent
  plan: 'pro',
});
window.Pay4Feedback.on('submit', (response) => {
  // your analytics: widget_submitted
});

CSP / Security headers​

If you run a strict Content Security Policy, whitelist:

script-src  'self' https://cdn.pay4feedback.com;
connect-src 'self' https://app.pay4feedback.com;
style-src   'self' 'unsafe-inline';           # widget uses Shadow DOM styles
frame-src   https://app.pay4feedback.com;     # only if using manual-review iframes

The widget runs inside Shadow DOM so your site's CSS never clashes with ours.

Framework-specific notes​

WordPress​

Use Option 2 — WordPress plugin above. Don't hard-code <script> tags into theme files — they get stripped on theme updates.

Wix, Squarespace, Webflow​

These platforms don't take plugins or GTM directly — but each has a Custom Code / Code Injection panel that accepts the same script tag. Step-by-step guides:

React / Next.js​

For Next.js, use the next/script component with strategy="afterInteractive":

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://cdn.pay4feedback.com/widget.js"
        data-campaign="YOUR_CAMPAIGN_ID"
        crossOrigin="anonymous"
        strategy="afterInteractive"
      />
    </>
  );
}

Vue / Nuxt​

Add to nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://cdn.pay4feedback.com/widget.js',
          'data-campaign': 'YOUR_CAMPAIGN_ID',
          crossorigin: 'anonymous',
          async: true,
        },
      ],
    },
  },
});

Shopify​

Theme editor → Edit code → theme.liquid → paste the <script> tag above the closing </body>. Save.

Verify it's working​

  1. Open your site in an incognito window.
  2. The widget should appear per its trigger rules (e.g. after 10 seconds).
  3. Submit a test response.
  4. In the Pay4Feedback dashboard → Feedback, the response should appear within 5–10 seconds.

If nothing happens, check Troubleshooting.

Uninstall​

Just remove the <script> tag (or the GTM tag). No cleanup required — the widget stores nothing on your domain outside a single cookie (180 days) that records whether the user has already seen the consent prompt.