Framer creates Single Page Applications (SPAs) that require special handling for affiliate tracking. This guide shows you how to integrate Affonso with your Framer site to automatically track affiliate referrals through payment links.

Prerequisites

Active Affonso affiliate program
Payment links from your payment provider
Access to your Framer project's custom code settings

Step 1: Add Main Tracking Script

In Framer → Site Settings → General → Custom Code

Add this in the End of <head> tag section:

<script
  async
  defer
  src="https://affonso.io/js/pixel.min.js"
  data-affonso="YOUR_PUBLIC_PROGRAM_ID"
  data-cookie_duration="YOUR_COOKIE_DURATION"
></script>

Find your Program ID →

Step 2: Add Payment Link Enhancement

Choose your payment provider below to get the Framer-specific enhancement script:

Stripe Payment Links - Framer Script

Add this to End of <body> tag in your Framer custom code:

<script>
  function enhanceStripeLinks() {
    if (window.affonso_referral) {
      document.querySelectorAll('a[href*="buy.stripe.com"]').forEach((link) => {
        if (link.href.includes('client_reference_id=')) return;
        const separator = link.href.includes('?') ? '&' : '?';
        link.href =
          link.href +
          separator +
          'client_reference_id=' +
          window.affonso_referral;
      });
    }
  }

  setTimeout(enhanceStripeLinks, 800);
  setTimeout(enhanceStripeLinks, 1500);
  setTimeout(enhanceStripeLinks, 2500);
  window.addEventListener('affonso_referral_ready', enhanceStripeLinks);

  new MutationObserver(enhanceStripeLinks).observe(document.body, {
    childList: true,
    subtree: true,
  });
</script>

Stripe Pricing Tables - Framer Script

If you're using Stripe Pricing Tables, add this additional script:

<script>
  function enhanceStripePricingTables() {
    if (window.affonso_referral) {
      document.querySelectorAll('stripe-pricing-table').forEach((table) => {
        table.setAttribute('client-reference-id', window.affonso_referral);
      });
    }
  }

  setTimeout(enhanceStripePricingTables, 800);
  setTimeout(enhanceStripePricingTables, 1500);
  setTimeout(enhanceStripePricingTables, 2500);
  window.addEventListener('affonso_referral_ready', enhanceStripePricingTables);

  new MutationObserver(enhanceStripePricingTables).observe(document.body, {
    childList: true,
    subtree: true,
  });
</script>

Stripe Buy Button - Framer Script

If you're using Stripe Buy Buttons, add this additional script:

<script>
  function enhanceStripeBuyButtons() {
    if (window.affonso_referral) {
      document.querySelectorAll('stripe-buy-button').forEach((button) => {
        button.setAttribute('client-reference-id', window.affonso_referral);
      });
    }
  }

  setTimeout(enhanceStripeBuyButtons, 800);
  setTimeout(enhanceStripeBuyButtons, 1500);
  setTimeout(enhanceStripeBuyButtons, 2500);
  window.addEventListener('affonso_referral_ready', enhanceStripeBuyButtons);

  new MutationObserver(enhanceStripeBuyButtons).observe(document.body, {
    childList: true,
    subtree: true,
  });
</script>

Step 3: Publish Your Site

Click Publish in Framer - your payment links will now automatically include affiliate tracking!

Why Framer Needs Special Handling

Framer creates SPAs where:

Scripts load once when site first loads
Page navigation doesn't reload scripts
Our enhancement includes MutationObserver for instant SPA support

Testing

Create a test affiliate link in your Affonso dashboard
Visit your Framer site using that affiliate link
Navigate to a page with payment links
Right-click a payment link → Copy link address
Check that the link includes tracking:
- Stripe: client_reference_id=...
- Polar: reference_id=...
- Creem: metadata[affonso_referral]=...
- Dodo: metadata_affonso_referral=...