search
Github Examplescolormass.com

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/styles.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>

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 customised through CSS in order to match your pages style.

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

hashtag
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:

PreviousWeb ComponentsNextAdvanced Integration

Last updated