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

});

createCookieUser Method with Signed Requests On

The createCookieUser method is often used with Signed Requests turned off. When your program has Signed Requests turned on there are a number of things to be aware of when using the createCookieUser method in order to be able to take full advantage of this widget type's functionality.

Include a JWT

As with any request to our system when Signed Requests are turned on, you will need to include a JWT.

This JWT for the createCookieUser method uses the following JWT payload:

{
  "allowAnonymous": true
}

submitEmail

The Unregistered Referrer Widget also provides the ability for a Referrer to identify themselves to the SaaSquatch system using their email so that they can be contacted when their referral rewards are ready.

To enable this functionality with Signed Requests turned on the submitEmail squatch.js method must be employed.

The JWT payload for this submitEmail method requires the allowAnonymous parameter as well as a basic user object:

{
  "allowAnonymous": true,
  "user": { 
      "email": emailToSign 
  }
}

In the example below the widget is first loaded using a JWT with just the allowAnonymous:true payload. Then, when an email address is submitted, the submitEmail method looks to submit that email value (after you have calculated a JWT with that email), and reload the widget:

squatch.ready(function() {
  squatch.init({
    tenantAlias: 'test_amtbexleygag'
  });

  var initObj = {
    engagementMedium: 'EMBED',
    jwt: 'signedJWT' //JWT signed with `"allowAnonymous": true`

  };
  squatch.widgets().createCookieUser(initObj);

  squatch.submitEmail(function(target, widget, email) {

    // Code to sign JWT using the `email` value

    var jwt = {{signedJWT}};
    widget.reload(email, jwt);
  });
});

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.