Add the widget to your store

The widget is a self-contained iframe. You can add it to a page two ways. The SDK is the recommended path because it handles messaging, resizing, and cart sync for you.

SDK (recommended)

The SDK wraps the iframe and the postMessage protocol into one small API:

<script src="https://embed.scalarcut.com/v1/sdk.js"></script>
<div id="sc-tiling"></div>
<script>
  ScalarcutTiling.mount('#sc-tiling', {
    widgetKey: 'YOUR_WIDGET_KEY',
    catalog: 'YOUR_CATALOG_SLUG',
    sku: 'CURRENT_PRODUCT_SKU',
  });
</script>

The SDK works out the embed host from the script's own URL, so the same snippet runs on any store in any region. It also watches the container and keeps the frame at the right height on both desktop and mobile.

Plain iframe

If you would rather render the iframe yourself, point it at the widget URL with your parameters:

<iframe
  src="https://embed.scalarcut.com/v1/tiling?wk=YOUR_WIDGET_KEY&catalog=YOUR_CATALOG_SLUG&sku=CURRENT_PRODUCT_SKU&locale=en"
  style="width: 100%; height: 880px; border: 0;"
  title="Tile layout"
  allow="fullscreen"
  allowfullscreen
></iframe>

For cart sync the SDK is still the better choice, because with a raw iframe you listen for the widget's postMessage events yourself. See Events.

Sizing

The widget fills its container's width and manages its own height.

• Desktop — the SDK starts at 880 px tall and grows automatically if the interface needs more room.
• Mobile — the widget uses the full viewport height, so the canvas and the estimate panel stay comfortable on a phone.

If you want a shorter starting frame, set height:

ScalarcutTiling.mount('#sc-tiling', {
  widgetKey: 'YOUR_WIDGET_KEY',
  catalog: 'YOUR_CATALOG_SLUG',
  height: 720,
});

Placement

Put the widget on the product page, below or beside the gallery. It is tied to a single SKU, so it belongs where the shopper has already chosen a product — tile, laminate, LVT, slab, or engineered wood.

• One SKU per mount. If the page shows variants, pass the selected variant's SKU and call setSku when it changes.
• It lazy-loads. The SDK sets loading="lazy" on the frame, so the page stays fast when the widget is below the fold.
• One widget per page is enough. The same instance handles walls and floors.

HTTPS

The widget is served over HTTPS and, in production, needs an HTTPS parent page. Your widget key is bound to the origins you register, so it only loads on the domains you own — more on that in Security & licensing.