iFrame-Integration

Der WebKatalog ist für die Verwendung in einem <iframe> innerhalb Ihrer Website konzipiert.

Grundlegendes HTML

<iframe
    src="https://web.3doffice.de/webkatalog2_5/planning"
  width="100%"
  height="600"
  style="border: none;"
></iframe>

iFrame-Attribute

Alle Standard-iFrame-Attribute werden unterstützt:

Attribut	Beschreibung
src	URL mit Token und optionalen Parametern
width	Breite des iFrames (Pixel oder Prozent)
height	Höhe des iFrames (Pixel oder Prozent)
style	CSS-Styling für Rahmen, Abstände usw.
loading	"lazy" für verzögertes Laden

URL-Parameter

Alle Parameter: siehe URL-Parameter.

Vollständiges Beispiel

<iframe 
  src="https://web.3doffice.de/webkatalog2_5/planning?token={TOKEN}&lang=de&currency=EUR&showprice=true"
  width="100%"
  height="800"
  style="border: none; border-radius: 8px;"
  loading="lazy"
></iframe>

Link-Generator im Datenportal

Im 3D office Datenportal erstellt Profil → iFrame Generator die Planning-URL und den <iframe>-Code Schritt für Schritt: Einstieg (Artikel oder Katalogknoten) und Umgebung, Artikelauswahl, Optionen (Sprache, Währung, MwSt., Anzeige, Größe) und zuletzt der Embed-Code zum Kopieren.

WARNING

Der erzeugte Link enthält den Token des Kontos, mit dem Sie im Datenportal angemeldet sind. Erstellen Sie Links für die Einbettung mit dem dafür vorgesehenen Konto.

Elternseite Referenz

So referenzieren Sie den iFrame in JavaScript:

<iframe id="webkatalog" src="https://web.3doffice.de/webkatalog2_5/planning?token={TOKEN}"></iframe>

const iframe = document.getElementById('webkatalog');
const ORIGIN = 'https://web.3doffice.de';

// Bereit, sobald der WebKatalog „webkatalog-loaded“ meldet
window.addEventListener('message', (event) => {
  if (event.origin !== ORIGIN) return;
  if (event.data?.type === 'webkatalog-loaded') {
    // Nachricht an den iFrame senden
    iframe.contentWindow.postMessage({ type: 'SET_CONFIG', showPrice: false }, ORIGIN);
  }
});

Alle Nachrichten: siehe postMessage API.