With our plug-and-play solution, we make it easy for your customers to refer friends. For your logged in users, iRefer can automatically create a unique referral link for that user and show them a sharing widget and referral dashboard like this example below. 

This may require little additional development effort (15 minutes most) at your end. We can provide you with most of the code required to integrate this in your website. Depending on what kind of login or sign-up form you are using, it could be very smooth integration.

Here is what you will learn in this tutorial.

  1. Connect your marketing website and SaaS website to your iRefer account.
  2. Specific campaign settings required.
  3. Passing the email address of an existing user to the referral dashboard. (Some development effort may be required here)
  4. Embedding the sharing widget into your Refer a Friend page.
  5. Testing your campaign


Here is the flow of a SaaS referral program and where you will need to integrate our code outlined in the steps below.

1. Connect your marketing website and SaaS website to your iRefer account.

Step 1
Navigate to your campaign by clicking on the "Edit" button in your Dashboard.

In the left navigation, click on the "Installation" button, then "Custom website" as shown in this screenshot.

Copy the line of code as shown in "Step 1" of this screenshot. 

Step 2
Install this script on your website site by pasting in before the closing </body> tag of the page.

Step 3
Refresh the home page of your website. Then refresh this page. If installed correctly, you should see a green check here.

Step 4 - Install script to SaaS App website

Copy the following script code and install it on your SaaS App website. Paste it before the </body> tag in your SaaS App website's footer file.        

2. Specific campaign settings required

There are some specific campaign settings you need to set.
On the "Initial setup" page choose the "Embedded" form style and change the shortcode from <div id="shortcode"></div> to <div id="refdashboard"></div>

Click on "Advanced Options" and choose "No" for "Send welcome email to new participants?" If you want to send a Welcome email about your referral program to the user after they view the referral dashboard for the first time, then choose "Yes".

Choose "Yes" for "Automagically sign-up new participants?" (this will generate the unique referral link for the user if they are not already signed-up to this campaign)

Click Save and Continue.

For this type of campaign you can skip the following steps - "Sign-up form" and "Notifications" as you will be using your registration form and we will not be sending out a Welcome email.

3. Passing the email address of an existing user to the referral dashboard

You need to pass the email address of your logged in user to iRefer. There are two ways you can achieve this. Either option would work fine.

Option 1 - Using Cookie - You need to write the user email address to vsu_ref_email cookie for your website.

Here is a sample JavaScript code for adding the user email address to vsu_ref_email cookie. You need to add this code to your form submit event (change "your-email") to email field name on your form.

var user_email = document.getElementsByName("your-email")[0].value;
var domain_name = window.location.hostname;
if (domain_name.startsWith("www.")){
   domain_name = domain_name.substring(4);
}

var days = 365;
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
var expires = "; expires=" + date.toUTCString();

document.cookie = "vsu_ref_email=" + user_email + expires + "; domain=." + domain_name + "; path=/";


Option 2 - Using Querystring
- You need to pass the user email address to vsu_ref_email url querystring parameter on your refer-and-win (or referral dashboard page).

The required query string format is ?vsu_ref_email=user@email.address. The easiest way is to attach the query string as part of the link to the referral dashboard page so that when your users click on the link, they are taken to the referral dashboard page and the page URL shows vsu_ref_email in the query string. 

For example: /referral-dashboard?vsu_ref_email=user@email.address

Here is a sample PHP code for adding this querystring to the link to referral dashboard page -

<a href="/referral-dashboard/?vsu_ref_email={{currentUser.email}}">
   Referral Dashboard
</a>


This is a requirement for the embedded referral dashboard to show. If the required cookie or query string is not present, your sign-up form will show instead of intended referral dashboard.

4. Embedding the sharing widget into your Refer a Friend page.

Now we need to insert this shortcode into the HTML part of your Refer a Friend page where you want the sharing widget/referral dashboard to appear for your logged in users.

<div id="refdashboard"></div>

When your user is logged in, they will then see this widget.


5. Testing your campaign

Now let's test your campaign to make sure everything is correctly setup.

When someone signs up through your registration form and navigates to their refer-a-friend page, their email address should have been either added to the vsu_ref_email cookie or passed in the URL as a query string like this - /refer-a-friend/?vsu_ref_email=user@email.address

When they land on their refer-a-friend page (where you added the shortcode <div id="refdashboard">) they should see the sharing widget. Please note that the unique referral link for a user is not generated until they have visited this page. It is generated on their first visit to this page.

When the user logs back into their account and navigates to their refer-a-friend page, they should see the sharing widget along with their referral status. If you have leaderboard option enabled, it will also show the current leaderboard.

Did this answer your question?