The Stylux JavaScript SDK is a thin JavaScript library that integrates on the merchant's ecommerce theme that makes the Stylux integration significantly easier than without it. The initial SDK bundle size sits at ~9 kB compressed; fully loaded (including all CSS) sits ~32 kB compressed.

To get started, first add the script tag to the head of your HTML document:

<script src="https://sdk.stylux.io/js-sdk.js" crossorigin="anonymous"></script>

This exposes the Stylux SDK on the window object; all interactions will use the Stylux global.

Then on your product detail page (PDP) place the following container element where you want the Stylux button rendered if a product has an offer:

<div id="stylux-offer-container"></div>

Initializing the SDK

In order to use the SDK, it must first be initialized/setup; for example:

(async function () {
  if (!self.Stylux) {
    return;
  }

  await Stylux.setup({
    apiKey: 'STLX_key-for-unsigned-requests',
    merchantId: 'merchant-id',
  });
})();

Initializing the SDK with your API key for unsigned requests allows the SDK to make authenticated requests to Stylux's API on your online store.