Web SDK Reference | Create context

The createContext() method loads the configurator and initializes a context object that you can use to interact with Twikbot.

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 element where the 3D view will be rendered.
`callbacks`	`Object`	yes	Object that allows you to register callback functions to receive updates from the configurator.
`options`	`TwikbotOptions`	no	Optional object that provides additional settings, such as locale, startup parameters, overriding a configuration, and WebSocket streaming options via `workerConfig`.

`TwikbotOptions` interface

TYPESCRIPT

interface TwikbotOptions {
  locale?: string;
  productStartupParameters?: { [key: string]: string };
  overrideConfiguration?: {
    previewImageUrl: string;
    configurationJson: { parameters: { [key: string]: string } };
  };

  // Used for WebSocket streaming. When specified, disableVisualization should be true
  workerConfig?: IWorkerSocketConfig;
  disableVisualization?: boolean;
}

interface IWorkerSocketConfig {
  hostName: string;
  port: number;
  local?: boolean;
}

Basic 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 containing the parameter HTML elements.
        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 group data is ready.
        // 'parameters' is an array of parameter group data.
        console.log('Parameter groups data ready: ', parameters);
    },
    statusChanged: function(status) {
        // Called while loading the context to report progress.
        // 'status' reports the loading state:
        //   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);
    }
});

WebSocket Example

This example shows how to initialize the configurator using WebSocket streaming via workerConfig. When workerConfig is specified, disableVisualization should be set to true.

HTML

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

JavaScript

JS

var productKey = "f8dc9508-fe8e-4ac6-93f8-205814dd32b0";

var canvasContainer = document.getElementById("myCanvas");

var context = window.twikit.createContext(
  productKey,
  canvasContainer,
  {
    loaded: function () {
      console.log("Context loaded!");
    },
    parametersReady: function (parameterContainer) {
      document.getElementById("myParameters").appendChild(parameterContainer);
    },
    parameterDataReady: function (parameters) {
      console.log("Parameter data ready: ", parameters);
    },
    parameterGroupsDataReady: function (parameters) {
      console.log("Parameter groups data ready: ", parameters);
    },
    statusChanged: function (status) {
      console.log("Twikbot status changed: ", status);
    },
    twikbotContextReady: function (internalTwikbotContext) {
      console.log("Twikbot context ready!");
    },
  },
  {
    workerConfig: {
      // Replace with your host and port
      hostName: "localhost",
      port: "5555",
      // Determines whether to use a secure or insecure WebSocket connection
      local: true,
    },
    disableVisualization: true,
  }
);

Parameters

TwikbotOptions interface

Basic Example

HTML

JavaScript

WebSocket Example

HTML

JavaScript

`TwikbotOptions` interface