How to Create an Affiliate Program with Webflow | AffiliateBase

<script>(function(w,r){w._abq=w._abq||[];w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)}})(window,'affiliatebase');</script>
<script async src="https://cdn.jsdelivr.net/npm/affiliatebase-tracking@1/src/index.js" data-org-id='YOUR_ORG_ID'></script>

// Open browser console and check for:
console.log(window.AffiliateBase); // Should show the tracking object
console.log(window.affiliatebase_referral); // Empty string or referral ID

<!-- Add to your site alongside the tracking script -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
      const referralId = window.affiliatebase_referral || '';
      if (!referralId) return;

      // Update Stripe Payment Links
      document.querySelectorAll('a[href^="https://buy.stripe.com/"]').forEach(link => {
        const url = new URL(link.href);
        if (!url.searchParams.has('client_reference_id')) {
          url.searchParams.set('client_reference_id', referralId);
          link.href = url.toString();
        }
      });

      // Update Stripe Pricing Tables
      document.querySelectorAll('stripe-pricing-table').forEach(table => {
        table.setAttribute('client-reference-id', referralId);
      });

      // Update Stripe Buy Buttons
      document.querySelectorAll('stripe-buy-button').forEach(button => {
        button.setAttribute('client-reference-id', referralId);
      });
    }, 1500);
  });
</script>

<!-- Add data-affiliatebase="true" to your Webflow form wrapper -->
<!-- In Webflow Designer: select the Form Block, go to Settings, add Custom Attribute -->
<!-- Name: data-affiliatebase, Value: true -->

<!-- The referral ID will be automatically injected as a hidden field -->

// Visit your site with a test affiliate link:
// https://yoursite.webflow.io?via=test123

// Check the console:
console.log(window.affiliatebase_referral); // Should show "test123"