Skip to main content

Embedding in Your Website

Scripts and Containers​

In order to create an instance of the product configurator, the webpage should include a couple of scripts and provide a few containers to place the 3D view and the options panel inside.

Scripts​

The Configurator requires two scripts and one style sheet in order to function. Please note that it is important to place the scripts in correct order to avoid any dependency issues.

embed-code.html
<html lang="en">
    <head>
        <title>Expivi Embed Demo</title>
        <link href="https://assets.expivi.net/options/latest/css/app.css" rel="stylesheet"/>
    </head>
    <body>
        <div style="display: flex">
            <div id="viewer-container" style="min-height: 600px; flex-grow: 3"></div>
            <div style="flex-grow: 1">
                <div id="price-container"></div>
                <div id="options-container"></div>
            </div>
        </div>

        <script src="https://assets.expivi.net/viewer/latest/viewer.js"></script>
        <script src="https://assets.expivi.net/options/latest/js/app.js"></script>
        <script src="embed-code.js"></script>
    </body>
</html>
warning

Using latest as version number will automatically use the latest versions of the viewer/options scripts.

TODO: version list

Containers​

The Configurator requires three container elements on the webpage.

  • one to render the 3D viewer.
  • another to render the product's options.
  • and the final one to show the price.
embed-code.html
<html lang="en">
    <head>
        <title>Expivi Embed Demo</title>
        <link href="https://assets.expivi.net/options/latest/css/app.css" rel="stylesheet"/>
    </head>
    <body>
        <div style="display: flex">
            <div id="viewer-container" style="min-height: 600px; flex-grow: 3"></div>
            <div style="flex-grow: 1">
                <div id="price-container"></div>
                <div id="options-container"></div>
            </div>
        </div>

        <script src="https://assets.expivi.net/viewer/latest/viewer.js"></script>
        <script src="https://assets.expivi.net/options/latest/js/app.js"></script>
        <script src="embed-code.js"></script>
    </body>
</html>
info

The viewer and options will fill their parenting container's size. The position and responsiveness of containers is left to webpage implementation.

Initializing the Configurator​

With the script and containers included into the HTML page, it is now possible to create an instance and render the Configurator on the page.

Both the catalogueId and token can be acquired from our Backoffice.

After creating the instance, the Configurator is available to use as window.expivi.

embed-code.js
window.addEventListener('DOMContentLoaded', function () {
    ExpiviComponent({
        catalogueId: 123, // your-product-id
        token: 'your-viewer-token',
        viewerContainer: document.getElementById('viewer-container'),
        optionContainer: document.getElementById('options-container'),
        priceSelectors: document.getElementById('price-container'),
    });
});
warning

Make sure to use an API key of type "Viewer Token" here, as it provides only read access.