Embedding Configurator 360 viewer

You can embed a Configurator 360 Design in your web site. See an example here.

Usage

Enable Embedded Viewer

You must enable embedding in the Embedding Options in Configurator 360.


Reference our API script

Add our API script to your web page.

Example:

<script src="https://configurator360.autodesk.com/Script/v1/EmbeddedViewer"></script>

Container

Include a container element where you want the viewer to show up on your page. The viewer will fill the container so it is recommended to set the size.

Example:

<div id="myViewer" style="position:relative;width:1132px;height:768px;"></div>

Initialize Viewer

Include JavaScript code to initialize the viewer.

Example:

<script type="text/javascript">
    var C360 = window.ADSK && window.ADSK.C360;

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

        // Initialize the viewer
        C360.initViewer({
            container: "myViewer",
            design: "1234/abcd",
            panes: {    // Panes to show
                parameters: true,
                message: true
            },
            success: function(viewer) { /* Do something */ },
            error: function(viewer) { /* Handle Error */ },
            timeout: function(viewer) { /* Handle Timeout */ }
        });

    }
</script>

Putting it all 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.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>

API Reference

ADSK.C360.initViewer(settings)

Initializes the Configurator 360 Viewer.

settings
Type: Plain Object
A set of key/value pairs that configure the viewer. For an example configuration, see initViewer arguments on the sample page.

container (Required)
Type: String or DOM Element
Specifies the container for the viewer. When the viewer is created, it will fill this container element. The value can either be a String representing the ID of the container or it can be the DOM Element.

Example:

<div id="myViewer"></div>
// Use String
container: 'myViewer'

// Use DOM Element
container: document.getElementById('myViewer')

design (Required)
Type: String
Specifies the Configurator 360 design to load in the viewer. The value should be the path part of the design URL on the Configurator 360 site. (Format is '123456789/abcdefg')


panes (Optional => default: true)
Type: Boolean or Plain Object
true means show; false means hide.
If this setting is a Boolean, it means show or hide all panes. (Default is show all.)
If this setting is null or an empty object ({}), it will hide all panes.
If this setting is an object, each name represents a pane to show or hide; each value must be Boolean. The default is hide if a pane is not listed.

See ADSK.C360.getPanes() for details on available panes.


openFromFile (Optional)
Type: Blob
Contents of a .ikms file (generated from the Configurator 360 save operation) to load into the viewer. The session must have been saved from the same design being opened or it will be ignored. This is typically obtained from an <input type="file"> element or from an XMLHttpRequest with responseType = 'blob'.


standardErrorDialogs (Optional => default: true)
Type: Boolean
If true, C360 shows the standard error dialogs. The error callback is invoked immediately after the error dialog is displayed. If false, C360 simply calls the error callback and does not display anything. It’s up to the error callback to show anything.


standardTimeoutDialogs (Optional => default: true)
Type: Boolean
If true, C360 shows the standard timeout dialogs. The timeout callback is invoked after the user clicks the "Terminate Now" button, or the session times out. If false, C360 simply calls the timeout callback when the session times out and does not display anything. It’s up to the timeout callback to show anything.


success (Optional)
Type: Function (function (viewer) { })
Callback function that will be called if/when the Configurator 360 viewer is successfully loaded.

viewer
Type: C360Viewer


error (Optional)
Type: Function (function (viewer) { })
Callback function that will be called if the Configurator 360 viewer fails to loaded for any reason.

viewer
Type: C360Viewer


timeout (Optional)
Type: Function (function (viewer) { })
Callback function that will be called if the Configurator 360 session times out.

viewer
Type: C360Viewer


ADSK.C360.getPanes()

Returns an array containing the names of all available panes.

[
    'branding',
    'parameters',
    'model',
    'actions',
    'message',
    'autoupdate'
]
branding
Contains the branding information for your tenant (company name, logo, etc)
parameters
Contains the properties for the selected part on the model tree
model
Contains the model tree of parts
actions
Contains the buttons for actions for the selected part
message
Contains the messages (errors, etc) for the selected part
autoupdate
Pane that overlays the viewer which contains the checkbox for enabling auto-update, update button, and "graphics out of date" indication label if unchecked.

ADSK.C360.checkCompatibility(callback)

Performs a compatibility check to see if the user's browser is compatible with the Configurator 360 Viewer.

callback
Type: Callback Function
result will be a Plain Object with the following properties:

compatible
Type: Boolean
true if compatible, otherwise false.


reason
Type: Number
Specifies a code representing the reason for the value of the compatible property.
All possible values are represented by the properties on ADSK.C360.loadedState.

Examples:

{
    compatible: true, // Is Compatible
    reason: ADSK.C360.loadedState.Loaded,
}

{
    compatible: false, // Is Not Compatible
    reason: ADSK.C360.loadedState.Not3DCapable,
}

ADSK.C360.loadedState

A Plain Object containing all possible values for result.reason from ADSK.C360.checkCompatibility().

Think of this object as an enumeration (enum) type.

{
    GPUAccelerationDisabled: value,
    SecurityBlocked: value,
    Not3DCapable: value,
    TemporarilyUnavailable: value,
    Error: value,
    Loaded: value,
    NoSilverlight: value,
    NotStandardsCompliant: value,
    WebGLNotSupported: value,
    ThirdPartyCookiesDisabled: value,
    DesignOpenInOtherWindowOrTab: value,
    ServerMaintenance: value,
    Forbidden: value,
    NotFound: value
}
Loaded
compatible: true
Model is loaded or should load successfully.
SecurityBlocked
compatible: true
Blocked for security reasons. Some browsers (such as Safari on Macintosh) block WebGL by default. The user will be prompted to enable WebGL.
GPUAccelerationDisabled
compatible: false
GPU hardware acceleration is disabled.
Not3DCapable
compatible: false
The graphics card is not 3D capable, or WebGL is disabled. The user will be prompted to enable WebGL if it is disabled, or to download a browser that supports WebGL.
TemporarilyUnavailable
compatible: false -Deprecated
GPU acceleration is temporarily unavailable.
NoSilverlight
compatible: false -Deprecated
Silverlight not installed or outdated.
NotStandardsCompliant
compatible: false
Browser is not standards compliant.
Error
compatible: false
Unknown error.
WebGLNotSupported
compatible: false
The browser does not support WebGL. The user will be prompted to enable WebGL if it is disabled, or to download a browser that supports WebGL.
ThirdPartyCookiesDisabled
compatible: false
Third party cookies are disabled for the browser.
DesignOpenInOtherWindowOrTab
compatible: false
A Configurator 360 design is open in another browser window or tab.
ServerMaintenance
compatible: false
Configurator 360 is undergoing maintenance.
Forbidden
compatible: false
Access to the design is forbidden.
NotFound
compatible: false
The design was not found.

C360Viewer

Configurator 360 Viewer object, which contains the API for interacting with the viewer.

Only the unload method is available if this object was obtained as a result of an error.

unload()

Unload the Configurator 360 Viewer from the page.

After unloading the viewer, the object should not be used again.


getPropertyValues(filter, callback, error)

Gets the UI Property values for the loaded design in a tree structure.

filter (Optional => default: '')
Type: String
The refChain of the part to get properties for. If undefined, null, or empty string (''), it will give values from the root.

callback (Optional)
Type: Callback Function
result will be a plain object with a tree structure of the properties for the part and its children in an array.

Examples:

// Non-ETO/iLogic application
{
    "refChain": "Root",
    "properties": [
        {
            "name": "Tier",
            "value": "1 Tier"
        },
        {
            "name": "Casters",
            "value": false
        },
        {
            "name": "Total_Price",
            "value": "$700"
        }
    ]
}
// ETO application
{
  "refChain": "Root",
  "properties": [
    {
      "name": "uiCompany",
      "value": "[Enter Company]"
    },
    {
      "name": "uiTitle",
      "value": "[Enter Title]"
    }
  ],
  "children": [
    {
      "refChain": "Root.Cap",
      "properties": [
        {
          "name": "uiBOMPartNumber",
          "value": "Cap_15CN_NoIndicator_0_3_4"
        }
      ]
    },
    {
      "refChain": "Root.Bowl",
      "properties": [
        {
          "name": "uiBOMPartNumber",
          "value": "Bowl_15CN_Single_NoDrain"
        }
      ]
    }
  ]
}

error (Optional)
Type: Error Callback Function


setPropertyValues(properties, callback, error)

Sets UI Property values for the loaded design.

properties (Required)
Type: Plain Object or Array of Plain Objects
Specifies which properties to set and to what values.

Examples:

// Set Properties prop1 and prop2 on the root part.
viewer.setPropertyValues({prop1: 5, prop2: 'some string'});
//Do the same with an array
viewer.setPropertyValues([{'name': 'prop1', 'value': 5}, {'name': 'prop2', 'value': 'some string'}]);
//Do the same with a tree structure
viewer.setPropertyValues({
    "refChain": "Root",
    "properties": [
        {
            'name': 'prop1',
            'value': 5
        },
        {
            'name': 'prop2',
            'value': 'some string'
        }
    ],
    'children': [] // can include child parts with more properties to set
}]);

callback (Optional)
Type: Callback Function
result will be a plain object with a tree structure of at least the properties that were affected by the operation. There may be additional properties included that weren't necessarily changed. See the examples for the result of the getPropertyValues() function for the format.

error (Optional)
Type: Error Callback Function


enableAutoUpdate(enable, callback, error)

Enables or disables auto-update feature, which automatically updates the 3D view when properties change. Also updates the state of the checkbox and the display of the button associated with the feature.

enable (Required)
Type: Boolean
true to enable auto-updates, false to disable.

callback (Optional)
Type: Callback Function
result will be true if auto-update was enabled or false if disabled.

error (Optional)
Type: Error Callback Function


updateViewer(callback, error)

Forces the viewer to update the 3D view.

callback (Optional)
Type: Function
Same as the standard Callback Function except with no parameters.

error (Optional)
Type: Error Callback Function


getActions(data, callback, error)

Gets a list of available actions for a part.

data (Optional => default: undefined)
Type: Plain Object
Input object containing the following properties. If undefined, null, or empty string (''), it will give actions from the root.

refChain
Type: String
Specifies the target part to get actions for.

callback (Optional)
Type: Callback Function
result will be an array of Plain Objects with the following properties:

category
Type: String
Category name.

displayName
Type: String
The display name.

name
Type: String
Internal name of the action. Use this to refer to the action programmatically as in executeAction.

error (Optional)
Type: Error Callback Function


executeAction(data, callback, error)

Executes an action on a part. For output actions: if no callback is supplied, the generated file will be downloaded by the browser. Otherwise the file will not be automatically downloaded.

data (Required)
Type: Plain Object
Input object containing the following properties.

refChain (Optional => default: "Root")
Type: String
Specifies the target part.

name (Required)
Type: String
Specifies the name of the action.

callback (Optional)
Type: Callback Function
result depends on the type of action executed:

error (Optional)
Type: Error Callback Function


save(callback, error)

Saves the session in a .ikms file. If no callback is supplied, the file will be downloaded by the browser. Otherwise the file will not be automatically downloaded.

callback (Optional)
Type: Callback Function
result will be a Plain Object with the following property:

url
Type: String
The URL of the generated .ikms file.

error (Optional)
Type: Error Callback Function


state

Type: Number
Specifies a code representing the state of the Configurator 360 Viewer.
All possible values are represented by the properties on ADSK.C360.loadedState.


Callback Function

Type: Function (function (result) { })
If defined, the callback function is called when the operation completes in the context of the C360Viewer object with the result of the operation as the only argument.

Error Callback Function

Type: Function (function (err) { })
If defined, the callback function is called when the operation fails in the context of the C360Viewer object with the Error object as the only argument.