Installing SaasQuatch Referral Service in Canvas

UniversityCanv
Community Member
‎06-13-2022 12:59 PM

I wanted to know if it is easily possible to write Javascript code that acquired the emails of each user in Canvas. We are looking to implement a referral program provider called Saasquatch within a Page instance within Canvas and want to make sure something like this is possible. Any help would be great. My understanding is that we just need some Javascript to capture the Canvas user's email in order to properly implement this

Example code below with steps:

 

1. Include Squatch.js in a Webpage

Add the following JavaScript at the end of your <body> tag on every page in your application, and replace the data fields with information about the logged-in user.

<script type="text/javascript">var _sqh = _sqh || [];

// Push user details for a user who is logged in to your system
_sqh.push(['init', {
    tenant_alias: '$tenant_alias', // REPLACE: Your live or test mode tenant_alias. This identifies your app.
    account_id: '$accountId', // REPLACE: A company or group ID used to group users together
    payment_provider_id: '$paymentId', // REPLACE: the Stripe/Recurly/Braintree/Zuora id used for payment system integration (or null)
    user_id: '$userId', // REPLACE: A user ID from your system (must be unique for every user)
    email: '$emailAddress', // REPLACE: The e-mail address of the user
    first_name: '$firstName' // REPLACE: The user's first name
}]);

// Include squatch.js
(function(){function l(){var s=document.createElement("script");s.type="text/javascript";s.async=true;s.src=location.protocol+"//d2rcp9ak152ke1.cloudfront.net/assets/javascripts/squatch.min.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(s,t)}if(window.attachEvent){window.attachEvent("onload",l)}else{window.addEventListener("load",l,false)}})();</script>

See our init function reference  for details about the squatch.js init call.

🔗2. Surface the Widget

🔗Add a Button

Add the squatchpop class to any button on your page that you want to open the referral program widget.

Examples:

<button class="squatchpop">Referral Discount</button> <!-- Clicking this opens the referral program in a modal popup -->

<a href="#" class="squatchpop">Invite a Friend</a> <!-- Clicking this would also open the popup -->

<div class="btn squatchpop">Love our service? Share the wealth!</div> <!-- Yep, DIVs work, too. Put 'em everywhere. -->

You can put lots of buttons and links on a page. Remember to make these buttons prominent and easy to find, otherwise people might not know you have a referral program. The referral widget is shown as a JavaScript popup, so it’s safe to include these buttons on every page.

🔗Embed in a Page

You can embed the referral widget in a page by setting a div id to squatchembed.

Example:

<div id="squatchembed"></div>

The default mode for the referral widget is to surface in popup mode. In order to display it in Embedded mode we need to specify a mode parameter in the squatch.js init call.

An example of this would look like:

// Push user details for a user who is logged in to your system
_sqh.push(['init', {
    tenant_alias: '$tenant_alias', // REPLACE: Your live or test mode tenant_alias. This identifies your app.
    account_id: '$accountId', // REPLACE: A company or group ID used to group users together
    payment_provider_id: '$paymentId', // REPLACE: the Stripe/Recurly/Braintree/Zuora id used for payment system integration (or null)
    user_id: '$userId', // REPLACE: A user ID from your system (must be unique for every user)
    email: '$emailAddress', // REPLACE: The e-mail address of the user
    first_name: '$firstName', // REPLACE: The user's first name
    mode: "EMBED" // Include the mode parameter set to EMBED when displaying the widget in embedded mode
}]);

🔗3. Autofill the Coupon Code

Add a call to autofill  the coupon code on your payment page. This reduces the chance of someone not using their referral discount when they sign up.

Example:

<input type="text" name="Coupon" id="my_coupon" value="" />

_sqh.push(['autofill', '#my_coupon'])  

 

0 Likes