Install on Webflow

Webflow has two billing patterns Rekomi attributes against: Webflow's native Ecommerce checkout (rare for SaaS, common for DTC) and external Stripe Payment Links (the common SaaS pattern). Both share the same head install; the conversion-side step diverges.

Install the head script

In the Webflow Designer: gear icon (top-left) > Site settings > Custom code > Head code.

Paste:

<script>
  (function(){
    var s=document.createElement('script');
    s.src='https://js.rekomi.com/v1/rekomi.js';
    s.async=true;
    s.dataset.programId='YOUR_PROGRAM_ID';
    document.head.appendChild(s);
  })();
</script>

Click Save changes, then Publish the site to push the change to all pages. Your program ID is in Rekomi at Settings > Tracking.

Path A: Webflow Ecommerce (native checkout)

If you sell via Webflow's built-in Ecommerce module:

Step 1. In the Pages panel, open Ecommerce pages > Order Confirmation.

Step 2. Drag an Embed element into the page body.

Step 3. Paste the convert snippet:

<script>
  (function(){
    // Webflow Ecommerce does not expose order data as Liquid-style tokens.
    // Pull from the rendered DOM. The order id sits on a data attribute;
    // the email is in the order summary text.
    var orderId = document.querySelector('[data-wf-order-id]')?.getAttribute('data-wf-order-id') || '';
    var emailEl = document.querySelector('[data-wf-order-email]');
    var email = emailEl ? emailEl.textContent.trim() : '';
    // Amount comes from your order summary; replace 9900 with your read logic
    // OR fall back to firing convert from a Webflow Ecommerce webhook (cleaner).
    window.Rekomi && window.Rekomi.convert({
      external_event_id: orderId,
      amount_cents: 9900,
      currency: 'USD',
      customer_email: email,
    });
  })();
</script>

Webflow Ecommerce does NOT expose order data as Liquid tokens (unlike Shopify). You parse from the rendered DOM, or — more reliably — fire convert server-side from a Webflow Ecommerce webhook (Settings > Ecommerce > Webhooks > order_created) and forward to Rekomi's /api/tracking/s2s.

Path B: External Stripe Payment Links

If your Webflow site is purely marketing and your checkout is buy.stripe.com/... URLs (the common SaaS shape):

Step 1. In Site settings > Custom code > Head code, paste the MutationObserver snippet AS A SECOND BLOCK after the install snippet:

<script>
  (function(){
    function stamp(node){
      var links = node.querySelectorAll('a[href*="buy.stripe.com"]');
      var ref = window.Rekomi && window.Rekomi.getReferral();
      if (!ref) return;
      links.forEach(function(a){
        try {
          var u = new URL(a.href);
          if (!u.searchParams.get('client_reference_id')) {
            u.searchParams.set('client_reference_id', ref);
            a.href = u.toString();
          }
        } catch (e) {}
      });
    }
    document.addEventListener('DOMContentLoaded', function(){ stamp(document); });
    new MutationObserver(function(muts){
      muts.forEach(function(m){ m.addedNodes.forEach(function(n){
        if (n.nodeType === 1) stamp(n);
      }); });
    }).observe(document.body, { childList: true, subtree: true });
  })();
</script>

Step 2. Republish the site. The observer auto-appends ?client_reference_id=<affiliate> to every buy.stripe.com link in your Webflow site, including links rendered inside Webflow Interactions or modals.

When the buyer completes the Stripe checkout, Stripe fires its webhook to Rekomi and the conversion attributes.

Webflow Membership pages

The head script in Site settings loads globally, including on Webflow Membership-gated pages. No extra step needed for member-only content.

Quirks worth knowing

No Liquid templating in Webflow Ecommerce. Webflow does not expose order data as template tokens the way Shopify does. The DOM-parse approach (Path A) is brittle; the Ecommerce webhook approach is more reliable for production. If you sell more than a handful of orders per month via Webflow Ecommerce, plan to migrate to the webhook path.

Publish is explicit. Saving Site settings does NOT push to production. You have to click Publish after every change to Custom code.

Webflow CMS vs Ecommerce. CMS pages (blog, dynamic content) inherit the global head install automatically. Ecommerce-specific pages (Order Confirmation, Cart) also inherit it; you only need to add the conversion-fire Embed to the Order Confirmation page.

Custom Code character limits. Webflow's Site settings > Custom code has a character limit (around 10K). If you're installing multiple analytics scripts plus Rekomi, you might bump against it. Use a single combined <script> block.

Refunds

Webflow Ecommerce: subscribe to the order_refunded webhook in Settings > Ecommerce > Webhooks, forward to Rekomi's /api/tracking/refund. Stripe Payment Links: the Stripe webhook handles it automatically.

Troubleshooting

MutationObserver does not stamp Payment Links. The MutationObserver runs after DOMContentLoaded. If your Webflow Interactions render Payment Links DYNAMICALLY (modal opens > link appears), the observer should still catch them. Open DevTools and watch document.querySelector('a[href*="buy.stripe.com"]').href after clicking your CTA; the URL should include client_reference_id.

Order Confirmation page Embed not firing. Webflow Embeds need <script> tags wrapped exactly as above. Confirm the Embed element is set to "After page renders" execution mode if Webflow exposes that toggle.

Cookie missing on Webflow Membership pages. The head install loads globally; the cookie should be present. If a member's cookie is missing, they probably joined the member portal via a path that bypassed your public Webflow pages (a direct deep link to a member-only URL).

Related

• JavaScript pixel reference
• Install on Stripe — for the MutationObserver pattern in depth
• S2S tracking API reference