Ideal House
Saltar al contenido

Integración para desarrolladores de tiendas personalizadas#

Cargue el SDK de ideal.house y asigne los valores de productCode de la tienda al Catálogo.

<!-- DASHBOARD_READINESS -->

Antes de cargar el SDK: Abra Panel de control → Configuración, agregue el origen de su tienda al campo Allowed Origins (CORS) y haga clic en Save. Incluya el nombre de dominio publicado y cualquier origen de vista previa o staging que utilice; separe múltiples orígenes con comas. Consulte los pasos de configuración.

1. Cargar el SDK#

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

2. Elegir un contrato de botón#

Opción A: botón generado por el SDK#

Renderice un contenedor destino. Tras la validación del producto, el SDK crea su botón hijo.

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

Opción B: botón creado por el desarrollador#

Renderice y estilice el botón usted mismo. El SDK preserva el DOM y vincula la elegibilidad además del comportamiento al hacer clic.

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

<PRODUCT_CODE>

  • El productCode del Catálogo y el data-product-code de la tienda deben ser idénticos, incluido el uso de mayúsculas y minúsculas.
  • No regenere el productCode a partir de un nombre mutable en cada renderizado; actualice el Catálogo y la tienda juntos cuando deba cambiar.

4. Manejar páginas dinámicas y productos seleccionados#

El SDK observa los destinos insertados después de la carga de la página. Su aplicación aún debe actualizar los atributos del destino y restablecer el estado antiguo del SDK cuando cambie el producto seleccionado.

Actualizar un botón creado por el desarrollador después de que cambie la selección#

js
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 la integración#

  1. El panel Network muestra sdk.js cargado con HTTP 200.
  2. El atributo data-product-code del destino coincidido coincide exactamente con el del Catálogo.
  3. Solo los productos elegibles muestran un botón generado o creado por el desarrollador.
  4. Los cambios dinámicos de producto actualizan el destino antes de que el cliente haga clic.
  5. Al hacer clic en el botón, se abre el Viewer de ideal.house con el producto seleccionado.
<!-- DASHBOARD_CONFIGURATION -->

Configuración avanzada#

Token de lanzamiento generado por el servidor#

Use este modo cuando su backend emita tokens de lanzamiento de corta duración. El Client Secret nunca debe aparecer en JavaScript del 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"}'

Tamaño personalizado del producto#

Proporcione ancho, alto y unidad en minúsculas (ft, in o cm) juntos en el elemento coincidido. El SDK lee los valores más recientes en el momento del clic.

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>