Integración de Squarespace#
Instala Room Visualizer en Squarespace con Inyección de Código y coloca contenedores específicos para cada producto donde el editor de páginas permita código personalizado.
Estado de verificación: documentación del Centro de ayuda de Squarespace revisada el 7 de septiembre de 2026. No había un sitio de cliente de Squarespace disponible. La Inyección de Código y los Bloques de Código JavaScript requieren planes elegibles; el código personalizado queda fuera del soporte de Squarespace, y la carga Ajax puede afectarlo.
Antes de cargar el SDK: abre Panel de control → Configuración, añade tu origen de tienda en línea a Allowed Origins (CORS) y haz clic en Save. Incluye el hostname publicado y cualquier origen de vista previa o staging que utilices; separa varios orígenes con comas. Consulta pasos de configuración.
Alcance y requisitos previos#
Esta vía es más práctica para catálogos pequeños con páginas de producto estables, o para sitios donde controlas una capa de datos de código de producto explícita. Necesitas un plan elegible, acceso de propietario del sitio, Shop ID, Publishable Key y SKUs de ideal.house importados.
Squarespace no ofrece una extensión ideal.house en esta guía. Su editor de producto estándar no garantiza un JavaScript API público estable para el SKU de variante seleccionado, por lo que la coincidencia a nivel de variante requiere trabajo del adaptador del cliente y puede no ser práctica en todas las plantillas.
Contrato mínimo de 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>
El código de producto debe coincidir exactamente con el sku del catálogo importado. No uses un Client Secret en Inyección de Código.
Instalar el cargador#
Abre Website → Pages → Custom Code → Code Injection (la etiqueta puede variar según la versión del sitio). Pega el SDK <script> en Footer, reemplaza ambas marcas de posición y guarda. La inyección en Footer se ejecuta en las páginas del sitio antes de </body>; las páginas de pago no admiten código inyectado.
Instala el cargador solo una vez. Si otra integración ya lo añadió, elimina el duplicado.
Colocar un botón de producto#
Donde el editor de páginas permita un Bloque de Código habilitado para JavaScript, coloca:
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
Usa el SKU de ese producto exacto. En Squarespace 7.1, las plantillas Store/Product Details pueden no aceptar bloques arbitrarios en el área principal de información del producto. Un recurso práctico es una página de layout normal con un Product Block más un Code Block adyacente, un par por producto. Confirma que la página de tienda permanezca habilitada porque los Product Blocks dependen de ella.
Para catálogos más grandes, un desarrollador puede inyectar contenedores haciendo coincidir un mapeo estable de propiedad del cliente, como la ruta URL con el SKU:
const skuByPath = {
'/shop/oak-chair': 'CHAIR-OAK-01',
'/shop/walnut-chair': 'CHAIR-WALNUT-01'
};
function renderForPath() {
const host = document.querySelector('[data-idealhouse-host]');
const sku = skuByPath[location.pathname];
if (!host) return;
host.replaceChildren();
if (!sku) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = sku;
host.append(container);
}
El mapeo URL, la inserción del host y el callback de navegación son código del cliente. No extraigas el estado privado de Squarespace ni asumas que su forma es estable.
Variantes, vista rápida y carga Ajax#
Si un producto Squarespace tiene varias variantes con activos visuales de ideal.house diferentes, muestra solo un botón después de que tu adaptador pueda identificar el SKU de la variante seleccionada desde una fuente compatible. Sustituye el contenedor antiguo por uno limpio en cada cambio. Si no existe un controlador/callback de selección o una fuente de datos compatible, usa un único SKU a nivel de producto solo cuando todas las variantes compartan el mismo activo visual, o bien omite el botón.
Quick View, Product Blocks y la carga Ajax de páginas pueden reemplazar el contenido de la página. Squarespace advierte que la carga Ajax puede entrar en conflicto con código personalizado. Prueba la plantilla exacta; si fuera necesario, deshabilita la carga Ajax o llama a renderForPath() desde un mecanismo de navegación que controles. Un MutationObserver es un adaptador de último recurso del cliente y debe limitarse a la región del producto.
Importar datos de producto#
Mantén una tabla de SKU de producto/variante de Squarespace a sku de ideal.house y luego usa Carga de productos. El flujo público completo está documentado en Importar productos, Estado del trabajo, Listar productos, Actualizar productos, Eliminar producto y Errores y reintentos.
El SDK del navegador no sincroniza productos de Squarespace. Cualquier exportación, webhook o trabajo programado de Commerce API es de propiedad del cliente.
Verificar y quitar#
Prueba el sitio publicado en una ventana privada porque la edición con sesión iniciada puede suprimir el código personalizado. Comprueba un producto mapeado, un SKU faltante, un SKU desconocido, Product Blocks, Quick View, navegación Ajax, Back/Forward del navegador, diseño móvil, consentimiento de cookies y exclusión de pago. Confirma una solicitud SDK exitosa y la igualdad exacta de Product Code/SKU.
Para quitarlo, elimina la inyección en Footer y todos los Code Blocks/hosts/scripts de mapeo, guarda y vacía las cachés. Verifica que la página publicada no tenga ninguna solicitud SDK ni elemento data-idealhouse-*.