Integrating Rewardful is a quick way to set up affiliate and referral programs for your Bubble app or site. We automatically track referred Visitors, Leads and Conversions from your affiliates, customers, influencers and/or partners. Commissions are automatically adjusted for any billing event changes such as downgrades, upgrades, free trials, cancellations and refunds.
Each person that signs up to your program will receive a personalized dashboard where they can create and manage their affiliate links, stats and track their success.
Step 1: Install and configure Stripe.js 2 Plugin in Bubble
If you haven't already, install and configure the free Stripe.js 2 Plugin in Bubble.io. Be sure to configure your Stripe.js 2 API Keys in the Plugin Settings of Bubble.io.
💡For more details about the Stripe.js 2 plugin, check out this Platform Payments 2 course on Copilot.
Step 2: Install Rewardful's Click Tracking Script
Navigate to Settings → SEO/metatags in your Bubble dashboard, then copy & paste the text below into the textarea labelled Script in the body with your API key.
<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='YOUR-API-KEY'></script>
Step 3: Install Rewardful's Conversion Tracking Script
Create a workflow in Bubble that follows these basic steps:
When user signs up, create a customer in Stripe
Payments /Products page: Save payment method (with Stripe Element)
Attach payment method to customer ID
Create a subscription (with price, customer id, payment method)
Trigger Rewardful conversion element with HTML element in Bubble
After the user signed up successfully, redirect him to a page only logged in, subscribed users can see. Here you can create a HTML element in Bubble and trigger Javascript with the client-side Javascript. Paste the script below in the HTML on this page being sure to replace the placeholder text with the user's actual email:
<script>
rewardful('convert', { email: "Current User's email" });
</script>
Once you've completed these steps you'll need to visit the bottom of this page to press "OK, I've completed this".