Integratie met Squarespace#
Installeer Room Visualizer op Squarespace via code-invoeging en plaats productspecifieke containers waar de pagina-editor eigen code toestaat.
Verificatiestatus: De documentatie van het helpcentrum van Squarespace is bekeken op 7 september 2026. Er was geen Squarespace-site van een klant beschikbaar. Code-invoeging en JavaScript-codeblokken vereisen een geschikt abonnement; eigen code valt buiten de ondersteuning van Squarespace en kan door Ajax-laden worden beïnvloed.
Voordat je de SDK laadt: Open Dashboard → Instellingen, voeg de oorsprong van je webshop toe aan Allowed Origins (CORS) en klik op Opslaan. Neem de gepubliceerde hostnaam en alle gebruikte oorsprongen van voorbeeld- of testomgevingen op; scheid meerdere oorsprongen met komma's. Zie de configuratiestappen.
Toepassingsgebied en vereisten#
Deze aanpak is het praktischst voor een kleine catalogus met stabiele productpagina's of een site waarvan je een expliciete productcodegegevenslaag beheert. Je hebt een geschikt abonnement, toegang als site-eigenaar, Shop ID, Publishable Key en geïmporteerde ideal.house-SKUs nodig.
Squarespace biedt in deze handleiding geen ideal.house-uitbreiding. De standaardproducteditor garandeert geen stabiele openbare JavaScript-API voor de geselecteerde variant-SKU. Koppeling op variantniveau vereist daarom adapterwerk van de klant en is mogelijk niet praktisch voor elk sjabloon.
Minimaal SDK-contract#
<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>
De productcode moet exact overeenkomen met de geïmporteerde catalogus-sku. Gebruik geen Client Secret bij code-invoeging.
De loader installeren#
Open Website → Pagina's → Eigen code → Code-invoeging; de naam kan per siteversie verschillen. Plak de SDK <script> in Voettekst, vervang beide tijdelijke waarden en sla op. Voettekstcode wordt op sitepagina's vóór </body> uitgevoerd; afrekenpagina's ondersteunen geen ingevoegde code.
Installeer de loader slechts eenmaal. Verwijder het duplicaat als een andere integratie deze al heeft toegevoegd.
Een productknop plaatsen#
Plaats het volgende waar de pagina-editor een codeblok met JavaScript toestaat:
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
Gebruik de SKU van dat exacte product. In Squarespace 7.1 accepteren winkel-/productdetaillay-outs mogelijk geen willekeurige blokken in het hoofdgebied voor productinformatie. Een praktisch alternatief is een gewone lay-outpagina met een productblok en daarnaast een codeblok, één paar per product. Controleer dat de winkelpagina ingeschakeld blijft, want productblokken zijn daarvan afhankelijk.
Voor grotere catalogi kan een ontwikkelaar containers invoegen op basis van een stabiele koppeling die de klant beheert, zoals een URL-pad naar een 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);
}
De URL-koppeling, het invoegen van de container en de navigatiecallback zijn code van de klant. Lees geen interne Squarespace-toestand uit en neem niet aan dat de structuur daarvan stabiel is.
Varianten, snelweergaven en Ajax-laden#
Als één Squarespace-product meerdere varianten met verschillende ideal.house-bestanden heeft, toon dan pas een knop wanneer je adapter de geselecteerde variant-SKU uit een ondersteunde bron kan bepalen. Vervang bij elke wijziging de oude container door een schone. Als er geen ondersteunde selectiecallback of gegevensbron is, gebruik dan alleen één gedeelde SKU op productniveau wanneer alle varianten hetzelfde visuele bestand delen, of laat de knop weg.
Snelweergaven, productblokken en Ajax-paginaladen kunnen pagina-inhoud vervangen. Squarespace waarschuwt dat Ajax-laden conflicten kan veroorzaken met eigen code. Test het exacte sjabloon; schakel zo nodig Ajax-laden uit of roep renderForPath() aan vanuit een navigatiemechanisme dat je zelf beheert. Een MutationObserver is een laatste redmiddel als klantadapter en moet tot het productgebied worden beperkt.
Productgegevens importeren#
Onderhoud een tabel die product-/variant-SKU uit Squarespace koppelt aan ideal.house sku en gebruik vervolgens Producten uploaden. De volledige openbare werkwijze staat onder producten importeren, taakstatus, producten weergeven, producten bijwerken, product verwijderen en fouten en nieuwe pogingen.
De browser-SDK synchroniseert geen Squarespace-producten. Elke Commerce-API-export, webhook of geplande taak wordt door de klant beheerd.
Controleren en verwijderen#
Test de gepubliceerde site in een privévenster, omdat bewerken terwijl je bent aangemeld eigen code kan onderdrukken. Controleer één gekoppeld product, één ontbrekende SKU, één onbekende SKU, productblokken, snelweergaven, Ajax-navigatie, de terug- en vooruitknoppen van de browser, mobiele lay-out, cookietoestemming en uitsluiting van afrekenpagina's. Controleer één succesvol SDK-verzoek en exacte gelijkheid tussen productcode en SKU.
Verwijder de voettekstcode en alle codeblokken, containers en koppelingsscripts, sla op en wis caches. Controleer dat de gepubliceerde pagina geen SDK-verzoek of data-idealhouse-*-element bevat.