Getting Started

Pre-requisites

API access

Note that the Vulp API is exclusively available for enterprise customers and requires activation by the Vulp team.

Secure context

In order for the Vulp API to function, it is required that your application is running in a secure context. In practice, this means that your website must use be served over https://, except when it’s running on localhost (in that case http:// is allowed).

Integration

Integrating the Vulp JavaScript API

To include the JavaScript API in a web application, add the following code to a JavaScript file loaded by your application.

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

Initializing the API

Once the VulpApi is loaded, initialize the API using the initialize method before use.

Example 
  await VulpApi.initialize();

Registering a model

Interaction with a Vulp model requires registration with the VulpApi. Register a model using the initialize method, providing the iframe containing the Vulp model as a parameter.

The Vulp JavaScript API supports registering multiple models.

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

Listening for messages

After registering the model it is possible to setup listeners for messages. The following listeners can be registered:

Refer to the appropriate technical docs for detailed information.

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

Sending commands

The JavaScript API enables sending commands to the Vulp model. The following commands are available:

Please consult the appropriate technical docs for detailed information.

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

Getting information

At any time (after the API has been initialized) is it possible to retrieve information from the model.

Example 
const { model: modelInfo, links } = await model.getModelConfig();
console.log(modelInfo, links);

Technical documentation

Full technical documentation can be found under @vulp/js-api.

← Animation
Demo application →