Experte

Überall einbetten

Konfiguratoren zu jeder Website hinzufügen

Einfache Einbettung

Integrieren Sie Ihre Konfiguratoren nahtlos in Websites und Apps.

iframe Einbettung

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

Responsive Einbettung

Lassen Sie die Einbettung sich an jede Bildschirmgröße anpassen.

Responsiver Container

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

Einbettungsparameter

Passen Sie die Einbettung mit URL-Parametern an.

hideToolbar Obere Werkzeugleiste ausblenden ?hideToolbar=true

hideSpreadsheet Tabellenbereich ausblenden ?hideSpreadsheet=true

theme Farbthema ?theme=dark

locale Sprache ?locale=de

preset Anfangskonfiguration ?preset=gross

Kombinierte Parameter

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

JavaScript API

Steuern Sie den Konfigurator programmatisch.

postMessage API

<iframe id="configurator" src="..."></iframe>
<script>
const configurator = document.getElementById(‘configurator’);
// Konfiguration senden
configurator.contentWindow.postMessage({
type: ‘setParameter’,
name: ‘Breite’,
value: 200
}, ‘*’);
// Events empfangen
window.addEventListener(‘message’, (event) => {
if (event.data.type === ‘configurationChanged’) {
console.log(‘Neue Konfiguration:’, event.data.configuration);
}
});
</script>

Verfügbare Events

Hören Sie auf Konfigurator-Events.

configurationChanged Konfiguration wurde geändert Vollständiges Konfig-Objekt

priceUpdated Preisberechnung aktualisiert Preiswert

screenshotReady Screenshot wurde erstellt Bild-Daten-URL

exportReady Export-Datei ist bereit Download-URL

error Ein Fehler ist aufgetreten Fehlermeldung

E-Commerce Integration

Fügen Sie Konfiguratoren zu Ihrem Online-Shop hinzu.

Shopify

Native Warenkorb-Integration

WooCommerce

WordPress-Integration

WordPress

Shortcode-Plugin

Shopify Integration

<!-- In Ihrem 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

Einbettung in mobilen Apps mit WebView.

iOS (Swift)

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

Android (Kotlin)

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

Sicherheit

Sichern Sie Ihre eingebetteten Konfiguratoren.

CORS-Einstellungen

Erlaubte Domains konfigurieren

CSP-Header

confBuild zu frame-src hinzufügen

Content Security Policy

frame-src https://app.confbuild.com

← Back to Documentation