colormass Docs
Github Examplescolormass.com
Development
Development
  • Welcome
  • Configurator
    • Introduction
    • Web Components
      • Getting Started
      • Advanced Integration
      • Styling
      • Setting Parameters
      • SDK API Reference
      • Examples
        • Custom Menu
        • Overlay Material Color
    • Iframe Integration
      • Getting Started
      • Advanced Integration
      • API Reference
        • Default Configurations
  • Data Exporter
    • Generating Exports
    • Integration
    • API Access
Powered by GitBook
On this page
  1. Configurator
  2. Web Components

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 default styles, icons and fonts required by the configurator -->
    <link
      href="https://configurator.colormass.com/styels.css"
      rel="stylesheet"
    />
    <!-- The configurator web components are contained in the following module -->
    <script
      src="https://configurator.colormass.com/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>

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://configurator.colormass.com/styels.css"
      rel="stylesheet"
    />
    <script
      src="https://configurator.colormass.com/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 ComponentsNextAdvanced Integration

Last updated 1 month ago

In this example, we load the required default styles for the configurator and the configurator Javascript module. Note that some parts of the configurator can be in order to match your pages style.

customised through CSS