Referral SaaSquatch Help Center

Examples of advanced use cases that the squatch.js V2 library supports.

Just getting started?

If you are just getting started we recommend you take a look at our squatch.js V2 library quickstart guide.

Reference Existing User Data

It is possible to reference information about the identified user.

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

  squatch.init({
      tenantAlias: "test_a5z3ezgicojry"
    });

    var initObj = {
      user: {                          
        id: 'abc_125',    
        accountId: 'abc_125',  
        email: 'john@example.com', 
        firstName: 'John',
        lastName: 'Doe'
      },
        jwt: 'eyJhbGciOiJIUzI1IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiYWJdE5hbWUiOiJKb2huIn19.GyCl8nuVCbCNXx4Z2LfL6TCsA5IYjYqlfyk'
  };

  squatch.api().upsert(initObj).then(function(response) {

    //set the referral participants user object to the variable "user"
    user = response.user;

  }).catch(function(err){
    console.log(err);
  });
});

In this example you can reference all the values within the user object, such as referral code, share links from the variable user.

Instances

The squatch.js library supports running as instances, which allows for a wide range of configurations.

These can include:

  • Multiple widgets (of the same or different type) on the same page
  • Multiple users on the same page
  • Multiple tenants on the same page
// when squatch.js is ready to use
squatch.ready(function() {

  var testTenantWidgets = new squatch.Widgets({
    tenantAlias: "test_a5z3ezgicojry"
  });

  var initObj = {
    user: {                               
      id: 'abc_123',                      
      accountId: 'abc_123',       
      firstName: 'John'
    },
    widgetType: "REFERRER_WIDGET",
    engagementMedium: "POPUP",
    jwt: 'eyJhbGciOiJIUzI1IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiYWJdE5hbWUiOiJKb2huIn19.GyCl8nuVCbCNXx4Z2LfL6TCsA5IYjYqlfyk'
  };

  testTenantWidgets.upsertUser(initObj).then(function(response){});
});

Example with Multiple Widgets

Using instances of squatch.js enables you to display multiple widgets for the same user on the same page.

// when squatch.js is ready to use
squatch.ready(function() {
  var TenantWidgets = new squatch.Widgets({
    tenantAlias: "test_a5z3ezgicojry"
  });

  var user = {                               
    id: 'abc_123',                      
    accountId: 'abc_123',       
    firstName: 'John',
  }
  var jwt =  'eyJhbGciOiJIUzI1IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiYWJdE5hbWUiOiJKb2huIn19.GyCl8nuVCbCNXx4Z2LfL6TCsA5IYjYqlfyk'

  TenantWidgets.upsertUser({
    user: user,
    widgetType: "REFERRER_WIDGET",
    engagementMedium: "POPUP",    
        jwt: jwt
  }).then(function(response) {
    response.widget.open();

  });

  TenantWidgets.upsertUser({
    user: user,
    widgetType: "REFERRER_WIDGET",
    engagementMedium: "EMBED",    
        jwt: jwt
  }).then(function(response) {
    response.widget.open();

  });

});

Example with multiple users

Using instances of squatch.js enables you to display widgets for multiple users on the same page.

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

  var testTenantWidgets = new squatch.Widgets({
    tenantAlias: "test_a5z3ezgicojry"
  });

  var initObj1 = {
    user: {                               
      id: 'abc_123',                      
      accountId: 'abc_123',       
      firstName: 'John',
        lastName: 'Doe'
    },
    widgetType: "REFERRER_WIDGET",
    engagementMedium: "EMBED",    
        jwt: 'eyJhbGciOiJIUzI1IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiYWJdE5hbWUiOiJKb2huIn19.GyCl8nuVCbCNXx4Z2LfL6TCsA5IYjYqlfyk'
  };

  var initObj2 = {
    user: {                               
      id: 'abc_124',                      
      accountId: 'abc_124',
      firstName: 'Jane',
        lastname: 'Doe'
    },
    widgetType: "REFERRER_WIDGET",
    engagementMedium: "EMBED",    
        jwt: 'eyJhbGciOiJIUzI1NiIcCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiYdE5hbWUiOiJKb2huIn19.5Mz20c7ZCGJFkxOEezL06WishKex0g'
  };

  testTenantWidgets.upsertUser(initObj1).then(function(response){});

  testTenantWidgets.upsertUser(initObj2).then(function(response){});
});

Example with multiple programs:

// when squatch.js is ready to use
squatch.ready(function() {
  var firstTenantWidgets = new squatch.Widgets({
    tenantAlias: "arr6gcal3vwp6"
  });

  var secondTenantWidgets = new squatch.Widgets({
    tenantAlias: "test_a5z3ezgicojry"
  });

  var initObj1 = {
    user: {                               
        id: 'abc_123',                      
        accountId: 'abc_123',       
        firstName: 'John',
    },
    widgetType: "REFERRER_WIDGET",
    engagementMedium: "POPUP",    
        jwt: 'eyJhbGciOiJIUzI1IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiYWJdE5hbWUiOiJKb2huIn19.GyCl8nuVCbCNXx4Z2LfL6TCsA5IYjYqlfyk'
  };

  var initObj2 = {
    user: {                               
        id: 'abc_124',                      
        accountId: 'abc_124',       
        firstName: 'John',
    },
    widgetType: "REFERRER_WIDGET",
    engagementMedium: "EMBED",    
        jwt: 'eyJhbGciOiJIUzI1IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiYWJdE5hbWUiOiJKb2huIn19.GyCl8nuVCbCNXx4Z2LfL6TCsA5IYjYqlfyk'
  };

  firstTenantWidgets.upsertUser(initObj1).then(function(response1) {
    response1.widget.open();
  }).catch(function(error){console.log(error)});


  secondTenantWidgets.upsertUser(initObj2).then(function(response2) {
    response2.widget.open();
  }).catch(function(error){console.log(error)});

});

Widget Open

You can open the referral widget using the widget.open() function. The following example will open the widget in a modal as soon as the referral widget is available.

testTenantWidgets.upsertUser(initObj).then(function(response) {
  response.widget.open();
});

Widget Close

Closing the widgte can be done through the widget.close() function. The example below will open the widget as soon as it's available and close it after a 5 second delay.

testTenantWidgets.upsertUser(initObj).then(function(response) {
  response.widget.open();

  setTimeout(function() {
      response.widget.close()
    }, 5000);

});

Need assistance?

Are you looking for any advanced functionality that isn't listed in the use cases above? Please don't hesitate to reach out to our friendly support team who can assist you further.

Looking for something special?

Still couldn't find it?