How to load a Referral Widget on a Web Page

🔗 1. Install the JavaScript library

Copy and paste the script below above the tag of your page:

<script type="text/javascript">
!function(a,b){a("squatch","https://fast.ssqt.io/squatch-js@2",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. Use squatch.js

Now that the javascript library is installed you can copy and paste the following snippet to load the referral widget.

<script type="text/javascript">
squatch.ready(function () {

    squatch.init({
      tenantAlias: "YOUR_TENANT_ALIAS", // Update with your tenant alias
    });

    squatch.widgets().upsertUser({
      user: {
        id: 'abc_123',
        accountId: 'abc_123',
        email: 'john@example.com',
        firstName: 'john@exampl.com',
        lastName: 'Doe',
      },
      engagementMedium: 'EMBED', // EMBED or POPUP
      widgetType: 'p/PROGRAM-ID/w/referrerWidget', // Update program id
      jwt: 'TOKEN' // Update with JWT token or delete and disable security
  });
});
</script>

You’ll need to update tenantAlias, engagementMedium, widgetType, and jwt parameters in the above script.

🔗 Defining input parameters

JWT

If you want to get set up quickly, you can disable security from the SaaSquatch portal and make sure you don’t pass the jwt parameter in the userUpsert.

Read our detailed guide on JSON Web Tokens when you’re ready to make it secure.

Engagement Medium

If you want to embed the referral widget on a page, set engagementMedium to EMBED mode and add an HTML element with class=”squatchembed” where you want the widget to be displayed:

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

Or, set engagementMedium to POPUP mode to display the referral widget as a modal on a page. Add an HTML element with class=”squatchpop” where users can click and see the referral widget pop up:

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

Widget Type

You need a Program ID to build the widgetType parameter. Copy the Program ID below the program name when you visit a program’s Set Up page.

Program ID is refer-a-friend in the above example.

Therefore, Widget Type would be the following: ``` { widgetType: "p/refer-a-friend/w/referrerWidget } ```