It is our mission to make Vulp as user-friendly as possible for our valued customers, both during the implementation phase and for the end user. While we strive for intuitive use, we understand that a comprehensive manual can be invaluable, especially when you want to make the most of the extensive features that our 3D configurator has to offer.

For in-depth and detailed explanations, we invite you to consult our extensive documentation at https://docs.vulp.studio.

Basic Integration

We aspire to be the ‘YouTube’ for virtual products, aiming to make Vulp accessible to a wide audience, ranging from end-users to owners of webshops and websites. To facilitate this, we provide a directly implementable script from our CMS:

<iframe
  src="https://vulp.studio/<customerId>/<modelId>/<lang>"
  allow="xr-spatial-tracking; fullscreen"
  referrerpolicy="no-referrer-when-downgrade"
  width="600"
  height="400"
  frameBorder="0"
  title="vulp.studio"
></iframe>

Automatically filled values in the sample code include customer name (customerId), product name (modelId), and language (lang).

Parameters

Shape the 3D configurator fully by adding parameters to the URL.

We categorize parameters into different sections:

  1. Style of virtual product
  2. Appearance of the Vulp viewer
  3. Camera settings
  4. Buttons and overlays
  5. Animations

Style of virtual product

Vulp offers a wide range of features to present your product catalog. Through parameters in the Vulp script, you can easily change colors and materials, and even add new colors.

Colors example

Also, adjust the lighting of the product, including reflection, illumination, and shadow, through parameters in the URL.

Appearance of Vulp viewer

Give the 3D configurator the appearance you desire. Turn buttons on and off, and customize the background color. Configure buttons to match the style of your website, including text color, background color, and border.

Customize viewer example

Adjust texts, set your own Augmented Reality message per product, and select the desired language via the URL of the Vulp iframe.

Additional product information

Vulp is perfectly suited to provide detailed information about a product, whether on a landing page or in a webshop. Through textual hotspots, you can highlight unique selling points with text and images. Want to emphasize the technical aspects of your product? Use the layers function to clearly display all dimensions in 3D. Activate the layers through parameters.

Layers Example

Camera settings

Adjust the position of the camera relative to the 3D model. Whether the model is free-standing or against a wall, you determine what the viewer can see through camera constraints in terms of rotation, zoom, and the camera’s starting point.

Animations

Vulp is an interactive 3D configurator. In addition to the ability to manipulate camera movements to view the 3D product from all angles or place it in your own environment with Augmented Reality, you can also apply animations to the 3D model itself. Think of movements to view the inside in an ’exploded view’ or realistic movements of your product. Almost anything is possible. With Vulp, you create your own interactive 3D animation. There are various ways these animations can be activated, via buttons, interaction with the 3D product, or automatically. Specify through parameters what the animation should do.

Animation Example

We continue to work on the development of our 3D configurator, constantly adding new features to make the 3D viewer suitable for e-commerce, landing pages, or interactive work descriptions. For a detailed description of all our features, we refer to our documentation website: https://docs.vulp.studio.

Available parameters

Parameter Description
Model styling
color Sets the default color of the product
color-<group> Sets the default color of a ‘color-group’ of the product
shadow-intensity Sets the intensity of the floor shadow
Configurator styling
background-color Sets the color of the background
menu-color Sets the color of the menu buttons
menu-fill-color Sets the color of the background of the menu buttons
menu-stroke-color Sets the color of the border of the menu buttons
menu-icon-color Sets the color of the icon in the menu buttons
hotspot-color Sets the color of information hotspots
tooltip-background-color Sets the background color of the ’tooltips’
tooltip-text-color Sets the text color of the ’tooltips’
Camera
auto-rotate Determine whether the product should rotate automatically
camera-orbit Sets the starting position of the camera
camera-target Sets the center point of the camera rotation
ar-placement Determine whether the virtual product is on the wall or on the floor
min-camera-orbit Set restrictions on camera movement
max-camera-orbit Set restrictions on camera movement
disable-zoom Determine whether you can zoom in/out or not.
disable-tap Determine whether you can tap to move the camera’s rotation center
ar-scale Determine whether you can scale the product in Augmented Reality
Buttons and overlays
menu Turn off the entire menu
color-button Turn off the color button(s)
overlay-button Turn off the overlay button
hotspot-button Turn off the information hotspot button
title Turn off the title/product name
hotspots Determine if hotspots are visible or not on opening
Animation
autoplay Determine if an animation should start automatically when opening Vulp

Frequently asked questions

What is Augmented Reality (AR)?

Expand
Augmented Reality (AR) is a technology that adds digital information to a users view of the real world, usually through a device such as a smartphone or headset. It enhances the users perception of the real world, rather than replacing it with a virtual one.

What is the difference between AR and VR?

Expand
Augmented Reality (AR) adds virtual elements to the real world, while Virtual Reality (VR) fully immerses users in a virtual environment. Although VR and AR offer different experiences, it is possible to combine elements of both to create a virtual studio. For example, Vulp utilizes Augmented Reality, but by loading a complete scene such as a bathroom, it can simulate the sensation of Virtual Reality. This allows users to interact with the virtual bathroom while simultaneously experiencing the real world, resulting in enhanced immersion and engagement.

What are the advantages of AR?

Expand
Augmented Reality (AR) has the potential to revolutionize the e-commerce industry by providing customers with an immersive and interactive shopping experience. By allowing customers to see how products will look in their own space, improving product visualization and facilitating virtual try-on, AR can increase customer engagement and satisfaction. Additionally, AR can improve customer service and reduce product returns. As the technology continues to evolve, more e-commerce companies are likely to incorporate AR into their online platforms to enhance the customer experience.

What makes Vulp special?

Expand
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?

Expand
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.

Where can I integrate Vulp?

Expand
The Vulp configurator can be easily integrated into any website through the use of an HTML iframe. Simply copy and paste the iframe code into your webpage. Using such iframe it is easy to embed Vulp on e-commerce platforms such as Shopify, Magento, Adobe Commerce, WooCommerce, Shopware, PrestaShop, WordPress and more.

Do I need coding experience to integrate Vulp?

Expand
No, we take care of all the technical work for you. All you have to do is copy and paste the code generated by our code generator into your website. If you have any difficulties, don't hesitate to reach out to your contact person for support.

Contact us

info@vulp.studio

Foxmountain

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