iFrame embed
The iFrame method is the simplest way to embed an iConfigure configurator on your website. The configurator runs in an isolated browsing context at https://configurator.iconfigure.io.
When to use iFrame
| Advantage | Limitation |
|---|---|
| Easy to implement | Limited interaction with the host page |
| Style/script isolation | Third-party analytics (GTM) on the host page cannot see inside the iframe |
| Works on any CMS | postMessage to parent only after a successful submit (full details when enabled on the submit button) |
For Google Analytics / GTM integration, prefer Script inject.
Basic embed
<iframe
src="https://configurator.iconfigure.io/?product=YOUR_PRODUCT_ID"
style="width: 100%; height: 80vh; border: none;"
title="Product configurator"
></iframe>Replace YOUR_PRODUCT_ID with the product UUID: in Manager → Configurations, click Open live next to the product and copy the product value from the configurator URL that opens. If your account uses its own configurator domain, use that domain instead of configurator.iconfigure.io.
Full-viewport layout
<iframe
src="https://configurator.iconfigure.io/?product=YOUR_PRODUCT_ID"
style="
position: fixed;
top: 50px;
left: 0;
width: 100%;
height: calc(100dvh - 50px);
border: none;
"
title="Product configurator"
></iframe>Use 100dvh instead of 100vh on mobile so browser chrome does not clip the bottom of the configurator.
Pre-configuration via URL
Pass feature IDs and values as query parameters. See URL parameters.
<iframe
src="https://configurator.iconfigure.io/?product=YOUR_PRODUCT_ID&width=100&material=oak"
></iframe>Listening for submission events
After a successful submit, the parent page receives a message with state: 'finished'. When PostMessage is enabled on the submit button (Manager → Data → Submissions), the message contains the full submit details (for a quotation: quotation_id and pdf_url). See postMessage.
<script>
const CONFIGURATOR_ORIGIN = 'https://configurator.iconfigure.io'
window.addEventListener('message', (event) => {
if (event.origin !== CONFIGURATOR_ORIGIN) return
const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data
if (data?.state === 'finished') {
// Quotation or cart submit completed — redirect, update cart, etc.
console.log('Submit finished:', data)
}
})
</script>Origin check
Always verify event.origin matches https://configurator.iconfigure.io (or your own configurator domain) before trusting message data.
Dealer embeds
Dealer products use the dealer query parameter (the dealer product ID) instead of product. Use the URL that Open configurator on the dealer product in Manager → Configurations opens.