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

Choose the script for your integration:

Script URL on https://widget.cdn.sprii.shop/	Use
sprii-checkout.js	Generic social checkout; your site supplies the checkout handlers.
sprii-checkout-<customIntegrationId>.js	Checkout with a Sprii-provided shop integration. Copy the exact URL from Sprii.
widget-<pageId>.js	Onsite player, galleries, basket integration, customer-specific prices and player tracking events; also handles social checkout.

Copy your script URL from the Sprii admin. pageId is your Sprii page ID, also called pageUid. The checkout-only script does not emit player tracking events or run onsite basket and product-data actions.

Load order

Register your handlers before loading the Sprii script, and register them synchronously inside onSpriiReady. Do asynchronous work inside the action handler when it is called. Social checkout is attempted once during startup; registering SOME_CHECKOUT later does not retry it.

In Google Tag Manager, put the inline handler registration first and the Sprii script second in the same Custom HTML tag. Separate asynchronously loaded tags do not guarantee this order. Make any shop APIs needed by your handlers available before checkout runs.

The generic checkout script handles the hand-off without loading the player. The widget script can load the player before a show is opened. Apply your site's consent setup to the appropriate script and tracking behavior; see your privacy requirements before enabling player tracking.

Basic example

Below is a basic example of setting up the script:

<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>
  <!-- Replace PAGE_ID with the page ID from your Sprii widget script URL. -->
  <script src="https://widget.cdn.sprii.shop/widget-PAGE_ID.js"></script>
</head>

Registering more than once

Use .push(...) to register multiple callbacks without overwriting other registrations. Late callbacks receive the SDK too, but startup actions such as social checkout are not replayed. Register all handlers before loading the script:

(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. The default priority is 100; Sprii shop modules use -10:

(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 find out which actions you need to implement for your use case