Integración de Webflow#
Usa el Código Personalizado de Webflow y los campos CMS/Ecommerce para renderizar botones de Room Visualizer cuyo código de producto coincida con el catálogo de ideal.house.
Estado de verificación: documentación del Centro de Ayuda de Webflow revisada el 7 de septiembre de 2026. No había ningún sitio de Webflow de cliente disponible. El código personalizado se ejecuta después de la vista previa/publicación y Webflow no ejecuta código del lado del servidor en un Embed, así que prueba el dominio de staging publicado.
Antes de cargar el SDK: Abre Panel de control → Configuración, añade el origen de tu tienda a Allowed Origins (CORS) y haz clic en Guardar. Incluye el hostname publicado y cualquier origen de vista previa o staging que uses; separa múltiples orígenes con comas. Consulta pasos de configuración.
Requisitos previos y límites#
Necesitas permiso para usar Código Personalizado o Embed de Código, un dominio de staging, Shop ID, Publishable Key y una SKU de catálogo importada. Los requisitos del plan de Webflow se aplican a los embeds de JavaScript. El navegador puede contener un Publishable Key, pero nunca una clave de Client Secret o AI API.
El SDK no lee automáticamente el Ecommerce de Webflow. Tu plantilla debe exponer la SKU, o un adaptador del cliente debe derivarla de un campo CMS confiable.
Contrato mínimo del 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 debe ser exactamente igual a la sku importada de ideal.house.
Instalar el cargador#
Abre Configuración del sitio → Código personalizado y agrega la etiqueta de script del SDK en el área de pie de página/final del cuerpo. Reemplaza los marcadores de posición, guarda y publica. Instálalo una sola vez a nivel de sitio; no lo repitas en cada elemento CMS.
El lienzo de diseño de Webflow puede no ejecutar el script. Valide en un dominio de staging en vista previa o publicado como URL e inspeccione el código fuente real de la página.
Agregar un botón a nivel de elemento#
Crea un campo CMS de texto plano llamado, por ejemplo, Idealhouse SKU. Rellénalo con el mismo valor importado como sku de ideal.house. En la plantilla de Producto o de Colección CMS, agrega un bloque Code Embed donde corresponda el botón:
<div
data-idealhouse-button-container
data-product-code="[bind this attribute to the current item's Idealhouse SKU]"
></div>
Usa el control Agregar campo de Webflow en el editor de Insertar para agregar el valor del elemento actual; la instrucción entre corchetes anterior no es marcado de producción literal. Después de publicar, inspecciona el DOM y confirma que se convirtió en una cadena normal como:
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
Para una página estática, pega un literal de SKU. No uses el slug de la página ni el ID de elemento de Webflow, salvo que ese valor exacto sea la SKU importada de ideal.house.
Variantes y renderizado dinámico#
El enlace Designer estándar de Webflow puede no exponer una SKU de variante final al código personalizado arbitrario en todos los diseños de Ecommerce. Si cada opción visual necesita un activo diferente de ideal.house, construye un adaptador del cliente que reciba la variante seleccionada desde una integración de Webflow compatible o desde tu propia capa de datos, y luego reemplace el contenedor:
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 es código del cliente. Llámalo desde una devolución de llamada documentada en la herramienta de variantes que realmente uses. No extraigas texto de opciones mostradas ni supongas un evento Webflow no oficial.
Las interacciones de Webflow, los filtros CMS, la paginación de terceros y las transiciones tipo SPA pueden agregar o reemplazar Elementos de colección. Incluye el Insertar dentro de cada plantilla de elemento, o invoca el puente después de la devolución de llamada documentada de renderizado de la herramienta. Crea siempre un contenedor nuevo en lugar de clonar el marcado del SDK ya procesado.
Importar datos del catálogo#
Exporta tus campos Producto/CMS de Webflow y mapea el valor de campo Idealhouse SKU al campo sku. Sube a través de Carga de productos y sigue importar productos, estado del trabajo, listar productos, actualizar productos, eliminar producto y errores y reintentos.
No se proporciona sincronización automática de Webflow mediante el SDK del navegador. Cualquier exportación de API de CMS, webhook o automatización es propiedad del cliente.
Verificar y eliminar#
Publica en staging y prueba un elemento relacionado, un campo faltante, una SKU desconocida, una Lista de colecciones, una plantilla de producto, filtros/paginación, modal, punto de quiebre móvil, controles de consentimiento y atrás/adelante del navegador. Confirma que el SDK se cargue una sola vez, que cada código renderizado coincida con el elemento actual y que ninguna credencial del servidor aparezca en el HTML.
Para eliminar, borra el Código personalizado del SDK a nivel de sitio y cada enlace de Insertar/botón, vuelve a publicar y limpia cualquier cache de proxy/CDN. Confirma que la solicitud del script y los elementos data-idealhouse-* estén ausentes del sitio publicado.