WordPress integration#

Add the ideal.house Room Visualizer to a WordPress site by loading one public browser script and rendering a container whose product code matches an imported catalog SKU.

Verification status: Documentation reviewed on September 7, 2026. This guide has not been certified end to end against a customer WordPress theme. Validate it on a staging copy of your exact theme and page-builder versions before publishing.

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 guide covers WordPress content sites, classic themes, block themes, and page builders that let you add HTML. If the site uses WooCommerce product data, use the WooCommerce guide for variant selection.

Prepare:

administrator access and, for the durable method, a child theme or small site-specific plugin;
the Shop ID and Publishable Key from the ideal.house Dashboard;
one product already imported into ideal.house with a known sku;
a staging page where cache/minification can be disabled while testing.

The Publishable Key is intended for browser markup. Never place a Client Secret or AI API key in WordPress HTML.

Confirm the SDK contract#

The smallest supported installation is exactly one SDK script and one generated-button container:

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 catalog sku, including case and punctuation. The SDK owns the contents of the container. WordPress does not provide an ideal.house plugin in this guide.

Install the script site-wide#

WordPress recommends loading front-end scripts through wp_enqueue_script(). Add the following to a child theme functions.php or a site-specific plugin. The filter adds the two required data attributes to the tag WordPress produces.

php

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'idealhouse-room-visualizer',
        'https://sdk.ideal.house/sdk.js',
        array(),
        null,
        array('strategy' => 'async', 'in_footer' => true)
    );
});

add_filter('script_loader_tag', function ($tag, $handle) {
    if ($handle !== 'idealhouse-room-visualizer') {
        return $tag;
    }

    return str_replace(
        '<script ',
        '<script data-shop-id="<SHOP_ID>" data-publishable-key="<PUBLISHABLE_KEY>" ',
        $tag
    );
}, 10, 2);

Replace both placeholders. WordPress versions before 6.3 do not accept the array form of the final wp_enqueue_script() argument; pass true instead and use the script_loader_tag filter to add async too.

Do not install the SDK again in a Code block or tag manager. In DevTools, document.querySelectorAll('script[src="https://sdk.ideal.house/sdk.js"]').length should return 1.

Place a button#

In the block editor, add a Custom HTML block where the button should appear:

html

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

For repeated cards, render the same markup from the theme template and escape the code as an HTML attribute:

php

<div
  data-idealhouse-button-container
  data-product-code="<?php echo esc_attr($idealhouse_product_code); ?>"
></div>

Your theme or plugin must provide $idealhouse_product_code. Do not use a post ID, slug, or title unless that exact value is also the imported ideal.house sku.

Product and variant mapping#

Create an explicit mapping table before launch:

WordPress value	ideal.house value	Rule
custom field such as `idealhouse_sku`	`sku`	exact string match
one page with no variants	one imported product	one container
page-builder collection item	item-level SKU field	never reuse a collection-wide code

If the page changes between variants, the customer adapter must set the new data-product-code. Clear the old container before inserting the new one so stale viewer state cannot be reused:

function renderIdealhouseButton(host, sku) {
  host.replaceChildren();
  if (!sku) return;

  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = sku.trim();
  host.append(container);
}

This is customer adapter code. It does not call an undocumented ideal.house method or invent a WordPress event; call it from the documented callback supplied by your theme or page builder.

For AJAX filters, infinite scroll, modal product cards, or page-builder transitions, insert a fresh container after the new product node is in the DOM. Do not clone a container that the SDK has already populated. If your tool exposes no stable render callback, add the container in its item template so every render creates clean markup.

After a theme edit, purge WordPress, CDN, and optimization-plugin caches. Exclude https://sdk.ideal.house/sdk.js from delay/defer rewriting if a performance plugin removes its data attributes or postpones it until after interaction.

Import catalog data#

WordPress content is not synchronized automatically. Export the chosen custom field as sku and import the matching records through Product upload. Continue with import products, job status, list products, update products, delete product, and errors and retries.

Verify before publishing#

Open staging in a private browser window, not the WordPress editor preview.
Confirm the SDK request returns successfully and only once.
Inspect the container and compare data-product-code character for character with the imported sku.
Confirm an imported SKU produces a usable visualizer control and an unknown SKU does not expose a broken control.
Exercise page-builder navigation, filters, browser Back/Forward, mobile layout, and consent settings.
Select every supported variant and confirm the container is recreated with its SKU.
Check the browser console and test with cache/minification enabled again.

Remove the integration#

Remove the enqueue function and script_loader_tag filter, then delete every data-idealhouse-button-container block or template fragment. Purge all caches and verify the SDK URL is absent from page source and the Network panel.