released

Installation

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

Note: To be able to launch the configurator on an empty project you will need some data, at least a distribution id and an authentication token.

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;
        background-color: white;
    }
</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 🔗. Follow the Legal Entity Workflow and use the API documentation to POST your first 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 and an authentication token then an empty project will be displayed. If you also have a project uuid it will load. Else an error should be visible.

Note: This example is using the production environment. If you want to test it on a staging environment, change the url of the script by this one: https://staging-closetconfigurator.enterprise.by.me/Configurator/Configurator.js


<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 →