Skip to main content

Embedding in Your Website

In order to create an instance of the viewer, the webpage must have included required scripts and provide container to place the 3D viewer inside.

Script​

Include the following javascript libraries inside the header tag <header></header> of HTML that is going to contain the configurator.

<script src="https://assets.expivi.net/viewer/latest/viewer.js?backend=e58f1293e737841bbdfda6b6730114sd"></script>
note

The library needs to be inserted into the page before the creation/initialization of expivi’s viewer. This could be at any place inside your HTML page, within header or body. Including the library inside the header is meant only as a suggestion for best practice.

Containers​

The configurator requires one container element inside the body tag <body></body> to render the 3D viewer inside. The added element must contain an id attribute to be passed to viewer’s constructor method.

<div id="viewerContainer" style="width: 100%;height: 600px;"></div>
note

The viewer will fill its parenting container’s size. The position and responsiveness of containers is left to webpage implementation.

3D Viewer​

With the script and container included into the HTML page, an instance of the viewer can be created to initialize and render the Expivi’s elements into the provided container.

Creating an instance​

Create a new instance of ExpiviConfigurator object after the window has loaded.

<script type="text/javascript">
    window.addEventListener('load',
        function() {
            window.expivi._create(
                aToken: string, 
                aCatalogueId: number, 
                aViewContainer: any, 
                aOptions ? :
                    {
                    cameraDropdownVisible: boolean,
                    defaultOptions ? :{ [key: string] : string},
                    defaultMaterials ? :{ [key: string] : string},
                    defaultApplied ? :{ [key: string] : string},
                    configuredProduct ? :ConfiguredProductOptions[],
                    temporaryProductId ? :string,
                    show360Indicator ? :boolean,
                    showProgress ? :boolean,
                    preset: string
                }
            );
        }
    );
</script>
info

Add the script tag at the end of body tag.

Constructor options​

The viewer must be initialized with the following parameters.

Parameter Descriptions​
ParameterDescriptionType
aTokenAPI Token with read permission created from Expivi’s admin panel.string
aCatalogueIdThe ID of the product to be loaded.number
aViewContainerThe element’s selector to place the 3D Viewer inside (e.g., '#viewerContainer' as defined in Containers).string
aOptions(Optional) A set of optional settings to customize the viewer's behavior and appearance.object
cameraDropdownVisible(Optional) Show a dropdown to select available cameras (default: false).boolean
defaultOptions(Optional) A key-value object with attribute ID as key and attribute value as value to load the product with.object
defaultMaterials(Optional) A key-value object with material group ID as key and material reference ID as value to load the product with.object
defaultApplied(Optional) A specialized key-value object to load product with applied materials, using material ID instead of references.object
configuredProduct(Optional) The serialized JSON object of a previous configuration created by saveConfiguration() method.object
temporaryProductId(Optional) A custom ID to assign to the product. This ID will be returned in saveConfiguration() as temporary_id.string
show360Indicator(Optional) A boolean indicating whether to show the 360 animated icon when the configurator loads (default: true).boolean
showProgress(Optional) Show the progress percentage in the loading bar (default: true).boolean
preset(Optional) Load a preset product.string
note

When using presets, it is important to dispatch the client_ready event to the viewer.

window.expivi._events.onReady.subscribe(() => {
    window.expivi._dispatch('client_ready').then(e => {
    });
});