How to Autofill Referral codes into form fields

When a referred users clicks on a referral link, they arrive on the landing page you set in SaaSquatch. This landing page (or subsequent page) will have a form to collect the new user's information.

You can "Autofill" a form field with the referral code information and attribute the referral.

🔗 Autofill Referral code using Squatch.js

🔗 Running one referral program

When you have a single referral program for a specifc landing page and form.

1. Install Squatch.js JavaScript Library on your landing page, or page with the form. Squatch.js Quickstart guide
2. Paste the below JavaScript snippit onto page with the form.
3. Update tenantAlias,program-id`, and 'my-field' to match your program and form details.

<script>
  squatch.ready(function () {

    var element = document.getElementById('my_field'); // Replace with your field id

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

    squatch.api().squatchReferralCookie().then(function(response) {
      element = response.codes["program-id"] //Update with your program ID
    });
  });
</script>

🔗 Running multiple referral programs

When you have multiple referral programs with the same landing page and form. This solution uses only one form field and selects which code to use in priority order if multiple codes are present.

1. Install Squatch.js JavaScript Library on your landing page, or page with the form. Squatch.js Quickstart guide
2. Paste the below JavaScript snippit onto page with the form.
3. Update tenantAlias,program-id-1, program-id-2`, and 'my-field' to match your program and form details.

<script>
  squatch.ready(function () {

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

  squatch.api().squatchReferralCookie().then(function(response) {

    var codesList = Object.values(response.codes);

    if(codesList.length > 0){
       document.getElementById('csv_codes').value = codesList.join(", ");
    }

    // Heirarchy -- will use friend program by default, or use the affiliate program if not referred as a friend
    document.getElementById('my_field').value = response.codes['program-id-1'] || response.codes['program-id-2']; //Replace with your Progam IDs in heirarchal order.

  });
  });
</script>

🔗 Autofill Referral code using a Query String

The unique referral code of the referring user is contained in the URL as a query string.

1. Read and store the query string parameter 'rsCode'.
2. When the user reaches the form automatically place the query string, rsCode, into the desired field.