Inicio rápido del SDK#

Añade un punto de entrada para la visualización de productos en un storefront con un producto preparado antes de generalizarlo en todo tu catálogo.

1. Preparar la tienda y el producto#

Selecciona tu tienda en el Panel de control. Obtén su Shop ID y Publishable Key. Abre Panel de control → Configuración, añade el origen de tu storefront a Allowed Origins (CORS) y haz clic en Save. Asegúrate de que al menos un producto esté listo para visualización. Si importas desde tu backend, sigue la guía de la Product Import API e inspecciona el resultado final del trabajo.

2. Elegir la guía de plataforma#

Usa Shopify para temas Liquid, WooCommerce para storefronts WooCommerce, o tienda en línea personalizada para tu propio sitio. Más guías de plataforma están listadas en la panorámica del SDK.

3. Cargar el SDK una vez#

Para un storefront personalizado, carga este script una sola vez en la página anfitriona. Reemplaza ambos marcadores con valores de la misma tienda.

html

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

4. Renderizar un target coincidente#

Usa el código exacto del producto de tu catálogo preparado. Este ejemplo solicita al SDK que cree el botón tras la validación del producto.

html

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

Un target solo no demuestra que el producto sea elegible. Confirma la variante seleccionada, la preparación del producto y el mapeo de identificadores.

5. Probar el recorrido del cliente#

Comprueba que sdk.js carga correctamente, que aparece el botón correcto y que un clic abre el Viewer con el producto pretendido. Cambia variantes, navega a otro producto y repite en móvil. Completa la lista de verificación de lanzamiento antes de publicar.