Sprii Developer docs

Appearance

SDK ​

The Sprii SDK makes it possible to

  • Support checkout from social media, directly on your site
  • Embed live shopping on your own website, including Show galleries, clips and much more
  • Hydrate live shop products with customer specific prices

We have 2 different versions you can include on your site:

  • Checkout only
    • This version is if you only want to support social media live shopping
  • Widget version
    • This version includes all gallery features and onsite player

The URL for the script you should use is available in the Sprii admin.

Basic example ​

Below is a basic example of setting up the script:

html
<head>
  <script>
    (window.onSpriiReady = window.onSpriiReady || []).push((sdk) => {
      // Change settings, register actions, add event listeners…
      const someCheckoutHandler = async (payload) => {
        // your add to cart logic
        console.log(payload);
        return { status: 'SUCCESS' };
      };
      const cartOpenedEventHandler = (payload) => {
        // your event tracking logic
        console.log(payload);
      };
      sdk.registerAction(sdk.actions.SOME_CHECKOUT, someCheckoutHandler);
      sdk.on(sdk.events.CART_OPEN, cartOpenedEventHandler);
    });
  </script>
  <script src="https://widget.cdn.sprii.shop/sprii-checkout.js"></script>
</head>

Registering more than once ​

window.onSpriiReady is a list — call .push(...) as many times as you like, from anywhere on the page and in any order (before or after the Sprii script loads). Every callback receives the SDK, and nothing is overwritten:

js
(window.onSpriiReady = window.onSpriiReady || []).push((sdk) => {
  sdk.on(sdk.events.CART_OPEN, () => myAnalytics.track('cart_open'));
});

Setting a priority ​

If more than one callback registers a handler for the same action or feature, the one with the highest priority wins (equal priorities resolve to the later registration). To set it, push a { priority, handler } object instead of a bare function — a higher number wins, and omitting it uses the default tier:

js
(window.onSpriiReady = window.onSpriiReady || []).push({
  priority: 1000,
  handler: (sdk) => {
    sdk.registerAction(sdk.actions.SOME_CHECKOUT, myCustomCheckout);
  },
});

Event listeners (sdk.on) are additive and unaffected by priority — every listener fires.

Next steps? ​

Now that we have the basics in place, it is time to look at the cookbooks to finf out what actions you need to implement for your usecase