Bubble Integration

Integrate Rewardful with Bubble.io

Emmet Gibney avatar
Written by Emmet Gibney
Updated over a week ago

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

  1. When user signs up, create a customer in Stripe

  2. Payments /Products page: Save payment method (with Stripe Element)

  3. Attach payment method to customer ID

  4. Create a subscription (with price, customer id, payment method)

  5. 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:

rewardful('convert', { email: "Current User's email" });

Once you've completed these steps you'll need to visit the bottom of this page to press "OK, I've completed this".

Did this answer your question?