Skip to main content

Sample code

The following sample contains a responsive fullscreen layout with a configurator.

<html>
    <head>
        <title>Expivi - 3D Viewer sample code</title>
        <script src="{api_asset_url}/{version}/viewer.js"></script>
    </head>

    <body style="width: 100%; height: 100%; margin: 0; padding: 0">
        <div id="viewerContainer" style="width: 100%; height: 600px;"></div>

        <script type="text/javascript">
            var apiToken = 'YOUR_TOKEN';

            window.addEventListener('load', function () {
                /**
                 * Create expivi viewer
                 * @param token string
                 * @param catalogue_id product's catalogue id
                 * @param container string dom selector to put viewer
                 * @param showDropdownCamera boolean
                 **/

                window.expivi._create(
                    apiToken,
                    421,
                    "#viewerContainer",
                    { show360Indicator: true }
                );

                /**
                 * Wait until expivi is ready to communicate with
                 **/
                window.expivi._events.onReady.subscribe(function () {
                    console.log("Expivi ready!");

                    /**
                     * Tell expivi we are ready to receive events
                     **/
                    window.expivi._dispatch("client_ready").then(function () {
                        console.log("after client ready");

                        /**
                         * Rotate the product automatically until user interacts with viewer
                         **/
                        window.expivi.autoRotateYAxis();

                        /**
                         * Get all available attributes inside product
                         **/
                        window.expivi.getProductAttributes().then(function (attributeItems) {
                            console.log("got attributes", attributeItems);
                        });
                    });
                });

                /**
                 * Subscribe to changes on viewer/configurator
                 **/
                window.expivi._events.onChange.subscribe(function (aEvent) {
                    if (aEvent.name !== "frame") {
                        console.log("event change: ", aEvent);
                    }
                });

            });
        </script>
    </body>
</html>