Referral SaaSquatch Help Center

A simple quickstart guide on how to successfully integrate the squatch.js referral widget into your product.

1. Include Squatch.js in a Webpage

Add the following JavasSript at the end of your <body> tag on every page in your application, and replace the data fields with information about the logged-in user.

<script type="text/javascript">
var _sqh = _sqh || [];

// Push user details for a user who is logged in to your system
_sqh.push(['init', {
    tenant_alias: '$tenant_alias', // REPLACE: Your live or test mode tenant_alias. This identifies your app.
    account_id: '$accountId', // REPLACE: A company or group ID used to group users together
    payment_provider_id: '$paymentId', // REPLACE: the Stripe/Recurly/Braintree/Zuora id used for payment system integration (or null)
    user_id: '$userId', // REPLACE: A user ID from your system (must be unique for every user)
    email: '$emailAddress', // REPLACE: The e-mail address of the user
    first_name: '$firstName' // REPLACE: The user's first name
}]);

// Include squatch.js
(function(){function l(){var s=document.createElement("script");s.type="text/javascript";s.async=true;s.src=location.protocol+"//d2rcp9ak152ke1.cloudfront.net/assets/javascripts/squatch.min.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(s,t)}if(window.attachEvent){window.attachEvent("onload",l)}else{window.addEventListener("load",l,false)}})();
</script>

See our init function reference for details about the squatch.js init call.


2. Surface the Widget

Add a Button

Add the squatchpop class to any button on your page that you want to open the referral program widget. Examples:

<button class="squatchpop">Referral Discount</button> <!-- Clicking this opens the referral program in a modal popup -->
<a href="#" class="squatchpop">Invite a Friend</a> <!-- Clicking this would also open the popup -->
<div class="btn squatchpop">Love our service? Share the wealth!</div> <!-- Yep, DIVs work, too. Put 'em everywhere. -->

You can put lots of buttons and links on a page. Remember to make these buttons prominent and easy to find, otherwise people might not know you have a referral program. The referral widget is shown as a JavaScript popup, so it’s safe to include these buttons on every page.

Embed in a Page

You can embed the referral widget in a page by setting a div id to squatchembed.

Example:

<div id="squatchembed"></div>

The default mode for the referral widget is to surface in popup mode. In order to display it in Embedded mode we need to specify a mode parameter in the squatch.js init call.

An example of this would like:

// Push user details for a user who is logged in to your system
_sqh.push(['init', {
    tenant_alias: '$tenant_alias', // REPLACE: Your live or test mode tenant_alias. This identifies your app.
    account_id: '$accountId', // REPLACE: A company or group ID used to group users together
    payment_provider_id: '$paymentId', // REPLACE: the Stripe/Recurly/Braintree/Zuora id used for payment system integration (or null)
    user_id: '$userId', // REPLACE: A user ID from your system (must be unique for every user)
    email: '$emailAddress', // REPLACE: The e-mail address of the user
    first_name: '$firstName', // REPLACE: The user's first name
    mode: "EMBED" // Include the mode parameter set to EMBED when displaying the widget in embedded mode
}]);

3. Autofill the Coupon Code

Add a call to autofill the coupon code on your payment page. This reduces the chance of someone not using their referral discount when they sign up.

Example:

<input type="text" name="Coupon" id="my_coupon" value="" />
_sqh.push(['autofill', '#my_coupon']);

Additional Resources

See our squatch.js reference for for full details about squatch.js and the referral widget.

Learn more about How Referral Programs Work in our Success Center.

Our guides section also offers walkthroughs for setting up a successful referral program, including options for different business models and using a wide range of reward types.

Looking for something special?

Still couldn't find it?