Getting Started

The configurator and its accompanying menu are integrated into your website as web components. Think of a web component as a tailor-made HTML tag that seamlessly integrates into your HTML document or web application. Unlike the previous iframe-based configurator integration, with web components, the menu's placement can be freely adjusted, independent of the configurator. Moreover, you have the flexibility to customize its appearance to align with the overall aesthetics of your website. The simplest integration resembles the following:

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <!-- Load icons required by the configurator -->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
        <link href="https://storage.googleapis.com/cm-platform-prod-static/fonts/fontawesome-pro-6.0.0-alpha3/css/all.css"rel="stylesheet" />

        <!-- The configurator will use the font-family of the parent by default. We use "Roboto" for illustration -->
        <link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,600,700" rel="stylesheet" />

        <!-- The configurator web components are contained in the following module -->
        <script src="https://cm-configurator-wc-prod.web.app/cm-configurator.js" type="module"></script>
    </head>
    <body style="width: 100%; height: 100%; margin: 0; font-family: Roboto">
        <!-- This is the actual web component, template-uuid specifies the configurator to load -->
        <cm-configurator-main template-uuid="8ee95263-fd7c-40fc-b99f-08961594e14e"></cm-configurator-main>
    </body>
</html>


In this example, the first two styles (material icons and font awesome) are required, "Roboto" is optional. If you omit "Roboto", the configurator will use the font of your website. Note that all style sheets are also loaded internally by the configurator, but for technical reasons it is also required that they are available in the parent document.

The above example shows a standalone html document. The integration into a CMS like wordpress works similar, but usually requires CMS-specific html containers.

Separate Menu

If you want to use the menu separately, you can load it as additional web component and place it anywhere in your current website. Note that this requires to set the HTML attribute  use-external-menu="true"  on the configurator element to prevent flashing of the configurator's "internal" menu. The example changes to:

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
        <link href="https://storage.googleapis.com/cm-platform-prod-static/fonts/fontawesome-pro-6.0.0-alpha3/css/all.css" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,600,700" rel="stylesheet" />
        <script src="https://cm-configurator-wc-prod.web.app/cm-configurator.js" type="module"></script>
        
        <style>
            .container {
                display: flex;
                height: 100%;
                overflow: hidden;
            }
            
            .menu {
                justify-content: center;
                width: 20%;
                background-color: #f4f4f4;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                min-width: 400px;
            }
            
            .configurator-container {
                flex-grow: 1;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body style="width: 100%; height: 100%; margin: 0; font-family: Roboto">
        <div class="container">
            <div class="menu">
                <!-- Separate web component for the menu -->
                <cm-configurator-menu style="width: 100%"></cm-configurator-menu>
            </div>
            <div class="configurator-container">
                <cm-configurator-main template-uuid="8ee95263-fd7c-40fc-b99f-08961594e14e" use-external-menu="true"></cm-configurator-main>
            </div>
        </div>
    </body>
</html>