Ajouter le widget à votre boutique

Le widget est un iframe autonome. Vous pouvez l'ajouter à une page de deux façons. Le SDK est la voie recommandée, car il gère pour vous la messagerie, le redimensionnement et la synchronisation du panier.

SDK (recommandé)

Le SDK enveloppe l'iframe et le protocole postMessage dans une petite 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>

Le SDK déduit l'hôte d'intégration de l'URL du script lui-même, donc le même extrait fonctionne dans n'importe quelle boutique et région. Il surveille aussi le conteneur et maintient la bonne hauteur du cadre sur ordinateur comme sur mobile.

Iframe simple

Si vous préférez rendre l'iframe vous-même, pointez-le vers l'URL du widget avec vos paramètres :

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

Pour la synchronisation du panier, le SDK reste le meilleur choix, car avec un iframe brut vous écoutez vous-même les événements postMessage du widget. Voir Événements.

Dimensionnement

Le widget remplit la largeur de son conteneur et gère sa propre hauteur.

• Ordinateur — le SDK démarre à 880 px de haut et grandit automatiquement si l'interface a besoin de plus de place.
• Mobile — le widget utilise toute la hauteur de la fenêtre, pour que le canevas et le panneau de devis restent confortables sur téléphone.

Si vous voulez un cadre de départ plus court, définissez height :

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

Placement

Placez le widget sur la page produit, sous ou à côté de la galerie. Il est lié à un seul SKU, donc il appartient là où l'acheteur a déjà choisi un produit — carrelage, stratifié, LVT, dalle ou parquet contrecollé.

• Un SKU par montage. Si la page affiche des variantes, passez le SKU de la variante choisie et appelez setSku quand il change.
• Il se charge en différé. Le SDK met loading="lazy" sur le cadre, donc la page reste rapide quand le widget est sous la ligne de flottaison.
• Un widget par page suffit. La même instance gère murs et sols.

HTTPS

Le widget est servi en HTTPS et, en production, nécessite une page parent en HTTPS. Votre clé de widget est liée aux origines que vous enregistrez, donc elle ne se charge que sur vos domaines — plus de détails dans Sécurité et licences.