Ideal House
Naar inhoud gaan

Integratie met Webflow#

Gebruik eigen code en CMS-/webshopvelden in Webflow om Room Visualizer-knoppen weer te geven waarvan de productcode overeenkomt met de ideal.house-catalogus.

Verificatiestatus: De documentatie van het helpcentrum van Webflow is bekeken op 7 september 2026. Er was geen Webflow-site van een klant beschikbaar. Eigen code wordt na voorbeeldweergave of publicatie uitgevoerd en Webflow voert geen servercode uit in een insluiting; test daarom op het gepubliceerde testdomein.

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.

Vereisten en beperkingen#

Je hebt toestemming nodig voor eigen code of code-insluitingen, een testdomein, Shop ID, Publishable Key en één geïmporteerde catalogus-SKU. De abonnementsvereisten van Webflow gelden voor JavaScript-insluitingen. De browser mag een Publishable Key bevatten, maar nooit een Client Secret of AI API-sleutel.

De SDK leest de webshopgegevens van Webflow niet automatisch. Je sjabloon moet de SKU beschikbaar stellen, of een klantadapter moet deze uit een vertrouwd CMS-veld afleiden.

Minimaal SDK-contract#

html
<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 moet exact gelijk zijn aan de geïmporteerde ideal.house sku.

De loader installeren#

Open Site-instellingen → Eigen code en voeg de SDK-scripttag toe aan de voettekst of het einde van de paginabody. Vervang de tijdelijke waarden, sla op en publiceer. Installeer het script eenmaal op siteniveau; herhaal het niet voor elk CMS-item.

Het ontwerpcanvas van Webflow voert het script mogelijk niet uit. Valideer op een voorbeeld- of gepubliceerde test-URL en inspecteer de daadwerkelijke paginabron.

Een knop per item toevoegen#

Maak een CMS-veld voor platte tekst met bijvoorbeeld de naam Idealhouse SKU. Vul het met dezelfde waarde die als ideal.house sku is geïmporteerd. Voeg in het product- of CMS-collectiesjabloon een code-insluiting toe waar de knop hoort:

html
<div
  data-idealhouse-button-container
  data-product-code="[bind this attribute to the current item's Idealhouse SKU]"
></div>

Gebruik Veld toevoegen van Webflow in de insluitingseditor om de waarde van het huidige item in te voegen; de instructie tussen haken hierboven is geen letterlijke productiemarkering. Inspecteer na publicatie de DOM en controleer dat dit een gewone tekenreeks is geworden, zoals:

html
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

Plak voor een statische pagina een letterlijke SKU. Gebruik niet de paginaslug of de item-ID van Webflow, tenzij die exacte waarde de geïmporteerde ideal.house SKU is.

Varianten en dynamische weergave#

De standaardbinding in de ontwerper van Webflow stelt mogelijk niet in elke webshoplay-out een definitieve variant-SKU beschikbaar aan willekeurige eigen code. Als elke visuele optie een ander ideal.house-bestand nodig heeft, bouw dan een klantadapter die de geselecteerde variant ontvangt via een ondersteunde Webflow-integratie of je eigen gegevenslaag en vervolgens de container vervangt:

js
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);
}

Dit is code van de klant. Roep deze aan vanuit een gedocumenteerde callback in de varianttool die je daadwerkelijk gebruikt. Lees de weergegeven optietekst niet uit om de variant af te leiden en ga niet uit van een onofficiële Webflow-gebeurtenis.

Webflow-interacties, CMS-filters, externe paginering en SPA-achtige overgangen kunnen collectie-items toevoegen of vervangen. Neem de insluiting op in elk itemsjabloon of roep de koppeling aan na de gedocumenteerde weergavecallback van de tool. Maak altijd een nieuwe container in plaats van verwerkte SDK-markering te klonen.

Catalogusgegevens importeren#

Exporteer je product-/CMS-velden uit Webflow en koppel Idealhouse SKU aan sku. Upload via Producten uploaden en volg producten importeren, taakstatus, producten weergeven, producten bijwerken, product verwijderen en fouten en nieuwe pogingen.

De browser-SDK biedt geen automatische synchronisatie met Webflow. Elke CMS-API-export, webhook of automatisering wordt door de klant beheerd.

Controleren en verwijderen#

Publiceer naar de testomgeving en test een gekoppeld item, een ontbrekend veld, een onbekende SKU, een collectielijst, het productsjabloon, filters/paginering, een modaal venster, een mobiel breekpunt, toestemmingsinstellingen en de terug- en vooruitknoppen van de browser. Controleer dat de SDK eenmaal laadt, elke weergegeven code bij het huidige item hoort en er geen servertoegangsgegevens in HTML staan.

Verwijder de SDK-code op siteniveau en elke insluiting/knopbinding, publiceer opnieuw en wis eventuele proxy-/CDN-caches. Controleer dat het scriptverzoek en de data-idealhouse-*-elementen van de gepubliceerde site verdwenen zijn.

Officiële platformreferenties#