Please be aware there is a known issue with images on the Community. We are working to resolve this issue as quickly as possible. We apologize for the inconvenience. If you need urgent help in the meantime, please reach out to technical support or your Threekit representative.

  1. Threekit
  2. Developer Documentation
  3. Connecting and Displaying Externally (APIs)
  4. APIs

Configurator API - Client-side

In this article

The client-side configurator API contains functions for retrieving and setting the product attribute values and can be accessed from the player API, which in turn is the result of the promise returned when embedding the player.

window.threekitPlayer({...}).then(player => window.configurator = player.configurator)
 

Functions

configurator.getAttributes() ⇒ Array of Attribute Objects

Returns an array of attribute objects. This object contains defaultValue, id, name, type and an array of values for that attribute.

configurator.getConfiguration() ⇒ Configuration Object

Returns the current configuration for the product as an object containing Attribute/Value pairs.

> player.configurator.getConfiguration()
<  { 
      [attributeName]: "atributeValue",
      ....
   }
 

configurator.setConfiguration({ AttributeName: AttributeValue, .... })

Sets product configuration using a Configuration Object as parameter. Can assign one or multiple attributes within the same call.

Threekit's Configurator API is initialized by calling player.getConfigurator()
This can be initialized at anytime but typically it's initialized with the player and stored somewhere for later use.

async function init() {
  const player = await window.threekitPlayer({
    assetId: "079838d8-60e9-40d8-93a8-6af73c255bef",
    authToken: "00000000-0000-0000-0000-000000000000",
    el: document.getElementById("player-el"),
  });

  window.player = player;
  window.configurator = await player.getConfigurator();
}

init();
 

configurator.getMetadata() ⇒ Metadata Object

Returns the metadata for the product as an object containing Key/Value pairs.

> player.configurator.getMetadata()
<  { 
      [key]: "value",
      ....
   }
 

Attribute Types

It's worth mentioning the difference between primitive values & part reference values. Primitive values (e.g. String, Number, etc) are straightforward.

Primitive Values

configurator.setConfiguration({ Color: "Red" });
 

However, reference attributes (e.g. materials, parts, etc.) receive the id of the Threekit Item/Asset. For example, to set the Wheels attribute in this example, we need to pass the id of the Wheel Item as the value.

Part References

configurator.setConfiguration({
  Wheels: { assetId: "26e0c72c-77a2-4fae-a81d-c995e32187f2" },
});
 

Setting Values

Let's begin with an example that takes values from an external form and sets the player's configuration.

<div>
  <label>Color:</label>
  <select name="Color" onchange="setConfig(event)">
    <option value="Blue">Blue</option>
    <option value="Black">Black</option>
    <option value="Green">Green</option>
    <option value="Grey">Grey</option>
    <option value="Red">Red</option>
  </select>

  <label>Wheels:</label>
  <select name="Wheels" onchange="setConfig(event)">
    <option value="26e0c72c-77a2-4fae-a81d-c995e32187f2"> Cool Option 1 </option>
    <option value="a3819592-3f98-4d32-bedd-2c0205d3ba5b">Awesome Option 2</option>
  </select>
</div>

<script>
  function setConfig(ev) {
    const attrName = ev.target.name;
    const value = ev.target.value;
    window.configurator?.setConfiguration({ [attrName]: value });
  }

  async function initPlayer() {
    const player = await window.threekitPlayer({
      assetId: "079838d8-60e9-40d8-93a8-6af73c255bef",
      authToken: "00000000-0000-0000-0000-000000000000",
      el: document.getElementById("player-el"),
    });

    window.player = player;
    window.configurator = await player.getConfigurator();
  }

  initPlayer();
</script>
Was this article helpful? Was this article helpful?
0 out of 0 found this helpful
Return to top

Related articles

Powered by Zendesk