Aggiungi il widget al tuo negozio

Il widget è un iframe autonomo. Puoi aggiungerlo a una pagina in due modi. L'SDK è la via consigliata perché gestisce per te messaggistica, ridimensionamento e sincronizzazione del carrello.

SDK (consigliato)

L'SDK racchiude l'iframe e il protocollo postMessage in una piccola 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>

L'SDK ricava l'host di incorporamento dall'URL dello script stesso, quindi lo stesso snippet funziona in qualsiasi negozio e regione. Inoltre osserva il contenitore e mantiene l'altezza giusta del frame sia su desktop sia su mobile.

Iframe semplice

Se preferisci renderizzare l'iframe da solo, puntalo sull'URL del widget con i tuoi parametri:

<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>

Per la sincronizzazione del carrello l'SDK resta la scelta migliore, perché con un iframe grezzo ascolti tu stesso gli eventi postMessage del widget. Vedi Eventi.

Dimensioni

Il widget riempie la larghezza del suo contenitore e gestisce da sé la propria altezza.

• Desktop — l'SDK parte a 880 px di altezza e cresce automaticamente se l'interfaccia ha bisogno di più spazio.
• Mobile — il widget usa l'intera altezza del viewport, così canvas e pannello del preventivo restano comodi sul telefono.

Se vuoi un frame iniziale più basso, imposta height:

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

Posizionamento

Metti il widget nella pagina prodotto, sotto o accanto alla galleria. È legato a un singolo SKU, quindi appartiene là dove l'acquirente ha già scelto un prodotto — piastrella, laminato, LVT, lastra o parquet prefinito.

• Un SKU per montaggio. Se la pagina mostra varianti, passa lo SKU della variante scelta e chiama setSku quando cambia.
• Si carica in lazy. L'SDK imposta loading="lazy" sul frame, così la pagina resta veloce quando il widget è sotto la piega.
• Un widget per pagina basta. La stessa istanza gestisce pareti e pavimenti.

HTTPS

Il widget è servito in HTTPS e, in produzione, richiede una pagina madre in HTTPS. La tua chiave widget è legata alle origini che registri, quindi si carica solo sui tuoi domini — più dettagli in Sicurezza e licenze.