Putting it All Together

Put it together

Example:
<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Simple Embed Test</title>
    <style type="text/css">
        div#myViewer {
            position: relative;
            width: 1132px;
            height: 768px;
        }
    </style>
    <script src="https://configurator360.autodesk.com/Script/v1/EmbeddedViewer"></script>
</head>
<body>
<h1>Test</h1>

<div id="myViewer"></div>

<script type="text/javascript">
    (function (window) {
        "use strict";
        var C360 = window.ADSK && window.ADSK.C360;

        // callback for getPropertyValues.
        function listProperties(result) {
            window.console.log(window.JSON.stringify(result, null, '  '));
        }

        // dummy implementation for handling error codes.
        function reportError(code) {
            var state = C360.loadedState;
            if (code === state.GPUAccelerationDisabled) {
                window.alert('GPU hardware acceleration is disabled.');
            } else if (code === state.SecurityBlocked) {
                window.alert('Blocked for security reasons.');
            } else if (code === state.Not3DCapable) {
                window.alert('The graphics card is not 3D capable.');
            } else if (code === state.Error) {
                window.alert('The viewer failed to load for an unknown reason.');
            } else if (code === state.NotStandardsCompliant) {
                window.alert('The browser is not supported and probably needs to be updated.');
            } else if (code === state.WebGLNotSupported) {
                window.alert('The browser does not support WebGL.');
            } else if (code === state.ThirdPartyCookiesDisabled) {
                window.alert('Third party cookies are disabled for the browser.');
            } else if (code === state.DesignOpenInOtherWindowOrTab) {
                window.alert('A Configurator 360 design is open in another browser window or tab.');
            } else if (code === state.ServerMessageMaintenance) {
                window.alert('Configurator 360 is undergoing maintenance.');
            } else if (code === state.BadRequest) {
                window.alert('Bad request for the design.');
            } else if (code === state.Forbidden) {
                window.alert('Access to the design is forbidden.');
            } else if (code === state.NotFound) {
                window.alert('The design was not found.');
            }
        }

        // success handler
        function viewerLoaded(viewer) {
            // The C360Viewer is loaded, do something with it.
            viewer.getPropertyValues(null, listProperties);
        }

        // error handler
        function failedToLoad(viewer) {
            reportError(viewer.state);
            viewer.unload(); // Unload the C360Viewer
        }

        // timeout handler
        function sessionTimeout(viewer) {
            window.alert('The session timed out');
            viewer.unload(); // Unload the C360Viewer
        }

        // Check if the API was loaded.
        if (C360) {

            // Check client compatibility and load the viewer if compatible.
            C360.checkCompatibility(function (result) {
                if (result.compatible) {

                    // Initialize the viewer
                    C360.initViewer({
                        container: "myViewer",
                        design: "123456789/abcdefghij",
                        panes: false,
                        success: viewerLoaded, // Set success handler
                        error: failedToLoad, // Set error handler
                        timeout: sessionTimeout // Set timeout handler
                    });

                } else {
                    reportError(result.reason);
                }
            });

        }
    }(this));
</script>

</body>
</html>
Putting it All Together

Put it together

Related Reference
