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, callbacks, 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.
callbacks	`Object`	yes	The object allows to register callback functions to get updates.
options	`ITwikbotOptions`	no	This object provides additional settings such as initializing from an existing configuration TYPESCRIPT `interface TwikbotOptions { locale?: string; productStartupParameters?: { [key: string]: string }; overrideConfiguration?: { previewImageUrl: string; configurationJson: { parameters: { [key: string]: string } }; }; }`

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!');
    },
    outputParametersChanged: function(outputParameters) {
        // Called when the output parameters change
        console.log('Output parameters changed: ', outputParameters);
    }
});