Ideal House
Skip to content

Squarespace integration#

Install Room Visualizer on Squarespace with Code Injection and place product-specific containers where the page editor permits custom code.

Verification status: Squarespace Help Center documentation reviewed on September 7, 2026. No customer Squarespace site was available. Code Injection and JavaScript Code Blocks require eligible plans, custom code falls outside Squarespace support, and Ajax loading can affect it.

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.

Scope and prerequisites#

This path is most practical for a small catalog with stable product pages, or a site where you control an explicit product-code data layer. You need an eligible plan, site-owner access, Shop ID, Publishable Key, and imported ideal.house SKUs.

Squarespace does not provide an ideal.house extension in this guide. Its standard product editor does not guarantee a stable public JavaScript API for selected variant SKU, so variant-level matching requires customer adapter work and may not be practical on every template.

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>

The Product Code must match the imported catalog sku exactly. Do not use a Client Secret in Code Injection.

Install the loader#

Open Website → Pages → Custom Code → Code Injection (the label can differ by site version). Paste the SDK <script> into Footer, replace both placeholders, and save. Footer injection runs on site pages before </body>; checkout pages do not support injected code.

Install the loader only once. If another integration already added it, remove the duplicate.

Place a product button#

Where the page editor permits a JavaScript-enabled Code Block, place:

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

Use the SKU of that exact product. In Squarespace 7.1, Store/Product Details layouts may not accept arbitrary blocks in the primary product information area. A practical fallback is a normal layout page with a Product Block plus a neighboring Code Block, one pair per product. Confirm the store page stays enabled because Product Blocks depend on it.

For larger catalogs, a developer may inject containers by matching a stable, customer-owned mapping such as URL path to SKU:

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

The URL mapping, host insertion, and navigation callback are customer code. Do not scrape private Squarespace state or assume its shape is stable.

Variants, quick view, and Ajax loading#

If one Squarespace product has several variants with different ideal.house assets, only show a button after your adapter can identify the selected variant SKU from a supported source. Replace the old container with a clean one on each change. If no supported selection callback/data source exists, use one shared product-level SKU only when all variants share the same visual asset, or omit the button.

Quick View, Product Blocks, and Ajax page loading can replace page content. Squarespace warns that Ajax loading can conflict with custom code. Test the exact template; if necessary, disable Ajax loading or call renderForPath() from a navigation mechanism you own. A MutationObserver is a last-resort customer adapter and should be scoped to the product region.

Import product data#

Maintain a table of Squarespace product/variant SKU to ideal.house sku, then use Product upload. The complete public workflow is documented under import products, job status, list products, update products, delete product, and errors and retries.

The browser SDK does not synchronize Squarespace products. Any Commerce API export, webhook, or scheduled job is customer-owned.

Verify and remove#

Test the published site in a private window because logged-in editing can suppress custom code. Check one mapped product, one missing SKU, one unknown SKU, Product Blocks, Quick View, Ajax navigation, browser Back/Forward, mobile layout, cookie consent, and checkout exclusion. Confirm one successful SDK request and exact Product Code/SKU equality.

To remove, delete the Footer injection and all Code Blocks/hosts/mapping scripts, save, and clear caches. Verify the published page has no SDK request or data-idealhouse-* element.

Official platform references#