released

Installation

This page describe how to add the Storage Configurator in a website in the simpler possible way.

Note: To be able to see a project you will need some data, at least a distribution id and optionally a project uuid.

  • You can follow the installation without project uuid. The configurator will show an empty project. But without a distribution id the configurator will display an error requesting some data as an input.
  • The required data is described in 3 - Initialization 🔗.

Step by step

1 - Script

First you need to add the script to your website:

<script defer src="https://closetconfigurator.enterprise.by.me/Configurator/Configurator.js"></script>

Note: Closet Configurator is the legacy name of the Storage Configurator

2 - CSS

Then prepare some CSS. Here is a really basic example:

<style>
    closet-configurator {
        width: 100%;
        height: 800px;
        display: block;
        margin: auto;
    }
</style>

3 - Component

Now you can use the component in the body of your html page:

<closet-configurator
    data-distribution-id="[YOUR_APP_DISTRIB]"
    data-authentication-token="[YOUR_AUTHENTICATION_TOKEN]"
>
</closet-configurator>

Or if you prefer using javascript:

// Create the storage configurator component.
const storageConfigurator = document.createElement("closet-configurator");
// Set some attributes.
storageConfigurator.setAttribute("data-distribution-id", "[YOUR_APP_DISTRIB]");
storageConfigurator.setAttribute("data-authentication-token", "[YOUR_AUTHENTICATION_TOKEN]");
// Add the configurator to the page.
document.body.append(storageConfigurator)

Here is the documentation about how to create your Authentication Token 🔗.

Finally, dispatch the "configuratorInit" event on window load to tell the configurator that it can initialize.

window.addEventListener("load", async () =>
{
    const configurator = document.querySelector("closet-configurator")
    configurator?.dispatchEvent(new CustomEvent("configuratorInit", { detail: {} }))
})

Full working page

This is the result you obtain if you follow the steps above in an empty html document.

Copy this in an ".html" file and just open it to see the result. if you have a distribution id but no project uuid an empty project will be displayed. If you also have a project uuid it will load. Else an error should be visible.


<html>
    <head>
        <script defer src="https://closetconfigurator.enterprise.by.me/Configurator/Configurator.js"></script>
        <style>
            closet-configurator {
                width: 100%;
                height: 800px;
                display: block;
                margin: auto;
            }
        </style>
    </head>
    
    <body>    
        <closet-configurator
            data-distribution-id="[YOUR_APP_DISTRIB]"
            data-authentication-token="[YOUR_AUTHENTICATION_TOKEN]"
        >
        </closet-configurator>

        <script>
            window.addEventListener("load", async () =>
            {
                const configurator = document.querySelector("closet-configurator")
                configurator?.dispatchEvent(new CustomEvent("configuratorInit", { detail: {} }))
            })
        </script>
    </body>
</html>
← PreviousNext →