Adicione o widget à sua loja

O widget é um iframe autocontido. Pode adicioná-lo a uma página de duas formas. O SDK é o caminho recomendado porque trata por si da troca de mensagens, do redimensionamento e da sincronização do carrinho.

SDK (recomendado)

O SDK embrulha o iframe e o protocolo postMessage numa API pequena:

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

O SDK deduz o host de incorporação do próprio URL do script, pelo que o mesmo trecho funciona em qualquer loja e região. Também vigia o contentor e mantém a altura certa do frame tanto em desktop como em mobile.

Iframe simples

Se preferir renderizar o iframe por si, aponte-o para o URL do widget com os seus 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 a sincronização do carrinho o SDK continua a ser a melhor escolha, porque com um iframe simples ouve você mesmo os eventos postMessage do widget. Veja Eventos.

Tamanho

O widget preenche a largura do seu contentor e gere a própria altura.

• Desktop — o SDK começa com 880 px de altura e cresce automaticamente se a interface precisar de mais espaço.
• Mobile — o widget usa toda a altura do viewport, para que o canvas e o painel de orçamento fiquem confortáveis no telemóvel.

Se quiser um frame inicial mais baixo, defina height:

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

Posicionamento

Coloque o widget na página de produto, por baixo ou ao lado da galeria. Está ligado a um único SKU, pelo que pertence onde o comprador já escolheu um produto — azulejo, laminado, LVT, placa ou madeira engenheirada.

• Um SKU por montagem. Se a página mostrar variantes, passe o SKU da variante escolhida e chame setSku quando mudar.
• Carrega em diferido. O SDK define loading="lazy" no frame, pelo que a página continua rápida quando o widget fica abaixo da dobra.
• Um widget por página é suficiente. A mesma instância trata de paredes e chãos.

HTTPS

O widget é servido por HTTPS e, em produção, precisa de uma página mãe por HTTPS. A sua chave de widget está ligada às origens que regista, pelo que só carrega nos seus domínios — mais em Segurança e licenciamento.