SDK reference

The SDK has a single entry point, ScalarcutTiling.mount(target, options). It returns a handle you can use to drive the widget after it loads.

mount(target, options)

const planner = ScalarcutTiling.mount('#sc-tiling', {
  widgetKey: 'YOUR_WIDGET_KEY',
  // ... options below
});

target is a CSS selector string or an Element. The widget renders into a new iframe inside it.

Options

Option	Type	Required	Description
widgetKey	string	Yes	Your account's widget key.
catalog	string	No	Catalog slug to lock the planner to.
sku	string	No	SKU to preselect on load.
locale	string	No	UI locale — en, ru, de, pl, it, es, fr, or pt.
currency	string	No	Display currency code, for example USD, EUR, or BYN.
height	number	No	Starting desktop frame height in pixels. Defaults to 880.
embedOrigin	string	No	Embed host origin. Defaults to the SDK script's own origin, so you rarely need to set this.
onReady	() => void	No	Called when the widget has finished booting.
onBomUpdated	(payload) => void	No	Called whenever the bill of materials changes.
onAddToCart	(payload) => void	No	Called when the shopper clicks Add to cart.
onError	(payload) => void	No	Called when the widget reports an error.
onResize	(height) => void	No	Called when the widget asks for a new height.

Callbacks

onAddToCart(payload) is the one you will use most:

onAddToCart(payload) {
  // payload = { lines: [{ sku, qty, unit }], layoutFingerprint, layoutToken }
  payload.lines.forEach((line) => {
    yourStore.addToCart(line.sku, line.qty, line.unit);
  });
}

Each line carries a SKU, a numeric quantity, and a unit (box for tiles; kg and l for consumables when that option is enabled for your store). See Cart integration.

onBomUpdated(payload) gives you a live snapshot of the estimate, so your page can show something like "Tiles to order: 34" beside the widget:

onBomUpdated(payload) {
  console.log(payload); // areas, piece counts, boxes, consumables
}

onError(payload) carries a machine-readable reason you can pass along to your support team.

Handle methods

mount returns a handle:

Method	Description
setSku(sku)	Switches the active SKU without re-rendering the whole widget.
setLocale(locale)	Switches the UI language and reloads the frame.
setCurrency(currency)	Switches the display currency and reloads the frame.
exportBlueprint()	Tells the widget to download the current Blueprint PDF.
requestAddToCart()	Triggers Add to cart programmatically, same as the in-widget button.
destroy()	Removes the iframe and unsubscribes the listener. Call it when the widget is no longer needed, for example on single-page navigation.

const planner = ScalarcutTiling.mount('#sc-tiling', { widgetKey: 'YOUR_WIDGET_KEY' });

// Later, in response to a variant switch on your page:
planner.setSku('VARIANT_SKU');

// On navigation away:
planner.destroy();

Locale and currency reload, SKU does not

setLocale and setCurrency change the widget's own language and currency and reload the frame. setSku does not reload — it swaps the material in place and keeps the shopper's layout.

Errors

mount throws immediately if the target is missing, widgetKey is absent, or the embed origin cannot be determined. Wrap the call if your page renders the container conditionally:

try {
  ScalarcutTiling.mount('#sc-tiling', { widgetKey: 'YOUR_WIDGET_KEY' });
} catch (error) {
  console.warn('Scalarcut not mounted:', error.message);
}