Webflow-Integration#
Verwenden Sie Webflow Custom Code sowie CMS-/E-Commerce-Felder, um Room Visualizer-Buttons zu rendern, deren Product Code mit dem ideal.house-Katalog übereinstimmt.
Überprüfungsstatus: Die Dokumentation des Webflow-Hilfecenters wurde am 7. September 2026 geprüft. Es stand keine Webflow-Website eines Kunden zur Verfügung. Benutzerdefinierter Code wird nach Vorschau oder Veröffentlichung ausgeführt; Webflow führt in einem Embed keinen serverseitigen Code aus. Testen Sie daher die veröffentlichte Staging-Domain.
Vor dem Laden des SDK: Öffnen Sie Dashboard → Einstellungen, fügen Sie den Origin Ihres Onlineshops zu Allowed Origins (CORS) hinzu und klicken Sie auf Speichern. Berücksichtigen Sie den veröffentlichten Hostnamen sowie alle verwendeten Vorschau- oder Staging-Origins; trennen Sie mehrere Origins durch Kommas. Siehe Konfigurationsschritte.
Voraussetzungen und Grenzen#
Sie benötigen die Berechtigung für Custom Code oder Code Embed, eine Staging-Domain, Shop ID, Publishable Key und eine importierte Katalog-SKU. Für JavaScript-Einbettungen gelten die Anforderungen des jeweiligen Webflow-Tarifs. Der Browser darf einen Publishable Key enthalten, aber niemals einen Client Secret oder einen AI API-Schlüssel.
Das SDK liest Webflow E-Commerce nicht automatisch. Ihre Vorlage muss die SKU exponieren, oder ein Kundenadapter muss sie aus einem vertrauenswürdigen CMS-Feld ableiten.
Minimale SDK-Schnittstelle#
<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 muss exakt dem importierten ideal.house-sku entsprechen.
Loader installieren#
Öffnen Sie Website-Einstellungen → Benutzerdefinierter Code und fügen Sie das SDK-Skript-Tag im Footer am Ende des Body-Bereichs ein. Ersetzen Sie die Platzhalter, speichern Sie und veröffentlichen Sie die Website. Installieren Sie es einmal auf Website-Ebene, nicht erneut in jedem CMS-Element.
Die Webflow Designer-Leinwand führt das Skript möglicherweise nicht aus. Validieren Sie auf einer Vorschau- oder veröffentlichten Staging-URL und inspizieren Sie die tatsächliche Seitenquelle.
Eine Schaltfläche auf Elementebene hinzufügen#
Erstellen Sie ein Plain-Text-CMS-Feld mit dem Namen beispielsweise Idealhouse SKU. Füllen Sie es mit demselben Wert, der als ideal.house-sku importiert wurde. Fügen Sie in der Produkt- oder CMS-Collection-Vorlage an der gewünschten Schaltflächenposition ein Code Embed hinzu:
<div
data-idealhouse-button-container
data-product-code="[bind this attribute to the current item's Idealhouse SKU]"
></div>
Verwenden Sie im Embed-Editor die Webflow-Funktion Feld hinzufügen, um den Wert des aktuellen Elements einzufügen. Die oben in Klammern stehende Anweisung ist kein wörtlich zu übernehmendes Produktions-Markup. Prüfen Sie nach der Veröffentlichung im DOM, dass daraus eine normale Zeichenfolge wie diese geworden ist:
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
Fügen Sie auf einer statischen Seite die SKU als festen Wert ein. Verwenden Sie weder den Seiten-Slug noch die Webflow-Element-ID, sofern dieser exakte Wert nicht der importierten ideal.house-SKU entspricht.
Varianten und dynamisches Rendern#
Die Standard-Designer-Bindung von Webflow bietet unter Umständen keine finale Variante SKU für beliebigen benutzerdefinierten Code in jedem E-Commerce-Layout. Wenn jede visuelle Option ein anderes ideal.house-Asset benötigt, erstellen Sie einen Kundenadapter, der die ausgewählte Variante aus einer unterstützten Webflow-Integration oder Ihrer eigenen Datenschicht empfängt und anschließend den Container ersetzt:
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);
}
Dies ist kundenseitiger Code. Rufen Sie ihn über einen dokumentierten Callback des tatsächlich verwendeten Variantenwerkzeugs auf. Lesen Sie keine angezeigten Optionstexte automatisiert aus und setzen Sie kein inoffizielles Webflow-Ereignis voraus.
Webflow-Interaktionen, CMS-Filter, Drittanbieter-Paginierung und SPA-ähnliche Übergänge können Collection Items hinzufügen oder ersetzen. Fügen Sie das Embed in jede Elementvorlage ein oder rufen Sie die Brücke nach dem dokumentierten Render-Callback des Tools auf. Erstellen Sie stets einen frischen Container statt verarbeitetes SDK-Markup zu klonen.
Katalogdaten importieren#
Exportieren Sie Ihre Webflow Produkt-/CMS-Felder und ordnen Sie Idealhouse SKU sku zu. Laden Sie den Upload über Produkt-Upload hoch und folgen Sie Produkte importieren, Auftragsstatus, Produkte auflisten, Produkte aktualisieren, Produkt löschen und Fehler & Wiederholungen.
Kein automatischer Webflow-Sync wird durch das Browser-SDK bereitgestellt. Jeder CMS-API-Export, Webhook oder jede Automatisierung liegt in Kundenverantwortung.
Überprüfen und entfernen#
Veröffentlichen Sie auf Staging und testen Sie ein zugeordnetes Element, fehlendes Feld, unbekanntes SKU, Collection List, Produktvorlage, Filter/Paginierung, Modal, mobilen Breakpoint, Einwilligungssteuerungen sowie Browser-Zurück/Vor. Bestätigen Sie, dass das SDK einmal lädt, jeder gerenderte Code zum aktuellen Element passt und keine Serveranmeldeinformationen im HTML erscheinen.
Zum Entfernen löschen Sie den site-weiten SDK Custom Code und jedes Embed/Button-Binding, veröffentlichen Sie erneut und leeren Sie Proxy-/CDN-Caches. Bestätigen Sie, dass die Script-Anfrage sowie data-idealhouse-*-Elemente aus der veröffentlichten Site verschwunden sind.