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>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.
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>Last updated