Integração com Squarespace#
Instale o Room Visualizer no Squarespace com Injeção de Código e coloque contêineres específicos do produto onde o editor de página permitir código personalizado.
Status de verificação: Documentação da Central de Ajuda da Squarespace revisada em 7 de setembro de 2026. Nenhum site Squarespace de cliente estava disponível. Injeção de Código e Blocos de Código JavaScript exigem planos elegíveis, código personalizado fica fora do suporte da Squarespace, e o carregamento Ajax pode afetá-lo.
Antes de carregar o SDK: abra Dashboard → Settings, adicione a origem do storefront ao Allowed Origins (CORS) e clique em Save. Inclua o hostname publicado e quaisquer origens de preview ou staging que você use; separe várias origens com vírgulas. Consulte Etapas de configuração.
Escopo e pré-requisitos#
Este caminho é mais prático para um catálogo pequeno com páginas de produto estáveis ou um site onde você controla uma camada de dados explícita de código de produto. Você precisa de um plano elegível, acesso de proprietário do site, Shop ID, Publishable Key e SKUs do ideal.house importados.
O Squarespace não fornece uma extensão ideal.house neste guia. Seu editor padrão de produto não garante um JavaScript API público estável para o SKU variante selecionado, então o pareamento em nível de variante requer adaptação do cliente e pode não ser prático em todos os templates.
Contrato mínimo do SDK#
<script
src="https://sdk.ideal.house/sdk.js"
data-shop-id="<SHOP_ID>"
data-publishable-key="<PUBLISHABLE_KEY>"
async
></script>
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
O Product Code deve corresponder exatamente ao sku do catálogo importado. Não use um Client Secret na Injeção de Código.
Instalar o loader#
Abra Website → Pages → Custom Code → Code Injection (o rótulo pode variar conforme a versão do site). Cole o SDK <script> no Footer, substitua ambos os placeholders e salve. A injeção no Footer é executada nas páginas do site antes do </body>; páginas de checkout não suportam código injetado.
Instale o loader apenas uma vez. Se outra integração já o tiver adicionado, remova o duplicado.
Colocar um botão de produto#
Onde o editor de página permitir um Bloco de Código habilitado para JavaScript, insira:
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
Use o SKU daquele produto exato. No Squarespace 7.1, layouts de Store/Product Details podem não aceitar blocos arbitrários na área principal de informações do produto. Um fallback prático é uma página de layout normal com um Product Block mais um Code Block adjacente, um par por produto. Confirme que a página da loja permaneça habilitada, pois os Product Blocks dependem dela.
Para catálogos maiores, um desenvolvedor pode injetar contêineres correspondendo um mapeamento estável e de propriedade do cliente, como caminho de URL para SKU:
const skuByPath = {
'/shop/oak-chair': 'CHAIR-OAK-01',
'/shop/walnut-chair': 'CHAIR-WALNUT-01'
};
function renderForPath() {
const host = document.querySelector('[data-idealhouse-host]');
const sku = skuByPath[location.pathname];
if (!host) return;
host.replaceChildren();
if (!sku) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = sku;
host.append(container);
}
O mapeamento de URL, inserção de host e callback de navegação são código do cliente. Não extraia estado privado do Squarespace nem suponha que sua forma seja estável.
Variantes, quick view e carregamento Ajax#
Se um produto do Squarespace tiver várias variantes com ativos ideal.house diferentes, mostre um botão apenas após seu adapter conseguir identificar o SKU da variante selecionada a partir de uma fonte compatível. Substitua o contêiner antigo por um limpo em cada alteração. Se não existir callback ou fonte de dados de seleção compatível, use apenas um SKU compartilhado em nível de produto quando todas as variantes compartilharem o mesmo ativo visual, ou omita o botão.
Quick View, Product Blocks e carregamento Ajax de páginas podem substituir conteúdo da página. O Squarespace alerta que o carregamento Ajax pode conflitar com código personalizado. Teste o template exato; se necessário, desative o carregamento Ajax ou chame renderForPath() a partir de um mecanismo de navegação sob seu controle. Um MutationObserver é um último recurso para adaptação do cliente e deve ser limitado à região do produto.
Importar dados de produto#
Mantenha uma tabela de Squarespace produto/variante SKU para ideal.house sku e, em seguida, use Envio de produtos. O fluxo público completo está documentado em Importar produtos, Status da tarefa, Listar produtos, Atualizar produtos, Excluir produto e Erros e novas tentativas.
O SDK do navegador não sincroniza produtos do Squarespace. Qualquer exportação da Commerce API, webhook ou job agendado é de propriedade do cliente.
Verificar e remover#
Teste o site publicado em uma janela privativa, pois a edição logada pode suprimir código personalizado. Verifique um produto mapeado, um SKU ausente, um SKU desconhecido, Product Blocks, Quick View, navegação Ajax, Back/Forward do navegador, layout móvel, consentimento de cookies e exclusão de checkout. Confirme uma solicitação de SDK bem-sucedida e exata igualdade entre Product Code e SKU.
Para remover, exclua a injeção no Footer e todos os Code Blocks/hosts/scripts de mapeamento, salve e limpe caches. Verifique se a página publicada não possui solicitação de SDK nem elemento data-idealhouse-*.