Skip to main content

Install on Webflow

Webflow exposes two Custom Code surfaces: site-wide (Project Settings → Custom Code) and per-page (page settings). The widget belongs in site-wide head/body code so it runs on every page.

Plan requirement

Custom Code requires any paid Webflow plan (Site or Workspace). Free Webflow projects can't publish Custom Code to the live *.webflow.io URL — upgrade or connect a custom domain on a paid plan.

  1. In Webflow Designer, click the project name (top-left) → Project Settings.

  2. Open the Custom Code tab.

  3. Find Footer Code (the box at the bottom — code that runs before the closing </body> tag).

  4. Paste the snippet you copied from the Pay4Feedback dashboard's Deploy the widget → Direct HTML embed step:

    <!-- Pay4Feedback Widget -->
    <script src="https://app.pay4feedback.com/feedback-agent.iife.js"
            crossorigin="anonymous" async></script>
    <script>
      window.addEventListener('DOMContentLoaded', function () {
        window.FeedbackAgent.init({
          tenantId:   'YOUR_TENANT_ID',
          apiKey:     'p4f_live_...',
          baseUrl:    'https://app.pay4feedback.com',
          campaignId: 'YOUR_CAMPAIGN_ID',
          trigger:    { type: 'time', value: 10 }
        });
      });
    </script>

  5. Click Save Changes.

  6. Click Publish in the top-right corner — Custom Code only ships to the live site after a publish, not on save.

Per-page install​

If you only want the widget on a single page:

  1. Hover over the page in the Pages panel, click the gear icon → Page Settings.
  2. Scroll to Custom Code → Before </body> tag.
  3. Paste the same snippet.
  4. Save and publish.

Webflow E-commerce: post-purchase trigger​

Webflow's checkout sends customers to a confirmation page at /order-confirmation. Use a path-aware version of the snippet to trigger the widget there:

<!-- Site-wide widget loader, manual trigger -->
<script src="https://app.pay4feedback.com/feedback-agent.iife.js"
        crossorigin="anonymous" async></script>
<script>
  window.addEventListener('DOMContentLoaded', function () {
    window.FeedbackAgent.init({
      tenantId:   'YOUR_TENANT_ID',
      apiKey:     'p4f_live_...',
      baseUrl:    'https://app.pay4feedback.com',
      campaignId: 'YOUR_CAMPAIGN_ID',
      trigger:    { type: 'manual' }
    });

    if (location.pathname === '/order-confirmation') {
      var t = setInterval(function () {
        if (window.FeedbackAgent) {
          clearInterval(t);
          window.FeedbackAgent.show();
        }
      }, 250);
    }
  });
</script>

Troubleshooting​

Widget appears in the Designer but not on the live site​

This is the #1 Webflow gotcha: the Designer preview is not the live site. Custom Code from Project Settings only renders on the published webflow.io (or custom-domain) URL. Open your live URL in an incognito window to verify.

"I clicked Save but it's still not live"​

Webflow requires an explicit Publish after editing Custom Code. Save persists the change to the project; Publish ships it to the CDN.

Snippet works on the staging URL but not the production URL​

Each Webflow project has both a staging (yourproject.webflow.io) and a production (your custom domain) URL. Custom Code is shared between them, but if you've forgotten to point your custom domain at Webflow, you're seeing two separate sites. Check Project Settings → Hosting for domain status.

CSP or content-blocker errors​

Some Webflow templates set a strict Content Security Policy via meta tags. If your site does, allowlist app.pay4feedback.com in script-src and connect-src.