Whether you’re a web developer or a webshop owner, our API is the ultimate tool for enhancing your webshop or website with immersive 3D experiences. Follow these steps to get started to connect your webshop with our 3D product configurator.

Prerequisites

Before diving into the integration process, make sure you meet the following prerequisites:

• API Access: The Vulp API is exclusively available for enterprise customers and requires activation by the Vulp team.

Integration Steps

1. Include the Vulp JavaScript API

Add the following code to a JavaScript file loaded by your application to include the Vulp JavaScript API:

import('https://api.vulp.studio/v1/api.js')
    .then(async ({ VulpApi }) => {
      // Your code here
    })
    .catch(err => {
      console.error(err);
    });

2. Initialize the API

Once the Vulp API is loaded, initialize the API using the initialize method before use:

await VulpApi.initialize();

3. Register a Model

Interaction with a Vulp model requires registration with the Vulp API. Register a model using the registerModel method, providing the iframe containing the Vulp model as a parameter:

const model = await VulpApi.registerModel(
  document.querySelector('iframe') as HTMLIFrameElement
);

4. Listen for Messages

Set up listeners for messages to stay informed about the status of the Vulp model. Various listeners, such as onReady, onModelUpdated, and more, can be registered. Refer to the appropriate technical docs for detailed information:

model
  .onReady(({ model, view, apiVersion }) => {
      // Model is ready to accept commands
  })
  .onModelUpdated(({ model }) => {
    console.log(model);
  })

5. Send Commands

The JavaScript API enables sending commands to the Vulp model. Commands like activateAr, changeColor, and more are available. Consult the appropriate technical docs for detailed information:

const { activated } = await model.activateAr();

6. Retrieve Information

At any time, after the API has been initialized, retrieve information from the model using commands like getModelConfig and getViewConfig:

const { model } = await model.getModelConfig();

Technical Documentation

For a comprehensive understanding of the Vulp 3D Configurator API, refer to our full technical documentation available https://docs.vulp.studio/docs/api/introduction/getting-started/. Explore the possibilities and elevate your web application with engaging 3D experiences!

Ready to transform your user experience? Integrate the Vulp 3D Configurator API today!

Demo Application

Explore the capabilities of the Vulp JavaScript API with our demo application at https://api-demo.vulp.studio/.

This application serves as a technical showcase, presenting the Vulp model on the left side and the parent application on the right. Please note that styling has been intentionally kept minimal to emphasize technical aspects.