To integrate any SaaSquatch program to your website or web app, copy/paste this snippet of JavaScript above the </head>
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>
Or load the library synchronously from our CDN:
<script src="https://fast.ssqt.io/squatch-js@2" type="text/javascript"></script>
Include either of the squatchjs generated web-components in your page's HTML to render your desired widget:
<!-- EMBED WIDGET -->
<squatch-embed widget="WIDGET_TYPE"
><!-- Widget is rendered here --></squatch-embed
>
<!-- POPUP WIDGET -->
<squatch-popup widget="WIDGET_TYPE"
><!-- Widget is rendered here --></squatch-popup
>
For rendering widgets and API calls, squatchjs respects configurations set on the following:
-
window.squatchToken
: Signed JWT for calls to the SaaSquatch API -- How to generate valid JWT Tokens -
window.squatchTenant
: SaaSquatch tenant alias -
window.squatchConfig
: Additional configuration overrides (Optional)debug
: Turn on console debugging (Default:false
)
-
window.squatchOnReady
: Declarative on ready function to be run when the squatch-js module has finished loading<script type="text/javascript"> window.squatchOnReady = () => { squatch.widgets().upsertUser({ user: { // Object (required) id: 'USER_ID', // String (required) accountId: 'USER_ACCOUNT_ID', // String (required) email: 'USER_EMAIL', // String (optional) firstName: 'USER_FIRST_NAME', // String (optional) lastName: 'USER_LAST_NAME', // String (optional) ... }, engagementMedium: 'EMBED', // String (optional: POPUP, EMBED) widgetType: 'p/PROGRAM-ID/w/referrerWidget', // Update PROGRAM-ID }); } </script>
Note: If window.squatchToken
is undefined, widgets will be rendered as Instant Access widgets.
<script type="text/javascript">
// Assuming window.squatchTenant, and window.squatchToken are set
squatch.ready(function() {
var user;
squatch.api().upsertUser({
user: { // Object (required)
id: 'USER_ID', // String (required)
accountId: 'USER_ACCOUNT_ID', // String (required)
email: 'USER_EMAIL', // String (optional)
firstName: 'USER_FIRST_NAME', // String (optional)
lastName: 'USER_LAST_NAME', // String (optional)
...
},
engagementMedium: 'EMBED', // String (optional: POPUP, EMBED)
widgetType: 'p/PROGRAM-ID/w/referrerWidget', // Update PROGRAM-ID
}).then(function(response) {
user = response.user;
}).catch(function(err){
console.log(err);
});
// autofill
var element = document.getElementById('my_coupon');
element.value = user.referredBy.code;
});
</script>
You can also use the api()
function to call the WidgetApi methods directly.
<script type="text/javascript">
squatch.ready(function () {
var element = document.getElementById("my_coupon");
squatch
.api()
.squatchReferralCookie()
.then(function (response) {
/* `response.codes` looks like `{"program_id":"NEWCO", "friend_program":"BOB"}` */
element.value = response.codes["program-id"];
});
});
</script>
Want more control? Visit our guide.
Squatch.js can also be installed via NPM and bundled into your application with Webpack.
# via npm
$ npm install @saasquatch/squatch-js
import * as squatch from "@saasquatch/squatch-js";
// Always call init
squatch.init({
tenantAlias: "YOUR_TENANT_ALIAS" // String (required)
});
// Don't need to wait for .ready when importing via NPM/Webpack
squatch.api().upsertUser({...});
<squatch-embed widget="WIDGET_TYPE" [ container="#selector" | locale="en_US" ]>
<!-- Children of squatch-embed act as a loading state -->
Loading...
</squatch-embed>
widget
: Specifies the SaaSquatchwidgetType
identifier of the desired widget- Required
- Changing this attribute's value causes the widget to reload.
container
: A CSS selector for a container element to use as the parent of the widget's iframe.- Default:
null
- Note, if no container is specified, the widget iframe will attach to the shadow DOM of
squatch-embed
.
- Default:
locale
: Locale that determines the widget translation displayed. Should be of the form "xx_XX".- Default: Browser's current locale
- Changing this attribute's value causes the widget to reload.
<squatch-embed
widget="WIDGET_TYPE"
[
open
|
container="#selector"
|
locale="en_US"
]
>
<!-- Clicking a child of squatch-popup opens the popup -->
<button>Click me to open</button>
</squatch-embed>
widget: string
: Specifies the SaaSquatchwidgetType
identifier of the desired widget- Required
open: boolean
: Whether to the popup is open when loaded into the page- Default:
false
- Default:
container
: A CSS selector for a container element to use as the parent of the widget's iframe.- Default:
null
- Note, if no container is specified, the widget iframe will attach to the shadow DOM of
squatch-embed
.
- Default:
locale
: Locale that determines the widget translation displayed. Should be of the form "xx_XX".- Default: Browser's current locale
- Changing this attribute's value causes the widget to reload.
Note: engagementMedium
is required in the squatch.widgets()
functions if you want to load the widget. Otherwise, squatch.js will look for your portal settings and render the widget that's mapped to the URL where this snippet is included.
<script type="text/javascript">
squatch.ready(function() {
squatch.widgets().upsertUser({
user: { // Object (required)
id: 'USER_ID', // String (required)
accountId: 'USER_ACCOUNT_ID', // String (required)
email: 'USER_EMAIL', // String (optional)
firstName: 'USER_FIRST_NAME', // String (optional)
lastName: 'USER_LAST_NAME', // String (optional)
...
},
engagementMedium: 'EMBED', // String (optional: POPUP, EMBED)
widgetType: 'p/PROGRAM-ID/w/referrerWidget', // Update PROGRAM-ID
});
});
</script>
This is an open source project! If you are interested in contributing please look at contributing guidelines first.
Shoot us an email at support@saasqt.ch if you need help!