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 Sticky Speed.

✉️ Ask for help

🛠 Developer documentation

Instructions for JavaScript (Browser)

Choose a different setup method

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

Step 1: Install JavaScript Snippet

Paste the following JavaScript snippet into the <head> tag:

<script>(function(w,r){w._rwq=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)}})(window,'rewardful');</script>
<script async src='https://r.wdfl.co/rw.js' data-rewardful='80669a'></script>

Copy

It must appear on every page of your application and marketing website.

Step 2: Track the conversion on your thank-you page

Execute the rewardful('convert') function immediately after creating the Stripe customer. Usually this occurs somewhere on a thank-you page, an AJAX response handler, or some other callback that fires after your checkout completes.

rewardful('convert', { email: 'customer@example.com' });

Copy

⚠️ Replace customer@example.com with your customer's email address.
It must be the same email address associated with the Stripe customer object.

Notes:

You can learn more about Client-Side Conversion Tracking →
Rewardful is currently not available as an NPM package and must be installed on your website using the snippet from Step 1.

See an example React component →

This example component shows how you might attach an event handler within componentDidMount() that updates the component's state with the referral UUID:

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

const SignupForm = () => {
  const [referral, setReferral] = useState(null);

  // When the component mounts, wire up a callback for when Rewardful is ready.
  // If `window.Rewardful.referral` is present, it means this visitor was referred
  // and we should update state with the referral UUID so it's rendered in the form.
  useEffect(() => {
    window.rewardful('ready', () => {
      setReferral(window.Rewardful.referral)
    })
  }, []);

  // If referral is set, render the referral UUID into a hidden input named "referral".
  return (
    <form>
      <input type="text" name="customer_name" />
      <input type="email" name="customer_email" />
      { referral ? <input type="hidden" name="referral" value={referral} /> : null }
    </form>
  );
}

Copy

When the form data is submitted to your server from React, you then add the referral value to the Stripe customer's metadata:

// Gather params submitted with <form>
const customerParams = {
  email: req.body.email,
  source: 'tok_visa' // Obtained with stripe.js
}

// Add the `referral` parameter from Rewardful to the Stripe customer metadata, if present.
if (req.body.referral) {
  customerParams.metadata = { referral: req.body.referral }
}

// Create the customer in Stripe.
stripe.customers.create(customerParams)

Copy

Adding the referral UUID to the Stripe customer's metadata converts the referral and associates it with the affiliate. Whenever that customer is charged, a commission will be paid to the affiliate according to your campaign rules. Please see the Stripe API Reference for full documentation on creating a customer with Node.js.