Add Rewardful to your website

The final step is to add Rewardful to your website so that we can track visits, leads, and conversions.

These instructions have been prepared for The Copy Haus .

✉️ Ask for help

🛠 Developer documentation

Instructions for Next.js

Choose a different setup method

Looking for more details and advanced usage? Check out our full JavaScript API →

Step 1: Install JavaScript Snippet

Depending on whether you're using the App Router or Page Router in your Next.js application, you'll need to add the Rewardful script to the appropriate file. New Next.js applications typically use the App Router.

App Router
Page Router

Add the following code in app/layout.js. If you already have a layout.js, you just need to add the Script components and their corresponding import statement.

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://r.wdfl.co/rw.js" data-rewardful="f504d0"></Script>
        <Script id="rewardful-queue" strategy="beforeInteractive">
          {`(function(w,r){w._rwq=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)}})(window,'rewardful');`}
        </Script>
      </body>
    </html>
  )
}

Copy

Add the following code in pages/_app.js. If you already have a layout.js, you just need to add the Script components and their corresponding import statement.

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script src="https://r.wdfl.co/rw.js" data-rewardful="f504d0"></Script>
      <Script id="rewardful-queue" strategy="beforeInteractive">
        {`(function(w,r){w._rwq=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)}})(window,'rewardful');`}
      </Script>
    </>
  )
}

Copy

The Script components should not be nested inside Head components. This could cause issues loading the Rewardful script. See the Next.js documentation for further information.

Step 2: Pass the referral ID from the browser to your server

When a visitor arrives on your website through an affiliate link, Rewardful creates a unique referral ID to represent that visitor. This value (a UUID string) must be passed from the browser to your server so it can be included in the Stripe API call that initiates a Checkout session or creates a customer. You could add a hidden input with the referral ID to your form and submit it to your server.

import React, {useState, useEffect} from 'react';

export default function CheckoutPage() {
  const [referral, setReferral] = useState(null)

  useEffect(() => {
    rewardful('ready', function() {
      setReferral(Rewardful.referral);
    });
  }, []);

  return (
    <form action="/create-checkout-session" method="POST">
      <section>
        { referral ? <input type="hidden" name="referral" value={referral} /> : null }
        <button type="submit" role="link">
          Checkout
        </button>
      </section>
    </form>
  )
}

Copy

Step 3: Pass the referral ID to Stripe

The referral ID can be passed to Stripe as the client_reference_id parameter when creating a checkout session or as metadata['referral'] when creating a customer.