Quick start do SDK#

Adicione um ponto de entrada de visualização de produtos à storefront com um produto preparado antes de implantar em todo o seu catálogo.

1. Prepare a shop e o produto#

Selecione sua shop no Dashboard. Obtenha seu Shop ID e Publishable Key. Abra Dashboard → Settings, adicione a origem da sua storefront a Allowed Origins (CORS) e clique em Save. Certifique-se de que pelo menos um produto está pronto para visualização. Se você fizer o import pelo backend, siga a Product Import API e inspecione o resultado final do job.

2. Escolha o guia de plataforma#

Use Shopify para themes Liquid, WooCommerce para storefronts WooCommerce, ou storefront personalizada para o seu próprio site. Mais guias de plataforma estão listados na visão geral do SDK.

3. Carregue o SDK uma única vez#

Para uma storefront personalizada, carregue este script uma vez na página host. Substitua ambos os placeholders por valores da mesma shop.

html

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="YOUR_SHOP_ID"
  data-publishable-key="YOUR_PUBLISHABLE_KEY"
  async
></script>

4. Renderize um target correspondente#

Use o código do produto exato do seu catálogo preparado. Este exemplo solicita ao SDK que crie o botão após a validação do produto.

html

<div data-idealhouse-button-container data-product-code="YOUR_PRODUCT_CODE"></div>

Um target sozinho não comprova que o produto é elegível. Confirme a variant selecionada, a prontidão do produto e o Mapeamento de identificadores.

5. Teste a jornada do cliente#

Verifique se o sdk.js carrega com sucesso, se o botão correto aparece e se um clique abre o Viewer com o produto pretendido. Altere variantes, navegue até outro produto e repita no celular. Complete a Lista de verificação de lançamento antes de publicar.