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.


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

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:

    .then(async ({ VulpApi }) => {
      // Your code here
    .catch(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:

  .onReady(({ model, view, apiVersion }) => {
      // Model is ready to accept commands
  .onModelUpdated(({ 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.

Frequently asked questions

How does the Augmented Reality feature work?

The Augmented Reality feature allows you to view the virtual product in your real environment using your mobile device. By clicking a button, you can see a lifelike preview of the product in your own space, which helps you make a more informed purchase decision. This feature works seamlessly on both iOS and Android devices.

What makes Vulp special?

The development of Vulp, a 3D animation tool, was driven by the growing demand for interactive 3D elements on websites and trade shows. The team at Foxmountain, known for their expertise in creating beautiful and realistic 3D animations, developed Vulp to meet this need. Utilizing the latest technology in WebXR, Augmented Reality and advanced rendering capabilities, Vulp is not only visually stunning but also sustainable and future-proof.

What does Vulp cost?

The cost of Vulp is divided into two parts: a subscription fee to access Vulps features and view virtual products on your website, starting at €6.99 per month, and the cost of creating a visually appealing 3D product. This can range from creating a product from scratch, using a technical drawing, or using a 3D scan, starting at around €100 per product. However, it's best to contact Foxmountain for a detailed quotation as the cost may vary depending on the product.

How can I integrate the Vulp 3D Configurator into my website or webshop?

Integrating the Vulp 3D Configurator into your website or webshop is very simple. It works much like embedding a YouTube video. You just need to copy the code from our code generator and add it to your platform, whether it's WooCommerce, Shopify, Magento, or others. No coding skills are required.

Is the Vulp 3D Configurator user-friendly for non-technical users?

Yes, the Vulp 3D Configurator is designed to be user-friendly and intuitive. You don't need any technical skills to use it. The interface is straightforward, and extensive documentation and support are available to help you get the most out of the configurator.

What is the Vulp 3D Configurator and how does it work?

The Vulp 3D Configurator is a tool that allows you to personalize your products with realistic 3D visuals. You can customize colors, materials and various options to create a unique product. It integrates seamlessly into any website or webshop and provides a 360-degree view and augmented reality experience without needing to download an app.

Do I need to download an app to use the Vulp 3D Configurator?

No, you don't need to download any app to use the Vulp 3D Configurator. It is a web-based tool that allows you to view and interact with products in 3D directly from your browser. This includes viewing products in Augmented Reality on both iOS and Android devices.

What are the main features of the Vulp 3D Configurator?

The main features of the Vulp 3D Configurator include integrability into any website or webshop, 3D animation and interaction, multilingual support, configurable product variations, customizable colors, augmented reality, no app requirement, full customization options, API availability, realistic materials, shadows, and lighting, textual hotspots, and an intuitive user-friendly interface.

Contact us

Foxmountain | Vulp


+31 (0)617 375 018
De Stater 20
5737RV Lieshout
The Netherlands
X (Twitter) LinkedIn