Referral SaaSquatch Help Center

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

1. Including squatch.js

Include squatch.js in your webpage by including the library from our CDN using this async loader script:

<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);</script>

2. Using squatch.js

As squatch.js will load asynchronously, we wait for squatch.js to be ready before using it:

// when squatch.js is ready to use
window.squatch.ready(function(){

  //place squatch.js functionality here

});

Tracking script

Use the squatch.api method to update/register a user in your referral program without displaying a widget:

window.squatch.ready(function(){

  //configure squatch.js for the tenant you are using
  squatch.init({
    tenantAlias: 'test_bpinhag9gag'
  });

  //object containing the init parameters for squatch.js
  var initObj = {

    //the object for the user you want to upsert
    user: {                               
      id: 'abc_123',                      
      accountId: 'abc_123',       
      email: 'john@example.com',                
      firstName: 'John',       
      lastName: 'Doe' 
    },
        jwt: 'eyJhbGciOiJIUzI1Ni.eyJ1c2VyhbWUiOiJEb2UifX0.m0Rh17-wISTLyM_NRZsGFhmNu4'
  };

  squatch.api().upsertUser(initObj).then(function(response) {
    user = response.user;
  }).catch(function(error){
    console.log(error);
  })
});

Referral Widget

Use the squatch.widgets method to update/register a user in your referral program and load a referral widget for this user.

window.squatch.ready(function(){

  //configure squatch.js for the tenant you are using       
  squatch.init({
      tenantAlias: 'test_bpinhag9gag'
  });

  //object containing the init parameters for squatch.js
  var initObj = {

    //the object for the user you want to upsert
    user: {                               
      id: 'abc_123',                      
      accountId: 'abc_123',       
      email: 'john@example.com',                
      firstName: 'John',       
      lastName: 'Doe'  
    },
    engagementMedium: 'EMBED',
    widgetType: 'REFERRER_WIDGET',
        jwt: 'eyJhbGciOiJIUzI1Ni.eyJ1c2VyhbWUiOiJEb2UifX0.m0Rh17-wISTLyM_NRZsGFhmNu4'
  };

  squatch.widgets().upsertUser(initObj).then(function(response) {
    user = response.user;
  }).catch(function(error){
    console.log(error);
  }); 
});

To load the referral widget in a modal window, also known as popup mode, you will need to:

  • Set engagementMedium: "POPUP"
  • Include an HTML element with the class="squatchpop". These example triggers will display the widget:

    Button

    <button class="squatchpop">Referral Discount</button>
    

    Link

    <a href="#" class="squatchpop">Invite a Friend</a>
    

    Div

    <div class="btn" class="squatchpop">Love our service? Share the wealth!</div>
    

Embeded widget

To load the referral widget in embedded mode you will need to:

  • set engagementMedium: "EMBED"
  • include an HTML element with the class="squatchembed" where you want the widget to be displayed:

    <div class="squatchembed"></div>
    

3. Autofill the Referral Code

The squatch.js library can be used to pickup a referral code from the cookie (if present) in the referred user's browser. Using this to prefill a signup form field can reduce the chance of the referral not being attributed or the referred user not receiving their reward. This is mostly used for our Payment Provider Integrations such as Stripe and Recurly.

squatch.ready(function() { 

  //configure squatch.js for the tenant you are using
  squatch.init({
    tenantAlias: 'test_a5z3ezgicojry'
  });

  //autofilling the element with selector my_selector
  squatch.autofill('my_selector');

});

Troubleshooting

Having trouble making a successful Squatch JS init call? When loading the Referral Widget in EMBED or POPUP mode, it can return a screen showing that the Referral Program is temporarily unavailable. Please see an example of this screen below.

RS032

In the screenshot above, look for the error code in the right bottom corner and reference this code in our issue code list to diagnose why the widget load failed.

Test Tenant

We strongly recommend you use your Test Tenant while implementing. One of the many added benefits are helpful logs and error messages that will be displayed in your browser's console.

If you are still experiencing problems, please don't hesitate to contact our Support team.

Additional Resources

More information about Version 2 of our squatch.js library can be found in the library Reference, or in our squatch.js V2 Advanced Use Cases guide which contains more examples.

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?