Ideal House
Skip to content

Webflow integration#

Use Webflow Custom Code and CMS/Ecommerce fields to render Room Visualizer buttons whose Product Code matches the ideal.house catalog.

Verification status: Webflow Help Center documentation reviewed on September 7, 2026. No customer Webflow site was available. Custom code runs after preview/publish and Webflow does not run server-side code in an Embed, so test the published staging domain.

Before loading the SDK: Open Dashboard → Settings, add your storefront origin to Allowed Origins (CORS), and click Save. Include the published hostname and any preview or staging origins you use; separate multiple origins with commas. See configuration steps.

Prerequisites and limits#

You need permission to use Custom Code or Code Embed, a staging domain, Shop ID, Publishable Key, and one imported catalog SKU. Webflow plan requirements apply to JavaScript embeds. The browser may contain a Publishable Key, but never a Client Secret or AI API key.

The SDK does not read Webflow Ecommerce automatically. Your template must expose the SKU, or a customer adapter must derive it from a trusted CMS field.

Minimal 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 must equal the imported ideal.house sku exactly.

Install the loader#

Open Site settings → Custom code and add the SDK script tag to the footer/end-of-body area. Replace the placeholders, save, and publish. Install it once at site level; do not repeat it in every CMS item.

Webflow's Designer canvas may not execute the script. Validate on a preview or published staging URL and inspect the actual page source.

Add an item-level button#

Create a plain-text CMS field named, for example, Idealhouse SKU. Populate it with the same value imported as ideal.house sku. In the Product or CMS Collection template, add a Code Embed where the button belongs:

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

Use Webflow's Add field control in the Embed editor to insert the current item's value; the bracketed instruction above is not literal production markup. After publishing, inspect the DOM and confirm it became a normal string such as:

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

For a static page, paste a literal SKU. Do not use the page slug or Webflow item ID unless that exact value is the imported ideal.house SKU.

Variants and dynamic rendering#

Webflow's standard Designer binding may not expose a final variant SKU to arbitrary custom code in every Ecommerce layout. If every visual option needs a different ideal.house asset, build a customer adapter that receives the selected variant from a supported Webflow integration or your own data layer, then replaces the container:

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

This is customer code. Call it from a documented callback in the variant tool you actually use. Do not scrape displayed option text or assume an unofficial Webflow event.

Webflow interactions, CMS filters, third-party pagination, and SPA-like transitions may add or replace Collection Items. Include the Embed inside each item template, or invoke the bridge after the tool's documented render callback. Always create a fresh container rather than cloning processed SDK markup.

Import catalog data#

Export your Webflow Product/CMS fields and map Idealhouse SKU to sku. Upload through Product upload and follow import products, job status, list products, update products, delete product, and errors and retries.

No automatic Webflow sync is provided by the browser SDK. Any CMS API export, webhook, or automation is customer-owned.

Verify and remove#

Publish to staging and test a mapped item, missing field, unknown SKU, Collection List, product template, filters/pagination, modal, mobile breakpoint, consent controls, and browser Back/Forward. Confirm the SDK loads once, each rendered code matches the current item, and no server credential appears in HTML.

To remove, delete the site-level SDK Custom Code and each Embed/button binding, republish, and clear any proxy/CDN cache. Confirm the script request and data-idealhouse-* elements are gone from the published site.

Official platform references#