Web SDK Reference | Create context

The createContext() method loads the configurator and initializes a context object that can be used to interact with it.

JS

createContext(productKey, target, options)

Parameters

Name	Type	Required	Description
productKey	`string`	yes	Key of the product to load in the configurator.
target	`HTMLElement <div>`	yes	The target `<div>` DOM content division element where the 3D view will be rendered.
options	`Object{}`	no	Object to pass to the create context function. The object allows to register callback functions to get updates and provide additional settings such as the background of the canvas.

Example

Add a canvas and parameters element to your HTML file and call the createContext() method to initialize the configurator.

HTML

<div id="myCanvas"></div>
<div id="myParameters"></div>

JavaScript

JS

var productKey = '9625cacf-f602-4a00-b7b4-5b50c380ce93';
var canvasContainer = document.getElementById("myCanvas");

var context = window.twikit.createContext(productKey, canvasContainer, {
    loaded: function() {
        // Called when the context finished loading.
        console.log('Context loaded!')
    },
    parametersReady: function(parameterContainer) {
        // Called when parameter HTML elements are ready.
        // 'parameterContainer' is a <div> element with parameter HTML elements contained in it.
        document.getElementById("myParameters").appendChild(parameterContainer);
    },
    parameterDataReady: function(parameters) {
        // Called when parameter data is ready.
        // 'parameters' is an array of parameter data.
        console.log('Parameter data ready: ', parameters);
    },
    parameterGroupsDataReady: function(parameters) {
      // Called when parameter data is ready.
        // 'parameters' is an array of parameter data.
    	console.log('Parameter groups data ready: ', parameters);
    },
    statusChanged: function(status) {
        // Called while loading the context to report progress.
        // 'status' reports the loading state, either idle(0), loading(1), busy(2), ready(3)
        console.log('Twikbot status changed: ', status);
    },
    twikbotContextReady: function(internalTwikbotContext) {
        // called when the internal context is ready
		console.log('Twikbot context ready!');
    }
});