Intégration Webflow#
Utilisez le code personnalisé et les champs CMS/E-commerce de Webflow pour afficher des boutons Room Visualizer dont le code produit correspond au catalogue ideal.house.
État de vérification : documentation du centre d'aide Webflow consultée le 7 septembre 2026. Aucun site client Webflow n'était disponible. Le code personnalisé s'exécute après l'aperçu/la publication et Webflow n'exécute pas de code côté serveur dans un Embed, testez donc le domaine de préproduction publié.
Avant de charger le SDK : ouvrez Tableau de bord → Paramètres, ajoutez l'origine de votre boutique en ligne à Allowed Origins (CORS), puis cliquez sur Enregistrer. Incluez le nom d'hôte publié et toutes les origines d'aperçu ou de préproduction que vous utilisez ; séparez plusieurs origines par des virgules. Voir les étapes de configuration.
Prérequis et limites#
Vous avez besoin de l'autorisation d'utiliser le code personnalisé ou l'Embed de code, d'un domaine de préproduction, d'un Shop ID, d'une Publishable Key et d'un code produit de catalogue importé SKU. Les exigences de plan Webflow s'appliquent aux embeds JavaScript. Le navigateur peut contenir une Publishable Key, mais jamais une clé Client Secret ou une clé AI API.
Le SDK ne lit pas automatiquement l'E-commerce de Webflow. Votre modèle doit exposer le code produit SKU, ou un adaptateur client doit le dériver d'un champ CMS de confiance.
Contrat minimal du 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 doit être exactement égal au code produit sku importé de ideal.house.
Installer le chargeur#
Ouvrez Paramètres du site → Code personnalisé et ajoutez la balise de script SDK à la zone de pied de page/fin de corps. Remplacez les espaces réservés, enregistrez et publiez. Installez-le une seule fois au niveau du site ; ne le répétez pas dans chaque élément CMS.
La toile Designer de Webflow peut ne pas exécuter le script. Validez sur une URL d'aperçu ou de préproduction publiée et inspectez le code source réel de la page.
Ajouter un bouton au niveau de l'élément#
Créez un champ CMS texte brut nommé, par exemple, Idealhouse SKU. Remplissez-le avec la même valeur importée en tant que code produit sku de ideal.house. Dans le modèle de produit ou de collection CMS, ajoutez un Embed de code là où le bouton doit se trouver :
<div
data-idealhouse-button-container
data-product-code="[bind this attribute to the current item's Idealhouse SKU]"
></div>
Utilisez le contrôle Ajouter un champ de Webflow dans l'éditeur Embed pour insérer la valeur de l'élément actuel ; l'instruction entre crochets ci-dessus n'est pas un balisage de production littéral. Après publication, inspectez le DOM et vérifiez qu'il est devenu une chaîne normale telle que :
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
Pour une page statique, collez un code produit SKU littéral. N'utilisez pas le slug de la page ou l'identifiant d'élément Webflow sauf si cette valeur exacte est le code produit SKU importé de ideal.house.
Variantes et rendu dynamique#
La liaison standard Designer de Webflow peut ne pas exposer un code produit de variante finale SKU à un code personnalisé arbitraire dans toutes les mises en page E-commerce. Si chaque option visuelle nécessite une ressource ideal.house différente, créez un adaptateur client qui reçoit la variante sélectionnée d'une intégration Webflow prise en charge ou de votre propre couche de données, puis remplace le conteneur :
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);
}
Ceci est du code client. Appelez-le depuis un rappel documenté dans l'outil de variante que vous utilisez réellement. N’extrayez pas le texte des options affichées et ne supposez pas un événement non officiel Webflow.
Les interactions Webflow, les filtres CMS, la pagination tierce et les transitions de type SPA peuvent ajouter ou remplacer des éléments de collection. Incluez l'Embed dans chaque modèle d'élément, ou invoquez le pont après le rappel de rendu documenté de l'outil. Créez toujours un conteneur neuf plutôt que de cloner le balisage SDK traité.
Importer les données du catalogue#
Exportez vos champs produit/CMS de Webflow et mappez Idealhouse SKU vers sku. Téléversez via Téléversement de produits et suivez Importer des produits, État de la tâche, Lister les produits, Mettre à jour les produits, Supprimer un produit et Erreurs et nouvelles tentatives.
Aucune synchronisation automatique de Webflow n'est fournie par le SDK côté navigateur. Tout export via CMS API, webhook ou automatisation est la propriété du client.
Vérifier et supprimer#
Publiez en préproduction et testez un élément mappé, un champ manquant, un code produit inconnu SKU, une liste de collection, un modèle de produit, des filtres/pagination, une modale, un point de rupture mobile, des contrôles de consentement et les boutons Retour/Avant du navigateur. Vérifiez que le SDK se charge une seule fois, que chaque code affiché correspond à l'élément actuel et qu'aucun identifiant serveur n'apparaît dans le HTML.
Pour supprimer, supprimez le code personnalisé SDK au niveau du site et chaque liaison Embed/bouton, republiez et videz tout cache de proxy/CDN. Vérifiez que la requête de script et les éléments data-idealhouse-* ont disparu du site publié.