How to Create an Affiliate Program with Webflow

4 min read

This guide is for Webflow site owners running a program for their own offers. If you are looking to join Webflow’s company affiliate program, use Webflow’s partner information instead.

Webflow supports custom scripts on eligible site or workspace plans, and scripts run after preview or publication. See Webflow’s official custom code guide. You still need a checkout that receives AffiliateBase’s generated referral ID.

The simplest path is a Stripe Payment Link, Buy Button, or Pricing Table on the same published page as the script. A Webflow form submission is a lead signal, not proof of a paid commission. Complete the checkout verification checklist.

Follow these steps to integrate AffiliateBase with your Webflow site:

Add the Tracking Script

Add the AffiliateBase tracking script to your Webflow site. Go to **Site Settings > Custom Code > Head Code** and paste this script. Install once with the stable tracking URL and receive compatible updates automatically.

html

<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://app.affiliatebase.io/track.js" data-account-id='YOUR_ACCOUNT_ID'></script>

Test the Script

Publish your Webflow site and verify the script is loading correctly.

javascript

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

Integrate with Stripe Payment Links

If you're using Stripe Payment Links or Buy Buttons, add the tracking script on the same page so AffiliateBase can pass the generated referral ID. Add to **Custom Code > Footer Code**.

html

<!-- Keep Stripe checkout elements on the same page as the AffiliateBase script. -->
<a href="https://buy.stripe.com/xxxxx">Buy now</a>

<stripe-pricing-table
  pricing-table-id="prctbl_xxx"
  publishable-key="pk_live_xxx"
></stripe-pricing-table>

<!-- For custom or redirected Stripe-hosted links, opt in explicitly. -->
<a data-affiliatebase href="https://link.payment/xxxxx">Buy now</a>

Track Form Submissions (Optional)

Add data-affiliatebase="true" to forms to auto-inject the referral ID. Add the data-affiliatebase attribute to any Webflow form to automatically include the referral ID when submitted.

html

<!-- 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 -->

Verify Tracking

Test your integration by visiting your site with an affiliate link.

javascript

// Visit your site with a test affiliate link:
// Open the exact setup-test link shown in AffiliateBase.

// Check the console:
console.log(window.AffiliateBase?.referral); // Should show a generated referral ID

Why Use AffiliateBase with Webflow?

Webflow can host the referral script; checkout compatibility still needs a complete test.

No-Code Integration

Copy and paste the script in Webflow's custom code settings. No development required.

Stripe Integration

Use a Stripe Payment Link, Buy Button, or Pricing Table on the same published page, then verify the generated referral ID reaches checkout.

Form Integration

Track conversions from Webflow forms by adding a single attribute.

CMS Compatible

Works with Webflow CMS collections and dynamic content.

Ready to get started?

Get started with AffiliateBase today and start growing your Webflow site with affiliate marketing.

Start for free

Frequently Asked Questions

Do I need coding knowledge to use AffiliateBase with Webflow?

No! Just copy and paste the script into Webflow's custom code settings. The integration is designed for no-code users.

Can I track conversions from Webflow forms?

Yes! Add data-affiliatebase="true" to your form and the referral ID is automatically included in submissions.

Does AffiliateBase work with Stripe on Webflow?

Those Stripe checkout elements are the supported path when they share the published page with the script. Verify the generated referral ID on the completed checkout.

What tracking parameters does AffiliateBase support?

AffiliateBase automatically detects ?via= URL parameters by default. You can add custom token keys with data-affiliatebase-params.

Related Platform Guides

Create an Affiliate Program for Your Squarespace Site

Review Squarespace code-injection prerequisites, compatible Stripe checkout options, native-commerce limits, and AffiliateBase verification steps.

Create an Affiliate Program for Your Wix Site

Evaluate AffiliateBase on Wix: custom-code prerequisites, supported Stripe checkout options, Wix Stores limits, and end-to-end verification.

Add an Affiliate Program to Next.js

Install affiliate tracking in Next.js, hand the generated referral ID to a server-created Stripe Checkout Session, and verify attribution.

Add an Affiliate Program to Nuxt

Load affiliate tracking in Nuxt, pass the generated referral ID to a server route, and verify a Stripe sale and commission.

Create an Affiliate Program with WordPress

Install AffiliateBase on WordPress, choose a supported Stripe checkout, and verify referral attribution without assuming WooCommerce or plugin compatibility.

Ready to Launch Your Webflow Affiliate Program?

Get started with AffiliateBase today and start growing your Webflow site with affiliate marketing.

Start for free View Documentation