SaaSquatch Help Center

End to end guide for setting up your referral program using a single Drag-and-Drop code snippet

What is the Referral SaaSquatch Install Guide for Marketers?

This guide provides a straighforward walkthrough of all the steps needed to setup your referral program. Using a single Drag-and-Drop code snippet you can have your referral program up and running in a matter of minutes.

What you will Need

We recommend having the following available before proceeding to make this install as smooth as possible:

  • Ability to include a tracking script (similar to Google Analytics) on your webpage. This can be done through copy/paste or something like Google Tag Manager (GTM).
  • A Referral SaaSquatch account
  • A plan for how your users will interact with your referral program.

New to referral programs?

We have a wide selection of articles, case studies and eBooks available to help you learn all about referral programs.

Try our Referral Program 101 article if you're not sure where to start.

Setup your Program in a few simple steps

Follow these simple steps to create, configure, and install your own Referral Program. For this Install Guide we will use a Give $20, Get $20 Referral Program with manual Reward Fulfillment.

1. Log into your Referral SaaSquatch account

Log into your Referral Saasquatch Account.

If you don't already have a Referral SaaSquatch account please contact our Sales team who will be more than happy to schedule a product demo with you.

2. Design your Referral Program

If this is the first time you are logging into your Referral SaaSquatch account, you will need to pick what type of referral program you would like to run.

If you have already setup your referral program, please make sure the options that you chose follow what is outlined below.

Configuration options:

  • Program Reward (The reward you want to offer users) - Choose either Percentage Discount or Dollar Credit. We will be using a Dollar Credit reward in this guide.
  • Payment System (How SaaSquatch connects to your billing) - Choose Other (Via Saasquatch API)
  • Company Name (The name your customers associate with your brand) - This field will be displayed in your referral widget and notification emails so make sure it is simple and recognizable to your customers.
  • Referral Landing Page (Where referred users are linked) - This is where the share links will direct people who are referred to your product. Sometimes this is your main webpage, sometimes this is a specialized referral welcome/signup page.
  • Reward Amount (Amount in dollars given for referrals) - Choose the reward value you would like to give to referrers and referred users.

3. Configure your URLs and Widget Display Rules

Head over to the settings page in the Referral SaaSquatch Portal. Here we will configure which pages on your website you want to display the referral program on and what we will use as a conversion point.

For the purpose of this guide we will focus on setting up three main components needed to get your referral program up and running:

  • A page where your existing users can share their unique sharelink with their friends
  • An inbound referral lead capture page
  • A conversion point using a thank you page.

More information about the full set of core topics of a referral program can be found in our How Referral Programs Work article.

Widget Page

One of the easiest ways for your existing user-base to access your referral program, is while they are using your product. The referral widget we are setting up can be displayed to your existing customers on any page, from the shopping cart page, to an account page behind a login. The configuration of these touch points is done through widget rules.

To configure displaying the widget:
  1. Head to the Settings page in your Referral SaaSquatch Portal
  2. In the Program Display Settings section of the page you will find the Widget Display Rules heading Highlighted Display Rules Section
  3. Paste the URL of the page you would like to display the widget to your existing users on (e.g. http://example.com/myaccount, or http://example.com/shoppingcart)
  4. Select "Referrer Widget" from the Widget Type dropdown to display the widget to your existing users.
  5. We would like as many of your existing user to see the widget, so we check the "Display on Load" option. This will show the widget on this URL for every successful page load. This might not be desirable while a customer is browsing their shopping cart, but perfect for a post purchase Thank You page.
  6. We also want your customers to be able to re-open the widget once it is closed (if they want to make additional shares), by selecting "Show CTA" there will be a button rendered to easily open the referral widget again.
  7. Click Add Rule to save these settings

Example Widget Display Rule:

Widget Page Display Rules

Landing Page

The landing page of your referral program is where referral links, shared by you existing users, will direct referred users to. This can be configured as your existing home page or sign up flow. You can also setup a dedicated page as a referral program landing page.

The Referred User Widget should be loaded on the landing page to inform the Referred User that they were referred, and the discount code that they need to include at checkout to get their reward for being referred.

Example Referred User Widget:

To configure your landing page:
  1. Create a second Widget Display Rule
  2. Paste the URL of your landing page (e.g. http://example.com/landing-page)
  3. Select "Referred User Widget" from the Widget Type dropdown.
  4. As we would like the widget to popup when the referred user lands on the page, check the "Display on Load" option.
  5. We also want referred users to be able to re-open the widget once it is closed (if they forgot to copy their discount code), so we select "Show CTA".
  6. Click Add Rule

Example Landing Page Widget Display Rule:

Landing Page Display Rules

Note: If at some point you would like to change the landing page for your referral program, you can also do so from this Settings page.

Coupon Codes

By default the coupon codes displayed to your referred user in the referred user widget are those of the their referrer. For the purpose of this guide we change this to use a static campaign code instead. This change will simplify the process of applying referred user rewards when they checkout. Referrals will still be correctly attributed to the referrer through our squatch.js Library.

Adding in a static campaign code can be done by editing the Referred User Widget copy from the Portal.

  1. Select the Referred User Widget, and Customize Widget.

    Edit Referred User Widget

  2. Replace the {{referredBy.referredByUser.referralCode}} value in the Widget Text Body field with the static campaign code you would like to display to referred users (e.g. REFERRAL2017).
  3. Create a discount code in your payment platform with your chosen campaign code (e.g. RFERRAL2017) as the Promo Code for the discount.

Note: Make sure the coupon in your payment system can be used multiple times, since all your referred users will be using this code to claim their reward.

With the coupon code correctly configured in both Referral SaaSquatch's platform and your payment provider, referred users will receive their discount when they go through your checkout process.

Referral Conversion - Thank You Page

For most SaaS and eCommerce sites the Thank You page is the easiest place to track the conversion of a referral as only those who have completed a transaction, or particular action, will ever reach this page.

To configure your checkout thank you page as the conversion point for referrals:

  1. Head to the Settings page in your Referral SaaSquatch Portal.
  2. Under the "Conversion URL(s)" heading, paste the URL of your thankyou page. (e.g. http://example.com/thank-you)
  3. Click Add URL

Example Referral Conversion Rule Settings:

Conversion URL Settings

Note: You can also display the widget on your Thank You Page by adding a Widget Display Rule (similar to the Widget Page one) to show the referral widget to customers who just completed a purchase.

4. Install the Tracking Script

Now that you have configured your referral program it is time to install it into your product.

The Tracking Script code should be placed on every page that you have configured a Widget Rule for, the page which is your Conversion URL, as well as any page that you would like to Identify and Attribute referred users on.

When you are testing out your referral program on your product's staging/testing environment you will want to use your Referral SaaSquatch Test Tenant. Your test tenant can easily be identified by the test_ at the beginning (e.g. test_dshuiodklco32). Only once your program is ready to run on your live website should you be using your live Referral SaaSquatch tenant.

Make sure to replace YOUR_TENANT_ALIAS_HERE with your test tenant alias when you paste the following Tracking Script code snippet onto your the webpage:

<script>!function(a,b){a("squatch","https://d2rcp9ak152ke1.cloudfront.net/assets/javascripts/v2/squatch.min.js",b)}(function(a,b,c){var d,e,f;c["_"+a]={},c[a]={},c[a].ready=function(b){c["_" + a].ready =  c["_" + a].ready || [];c["_" + a].ready.push(b);},e=document.createElement("script"),e.async=1,e.src=b,f=document.getElementsByTagName("script")[0],f.parentNode.insertBefore(e,f)},this);squatch.ready(function(){squatch.init({tenantAlias:"YOUR_TENANT_ALIAS_HERE"});squatch.widgets().createCookieUser({});});</script>

The tenant alias can be found on the Install page in the Referral SaaSquatch portal:

MORP portal tenant alias highlighted

5. Referrer Reward Fulfillment

Referrer Rewards can be tracked using the Referral Feed in the Portal. Fulfill the reward through your system and then redeem their reward from their SaaSquatch participant profile in the Portal.

Automated Referrer Reward Fulfillment

For more advanced Referrer Reward Fulfillment our Pro and Enterprise plans provide a range of integrations which enable you to automate the reward fulfillment process.

These options include:

  • The Referral SaaSquatch Giftbit integration which enables you to automatically reward your referral participants with gift cards.
  • Discount codes from your payment platform can be uploaded to us as a batch, and then automatically send to referrers when they earn a reward.

6. Testing & Troubleshooting

Testing

We recommend that you run through a couple full referral loops to verify that everything is working as intended.

Make sure to confirm that the referral is getting attriubuted to the correct referrer and that the rewards are being generated for both the referrer and referred user.

Common problems:

RS045 Error

Is your widget displaying a messaging like this?

RS045 Error Code

The RS045 Error code indicates that your referral program has Signed Requests turned on. To fix this issue "Disable" Signed Requests on the Install page in the referral Saasquatch portal.

A full list of squatch.js error codes can be found in our documentation.

Tenant Alias

Check that you are using the correct tenant alias. If you are troubleshooting on your testing/staging environment then make sure your code snippet is using your test tenant.

Console Errors

Open console in the browser (for Chrome, press the F12 key) to see if there are any errors from the Referral SaaSquatch Tracking Script. These errors will include an error code (e.g. RS032) and are described in detail in our list of program errors

If you run into any issues setting up your referral program please contact our support team who will be more than happy to helo you.

7. Launch your program

Now that your referral program is correctly configured you are ready to launch it.

There are a couple of changes to make in order to transition from your Test Tenant to your Live program:

Tenant Alias

Make sure to change the tenant alias in the code snippets on your website match which of the text or live tenant you are trying to use.

Your Live and Test tenant aliases can be found on each tenants respective install page.

Widget and Email settings

You will also need to make sure to apply any customizations to your widget and emails that you made on your test tenant to your live program.

These changes may include:

  • Referral Widget copy
  • Conversion Widget URL Rules
  • Referrer Widget URL Rules
  • Share message copy
  • Notification email copy

What's next?

Congratulations on setting up your Referral Program. Although this is super exciting, this is also just the beginning of growing your userbase and revenue. We recommend diving deeper into the world of Referral Programs and our platform by reading these documents:

Find about more about the amazing configuration options available in the Portal in our Using Referral SaaSquatch article.

Learn more about how to protect your referral program against unwanted referral activity by reading up about our Security Management System.

Our Saas guide provide details about how to take your referral program to the next level and integrate it with your product.