SDK quick start#

Add a product visualization entry point to a storefront with one prepared product before rolling it out across your catalog.

1. Prepare the shop and product#

Select your shop in the Dashboard. Obtain its Shop ID and Publishable Key. Open Dashboard → Settings, add your storefront origin to Allowed Origins (CORS) and click Save. Make sure at least one product is ready for visualization. If you import from your backend, follow the Product Import API and inspect the final job result.

2. Choose the platform guide#

Use Shopify for Liquid themes, WooCommerce for WooCommerce storefronts, or custom storefront for your own site. More platform guides are listed on the SDK overview.

3. Load the SDK once#

For a custom storefront, load this script once in the host page. Replace both placeholders with values from the same shop.

html

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="YOUR_SHOP_ID"
  data-publishable-key="YOUR_PUBLISHABLE_KEY"
  async
></script>

4. Render a matching target#

Use the exact product code from your prepared catalog. This example asks the SDK to create the button after product validation.

html

<div data-idealhouse-button-container data-product-code="YOUR_PRODUCT_CODE"></div>

A target alone does not prove that the product is eligible. Confirm the selected variant, product readiness and identifier mapping.

5. Test the customer journey#

Check that sdk.js loads successfully, the correct button appears and a click opens the Viewer with the intended product. Change variants, navigate to another product and repeat on mobile. Complete the launch checklist before publishing.