iFrame integration

The WebKatalog is designed to be used in an <iframe> within your website.

Basic HTML

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

iFrame attributes

All standard iFrame attributes are supported:

Attribute	Description
src	URL with token and optional parameters
width	Width of the iFrame (pixels or percent)
height	Height of the iFrame (pixels or percent)
style	CSS styling for border, spacing, etc.
loading	"lazy" for deferred loading

URL parameters

All parameters: see URL parameters.

Complete example

<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 in the data portal

In the 3D office data portal, Profil → iFrame Generator builds the planning URL and the <iframe> code step by step: entry point (article or catalog node) and environment, article selection, options (language, currency, VAT, display, size), and finally the embed code to copy.

WARNING

The generated link contains the token of the account you are logged in with in the data portal. Create links for embedding with the account intended for that.

Referencing from the parent page

This is how you reference the 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';

// Ready as soon as the WebKatalog reports "webkatalog-loaded"
window.addEventListener('message', (event) => {
  if (event.origin !== ORIGIN) return;
  if (event.data?.type === 'webkatalog-loaded') {
    // Send a message to the iFrame
    iframe.contentWindow.postMessage({ type: 'SET_CONFIG', showPrice: false }, ORIGIN);
  }
});

All messages: see postMessage API.