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.

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>

PreviousWeb Components NextAdvanced Integration

Last updated 1 month ago

Separate Menu