npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@saasquatch/squatch-js

v2.6.3

Published

The official Referral SaaSquatch Javascript Web/Browser SDK https://docs.referralsaasquatch.com/developer/squatchjs/

Downloads

13,966

Readme

Referral SaaSquatch Javascript SDK

Install the library

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>

Getting Started

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.

Data Only Operations

Create/upsert users without loading a widget.

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

Get Referral Cookie Code

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.

Install via NPM and Webpack (advanced)

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({...});

Component API:

squatch-embed

<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 SaaSquatch widgetType 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.
  • 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-popup

<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 SaaSquatch widgetType identifier of the desired widget
    • Required
  • open: boolean: Whether to the popup is open when loaded into the page
    • Default: false
  • 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.
  • 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.

Legacy

Rendering a widget via Widgets API

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>

Contributing

This is an open source project! If you are interested in contributing please look at contributing guidelines first.

Support

Shoot us an email at [email protected] if you need help!