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.

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.

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.

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

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