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>

Dimensionen

Bildschirmgröße	Standard-Höhe
Desktop	60% der Breite
Mobil / Klein	166% der Breite

Hinweis

Die Dimensionen können über CSS oder die style-Attribute individuell angepasst werden.

iFrame-Attribute

Alle Standard-iFrame-Attribute werden unterstützt:

Attribut	Beschreibung
src	URL mit Gatekeeper-ID 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
allow	Berechtigungen (z.B. camera, microphone)

URL-Parameter

Die iFrame-URL unterstützt folgende Parameter:

Parameter	Beschreibung	Beispiel
token	Session-Token für Authentifizierung	token=xyz123
language	Sprachcode	language=de oder language=en
currency	Währungscode	currency=EUR
showPrice	Preisanzeige (true/false)	showPrice=true
article	Artikel-ID für Direktaufruf	article=12345
program	Programfilter	program=Schreibtische

Vollständiges Beispiel

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

CORS-Konfiguration

Für die iFrame-Integration müssen Sie die Domain Ihrer Website in der WebKatalog-Konfiguration freischalten lassen. Wenden Sie sich an unseren Support, um Ihre Domain zur CORS-Whitelist hinzufügen zu lassen.

Wichtig

Ohne CORS-Freischaltung wird die postMessage-Kommunikation zwischen dem iFrame und der Elternseite blockiert.

Responsive Design

Für responsive Websites empfehlen wir:

<style>
  .webkatalog-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
  }
  
  .webkatalog-iframe {
    width: 100%;
    border: none;
  }
  
  /* Desktop */
  @media (min-width: 768px) {
    .webkatalog-iframe {
      height: 70vh;
    }
  }
  
  /* Mobil */
  @media (max-width: 767px) {
    .webkatalog-iframe {
      height: 100vh;
    }
  }
</style>

<div class="webkatalog-container">
  <iframe 
    class="webkatalog-iframe"
  src="https://web.3doffice.de/webkatalog2_5/planning"
  ></iframe>
</div>

Elternseite Referenz

So referenzieren Sie den iFrame in JavaScript:

const iframe = document.querySelector('iframe[name="webkatalog"]');

// Warte bis der iFrame geladen ist
iframe.addEventListener('load', () => {
  console.log('WebKatalog geladen');
});

// Nachricht an den iFrame senden
iframe.contentWindow.postMessage(
  { type: 'SET_CONFIG', showPrice: false },
  '*'
);

Empfehlung

Verwenden Sie * als Zielorigin nur wenn nötig. Für mehr Sicherheit spezifizieren Sie die genaue Origin des WebKatalogs.