Skip to main content

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

info

To be able to see a 3D product you will need some data, at least a distribution id and a product.

You can follow the installation without this data. The configurator will display and 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. This example also set some recommended meta tags:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <script defer src="https://productconfigurator.enterprise.by.me/configurator/configurator.js"></script>
</head>

2 - CSS​

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

<style>
    product-configurator {
        width: 100%;
        height: 800px;
    }
</style>

3 - Component​

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

<product-configurator
    data-distribution-id="[YOUR_APP_DISTRIB]"
    data-product="[YOUR_PRODUCT_ID]"
>
</product-configurator>

Or if you prefer using javascript:

// Create the product configurator component.
const productConfigurator = document.createElement("product-configurator");
// Set some attributes.
productConfigurator.setAttribute("data-distribution-id", "[YOUR_APP_DISTRIB]");
productConfigurator.setAttribute("data-product", "[YOUR_PRODUCT_ID]");
// Add the configurator to the page.
document.body.append(productConfigurator)

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 a product, it will be displayed. Else an error should be visible.

warning

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-productconfigurator.enterprise.by.me/configurator/configurator.js


<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <script defer src="https://productconfigurator.enterprise.by.me/configurator/configurator.js"></script>
        <style>
            product-configurator {
                width: 100%;
                height: 800px;
            }
        </style>
    </head>
    
    <body>    
        <product-configurator
            data-distribution-id="[YOUR_APP_DISTRIB]"
            data-product="[YOUR_PRODUCT_ID]"
        >
        </product-configurator>
    </body>
</html>