HEPLA iframe-Konfigurator

Diese Demo-Seite zeigt, wie der HEPLA-Konfigurator als iframe in Ihre Website eingebunden wird. Konfigurieren Sie etwas im iframe unten und klicken Sie auf „Konfiguration übernehmen" – der Bestellcode erscheint im Bereich darunter.

postMessage-Empfang

Beispiel-Empfänger in JavaScript

Der folgende Code-Ausschnitt zeigt, wie Sie in Ihrer eigenen Seite die Nachrichten des iframes empfangen können:

window.addEventListener('message', (event) => {
  // Sicherheits-Check: Origin prüfen
  if (event.origin !== 'https://www.hepla.de') return;

  const data = event.data;

  if (data.type === 'konfigurator_ready') {
    console.log('Konfigurator bereit für Artikel:', data.artikelnummer);
  }

  if (data.type === 'konfigurator_result') {
    console.log('Bestellcode:',     data.code);
    console.log('Gültig bis:',      data.gueltig_bis);
    console.log('Vorschau-URL:',    data.vorschau_clip_url);
    console.log('Druckflächen:',    data.druckflaechen);
    // → Hier in Ihren Warenkorb übernehmen, Folgeseite aufrufen, etc.
  }
});