Integration

The WebKatalog can be integrated into existing websites and shop systems. There are two main scenarios:

iFrame integration

The WebKatalog is embedded into an existing website as an <iframe>. This allows:

• Embedding into any website
• Your own design and layout for the surrounding page
• Communication via the postMessage API

→ More on iFrame integration

postMessage communication

Two-way communication between the WebKatalog and the parent page allows:

• Dynamic configuration: set prices, discount, theme and article live (SET_CONFIG, SET_THEME, SET_ARTICLE)
• Shopping cart events: notification when an article is added to the shopping cart (BASKET_UPDATED)
• User tracking: article selection, shopping cart, wishlist (more events planned)
• Error handling: notification when an error occurs while processing a message
• Lead generation: contact requests with article data (planned)

→ More on postMessage communication

Architecture

graph TB
    subgraph "Customer website"
        FE[Frontend / Shop]
    end
    
    subgraph "WebKatalog (iFrame)"
        WK[WebKatalog Frontend]
        PM[postMessage Service]
    end
    
    subgraph "3D office APIs"
        XCF[XCF - Catalog]
        OFML[OFML - Articles]
        ODB[ODB - Graphics]
    end
    
    FE <-->|"postMessage"| WK
    WK --> XCF
    WK --> OFML
    WK --> ODB

Requirements

For the integration you need:

• A valid session token for authentication
• Optional: a postMessage handler for advanced integration

Good to know

The simplest way to integrate is to embed the iFrame directly without postMessage. For shopping cart events, tracking and live settings, use postMessage.