Integração Webflow#
Use o Código Personalizado e os campos CMS/Ecommerce do Webflow para renderizar botões Room Visualizer cujo Código do Produto corresponda ao catálogo ideal.house.
Status de verificação: documentação do Centro de Ajuda do Webflow revisada em 7 de setembro de 2026. Nenhum site do cliente no Webflow estava disponível. O código personalizado é executado após a prévia/publicação, e o Webflow não executa código do lado do servidor em um Embed, portanto teste no domínio de staging publicado.
Antes de carregar o SDK: abra Dashboard → Settings, adicione a origem da sua loja ao Allowed Origins (CORS) e clique em Save. Inclua o hostname publicado e quaisquer origens de pré-visualização ou staging que você utilize; separe múltiplas origens por vírgulas. Consulte as etapas de configuração.
Pré-requisitos e limites#
Você precisa de permissão para usar Custom Code ou Code Embed, um domínio de staging, a Shop ID, a Publishable Key e um SKU de catálogo importado. Os requisitos de plano do Webflow se aplicam a embeds JavaScript. O navegador pode conter uma Publishable Key, mas nunca uma Client Secret ou uma chave de AI API.
O SDK não lê o Ecommerce do Webflow automaticamente. Seu template deve expor o SKU, ou um adaptador do cliente deve derivá-lo a partir de um campo CMS confiável.
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>
data-product-code deve ser igual ao ideal.house sku importado exatamente.
Instale o carregador#
Abra Site settings → Custom code e adicione a tag de script do SDK na área de footer/final do body. Substitua os placeholders, salve e publique. Instale-o uma vez em nível de site; não o repita em cada item CMS.
A tela do Designer do Webflow pode não executar o script. Valide em um URL de staging de pré-visualização ou publicado e inspecione a fonte real da página.
Adicione um botão em nível de item#
Crie um campo de CMS de texto simples chamado, por exemplo, Idealhouse SKU. Preencha-o com o mesmo valor importado como ideal.house sku. No modelo de Produto ou de Coleção do CMS, adicione um Code Embed onde o botão deve ser inserido:
<div
data-idealhouse-button-container
data-product-code="[bind this attribute to the current item's Idealhouse SKU]"
></div>
Use o controle Add field do Webflow no editor de Embed para inserir o valor do item atual; a instrução entre colchetes acima não é markup literal de produção. Após publicar, inspecione o DOM e confirme que se tornou uma string normal como:
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
Para uma página estática, cole um SKU literal. Não use o slug da página nem o ID do item do Webflow, a menos que esse valor exato seja o SKU importado do ideal.house.
Variantes e renderização dinâmica#
O binding padrão do Designer do Webflow pode não expor um SKU de variante final para código personalizado arbitrário em todos os layouts de Ecommerce. Se cada opção visual precisar de um ativo diferente do ideal.house, construa um adaptador do cliente que receba a variante selecionada a partir de uma integração Webflow compatível ou da sua própria camada de dados, substituindo então o container:
function showIdealhouseVariant(host, sku) {
host.replaceChildren();
const code = typeof sku === 'string' ? sku.trim() : '';
if (!code) return;
const node = document.createElement('div');
node.dataset.idealhouseButtonContainer = '';
node.dataset.productCode = code;
host.append(node);
}
Este é código do cliente. Chame-o a partir de um callback documentado na ferramenta de variante que você realmente usa. Não extraia o texto de opção exibido nem pressuponha um evento Webflow não oficial.
Interações do Webflow, filtros CMS, paginação de terceiros e transições semelhantes a SPA podem adicionar ou substituir Collection Items. Inclua o Embed dentro de cada template de item ou invoque o bridge após o callback de renderização documentado pela ferramenta. Sempre crie um container novo em vez de clonar markup processado pelo SDK.
Importação de dados de catálogo#
Exporte seus campos de Produto/CMS do Webflow e mapeie Idealhouse SKU para sku. Envie por meio do Envio de produtos e siga as etapas de importar produtos, status do trabalho, listar produtos, atualizar produtos, excluir produto e Erros e novas tentativas.
Nenhuma sincronização automática do Webflow é fornecida pelo SDK do navegador. Qualquer exportação de API CMS, webhook ou automação é de responsabilidade do cliente.
Verificação e remoção#
Publique no staging e teste um item mapeado, campo ausente, SKU desconhecido, Collection List, template de produto, filtros/paginação, modal, breakpoint mobile, controles de consentimento e Back/Forward do navegador. Confirme que o SDK carrega uma vez, cada código renderizado corresponde ao item atual e nenhuma credencial do servidor aparece no HTML.
Para remover, exclua o Custom Code do SDK em nível de site e cada binding de Embed/botão, republice e limpe qualquer cache proxy/CDN. Confirme que a requisição do script e os elementos data-idealhouse-* tenham desaparecido do site publicado.