Integração para desenvolvedores de storefront personalizado#

Carregue o ideal.house SDK e mapeie os valores de productCode do storefront para o Catalog.

Antes de carregar o SDK: Abra Dashboard → Settings, adicione a origem do seu storefront em Allowed Origins (CORS) e clique em Save. Inclua o hostname publicado e quaisquer origens de pré-visualização ou staging que você use; separe várias origens com vírgulas. Veja as etapas de configuração.

1. Carregar o SDK#

html

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

2. Escolha um dos contratos de botão#

Opção A: botão gerado por SDK#

Renderize um contêiner de destino. Após a validação do produto, o SDK cria o botão filho.

html

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

Opção B: botão desenvolvido#

Renderize e estile o botão você mesmo. O SDK preserva o DOM e vincula elegibilidade e comportamento de clique.

html

<button
  type="button"
  data-idealhouse-authored-button
  data-product-code="<PRODUCT_CODE>"
  style="visibility: hidden;"
>
  View in my room
</button>

3. Manter productCode idêntico ao Catalog#

<PRODUCT_CODE>

O productCode do Catalog e o data-product-code do storefront devem ser idênticos, incluindo capitalização.
Não regenere productCode a partir de um nome mutável a cada renderização; atualize o Catalog e o storefront juntos quando necessário.

4. Lidar com páginas dinâmicas e produtos selecionados#

O SDK observa alvos inseridos após o carregamento da página. Sua aplicação ainda deve atualizar os atributos do alvo e resetar o estado antigo do SDK quando o produto selecionado mudar.

Atualizar um botão desenvolvido após a mudança de seleção#

const button = document.querySelector('[data-idealhouse-authored-button]')

function selectProduct(product) {
  button.dataset.productCode = product.productCode
  button.dataset.active = 'false'
  button.style.visibility = 'hidden'

  delete button.dataset.rvProductCode
  delete button.dataset.rvProductType
  delete button.dataset.rvProductId
  delete button.dataset.rvProductIds
}

5. Verificar a integração#

O painel Network mostra sdk.js carregado com HTTP 200.
O target correspondente data-product-code deve corresponder exatamente ao do Catalog.
Somente produtos elegíveis exibem um botão gerado ou desenvolvido.
Alterações dinâmicas de produto atualizam o alvo antes do clique do cliente.
Clicar no botão abre o ideal.house Viewer com o produto selecionado.

Configuração avançada#

Token de launch gerado pelo servidor#

Use este modo quando seu backend emitir tokens de launch de curta duração. Client Secret nunca deve aparecer em JavaScript do navegador.

html

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-launch-token="<SERVER_GENERATED_LAUNCH_TOKEN>"
  async
></script>

bash

# Run on your server. Never expose CLIENT_SECRET in browser JavaScript.
curl -X POST "<IDEALHOUSE_API_URL>/shops/<SHOP_ID>/sdk-launch-token" \
  -H "Content-Type: application/json" \
  -H "x-client-id: <CLIENT_ID>" \
  -H "x-client-secret: <CLIENT_SECRET>" \
  -d '{"origin":"https://your-store.example"}'

Tamanho de produto personalizado#

Forneça largura, altura e unidade em minúsculas (ft, in ou cm) juntos no elemento correspondido. O SDK lê os valores mais recentes no momento do clique.

html

<button
  data-idealhouse-authored-button
  data-product-code="<PRODUCT_CODE>"
  data-product-width="8"
  data-product-height="10"
  data-product-size-unit="ft"
  style="visibility: hidden;"
>View in my room</button>