Online Store Widget

Quickstart

Load the SDK, mount the widget, and wire one callback. Fifteen minutes from a blank product page to a working layout with cart sync.

Updated 27 October 2026

This guide takes a plain product page and turns it into a working embedded planner. Before you start, make sure you have two things from your Scalarcut account: a widget key and a catalog. Both are created for you when you sign up.

1. Load the SDK

Add the Scalarcut SDK to your page. It is a small script with no dependencies:

<script src="https://embed.scalarcut.com/v1/sdk.js"></script>

2. Add a container

Reserve an element where the planner will render. The widget fills the container and resizes itself as the shopper works:

<div id="sc-tiling" style="max-width: 960px; margin: 0 auto;"></div>

3. Mount the widget

<script>
  ScalarcutTiling.mount('#sc-tiling', {
    widgetKey: 'YOUR_WIDGET_KEY',
    catalog: 'YOUR_CATALOG_SLUG',
    sku: 'CURRENT_PRODUCT_SKU',
    locale: 'en',
    currency: 'USD',
    onAddToCart(payload) {
      // Add the resolved lines to your own cart.
      payload.lines.forEach((line) => {
        yourStore.addToCart(line.sku, line.qty, line.unit);
      });
    },
  });
</script>

That is the whole integration. The widget loads your catalog, locks itself to the dimensions of the SKU being viewed, and returns the resolved cart lines through onAddToCart.

4. Keep the SKU in sync

If the shopper switches to a different product while the page is open, let the widget know:

const planner = ScalarcutTiling.mount('#sc-tiling', { /* ... */ });
planner.setSku('NEXT_PRODUCT_SKU');

The widget updates the material, keeps the shopper's layout, and recalculates the quantities.

What happens next

  • The shopper describes the wall or floor, sees every cut, and can open the cut list and the blueprint.
  • When they click Add to cart, your onAddToCart callback receives { lines, layoutFingerprint, layoutToken }, and your store adds the items.
  • Nothing leaves your store: price, stock, and checkout stay exactly where they are today.

Next steps