Añade el widget a tu tienda

El widget es un iframe autocontenido. Puedes añadirlo a una página de dos formas. El SDK es la vía recomendada porque se encarga por ti de la mensajería, el redimensionado y la sincronización del carrito.

SDK (recomendado)

El SDK envuelve el iframe y el protocolo postMessage en una API pequeña:

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

El SDK deduce el host de integración de la propia URL del script, así que el mismo fragmento funciona en cualquier tienda y región. También vigila el contenedor y mantiene la altura correcta del frame tanto en escritorio como en móvil.

Iframe simple

Si prefieres renderizar el iframe tú mismo, apúntalo a la URL del widget con tus parámetros:

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

Para la sincronización del carrito el SDK sigue siendo la mejor opción, porque con un iframe crudo escuchas tú mismo los eventos postMessage del widget. Mira Eventos.

Tamaño

El widget llena el ancho de su contenedor y gestiona su propia altura.

• Escritorio — el SDK arranca con 880 px de alto y crece automáticamente si la interfaz necesita más espacio.
• Móvil — el widget usa toda la altura del viewport, para que el lienzo y el panel de presupuesto resulten cómodos en el teléfono.

Si quieres un frame inicial más corto, define height:

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

Ubicación

Pon el widget en la página de producto, debajo o junto a la galería. Está ligado a un único SKU, así que pertenece allí donde el comprador ya ha elegido un producto — azulejo, laminado, LVT, losa o tarima multicapa.

• Un SKU por montaje. Si la página muestra variantes, pasa el SKU de la variante elegida y llama a setSku cuando cambie.
• Carga diferida. El SDK pone loading="lazy" en el frame, así que la página se mantiene rápida cuando el widget queda bajo el pliegue.
• Un widget por página es suficiente. La misma instancia maneja paredes y suelos.

HTTPS

El widget se sirve por HTTPS y, en producción, necesita una página padre por HTTPS. Tu clave de widget está ligada a los orígenes que registras, así que solo carga en los dominios que te pertenecen — más sobre esto en Seguridad y licencias.