Expert

Embed Anywhere

Add configurators to any website

Basic Embedding

Integrate your configurators seamlessly into websites and apps.

iframe Embed

<iframe
    src="https://app.confbuild.com/embed/YOUR_PROJECT_ID"
    width="100%"
    height="600"
    frameborder="0"
    allowfullscreen>
</iframe>

Responsive Embedding

Make the embed adapt to any screen size.

Responsive Container

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe
        src="https://app.confbuild.com/embed/YOUR_PROJECT_ID"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
        frameborder="0"
        allowfullscreen>
    </iframe>
</div>

Embed Parameters

Customize the embed with URL parameters.

Parameter Description Example
hideToolbar Hide top toolbar ?hideToolbar=true
hideSpreadsheet Hide spreadsheet panel ?hideSpreadsheet=true
theme Color theme ?theme=dark
locale Language ?locale=de
preset Initial configuration ?preset=large

Combined Parameters

<iframe src="https://app.confbuild.com/embed/ID?hideToolbar=true&theme=dark"></iframe>

JavaScript API

Control the configurator programmatically.

JS

postMessage API

<iframe id="configurator" src="..."></iframe>

<script>
const configurator = document.getElementById(‘configurator’);


// Send configuration
configurator.contentWindow.postMessage({
type: ‘setParameter’,
name: ‘Width’,
value: 200
}, ‘*’);


// Receive events
window.addEventListener(‘message’, (event) => {
if (event.data.type === ‘configurationChanged’) {
console.log(‘New config:’, event.data.configuration);
}
});
</script>

Available Events

Listen for configurator events.

Event Description Data
configurationChanged Configuration was modified Full config object
priceUpdated Price calculation updated Price value
screenshotReady Screenshot was generated Image data URL
exportReady Export file is ready Download URL
error An error occurred Error message

E-Commerce Integration

Add configurators to your online store.

Shopify

Native cart integration

WooCommerce

WordPress integration

W

WordPress

Shortcode plugin

Shopify Integration

<!-- In your Shopify theme -->
<div id="configurator-container"></div>
<script>
    const iframe = document.createElement('iframe');
    iframe.src = 'https://app.confbuild.com/embed/ID?shopify=true';
    document.getElementById('configurator-container').appendChild(iframe);

window.addEventListener('message', (event) => {
    if (event.data.type === 'addToCart') {
        fetch('/cart/add.js', {
            method: 'POST',
            body: JSON.stringify(event.data.product)
        });
    }
});



</script>

Mobile Apps

Embed in mobile apps using WebView.

iOS (Swift)

let webView = WKWebView()
webView.load(URLRequest(url:
  URL(string: "...")!))

Android (Kotlin)

val webView = WebView(ctx)
webView.loadUrl("...")

Security

Secure your embedded configurators.

CORS Settings

Configure allowed domains

CSP Headers

Add confBuild to frame-src

Content Security Policy

frame-src https://app.confbuild.com
← Back to Documentation

Ready to embed?

Integrate configurators seamlessly

Get Started