Immersive Experience Builder Quickstart

Estimated reading: 5 minutes

Summary: Learn how to create immersive, branded, discovery-driven virtual experiences that work across desktop and mobile web browsers, without writing any code.

Welcome to your guide on the exciting journey of creating immersive webVR experiences using our Immersive Experience Builder (IXB)! This user-friendly tool empowers you to craft stunning, interactive virtual environments with ease. Whether you’re a seasoned designer or new to the VR scene, this quickstart tutorial will provide step-by-step instructions to help you make the most out of IXB. Let’s unlock the full potential of webVR creation and start turning your imaginative visions into extraordinary virtual realities!

In this guide, we’ll walk through the Immersive Experience Builder (IXB) interface to create a basic virtual space and launch it in a few easy steps without writing any code.

Prerequisites

360 Spherical Images (free assets available)
WebXR.tools Account

Create New Project

In the WebXR.tools dashboard, click the Create New Project button, fill in the Project Name and select the 360 Project Type.

When the Immersive Experience Builder loads, you will notice three distinct sections, The left panel containing the list of scenes, the center panel containing a preview of the current scene, and a right panel with interactive hotspots that we can add into the scene.

Add New Scene

To customize the scenes within your virtual experience, click the + button in the left side panel. This will launch the “Add new scene” form. Give your scene a name, if you’d like to add some audio to this scene, you can upload an mp3 file, select Image as your resource type, and click the 📁 icon to upload your image.

Next drag your 360 image into the asset manager pop-up to upload your file. Once the file is uploaded, click the file then click Select File to set it as your scene’s background. Then click Save Changes to add your new scene to the project.

Next drag your 360 image into the asset manager pop-up to upload your file. Once the file is uploaded, click the file then click Select File to set it as your scene’s background.

Your new scene will be visible in the left side panel. You can remove the default scene by selecting the scene and clicking the icon.

Add Interactive Elements

Now that we have our custom scene set up, we are ready to add some interaction elements. In the right panel there are 3 different types of elements we can add.

Info hotspots add a button into the scene, which users can tap and load an overlay with an image or series of images, a video, an iframe, or link out to an eternal website.
Embedded Hotspots add an image, video, or iframe directly into the scene. These embedded elements can but adjusted to look and feel embedded into the 360 experience.
Navigational hotspots add an arrow button into the scene, which enables users to move between scenes. Use the Go To Scene hotspot to link to a specific scene, or use the Next and Previous Scene hotspots to switch scenes based on the order of the scenes in the left panel.

To add an overlay with an image, click the Image Hotspot from the Info Hotspots list and then click within the scene in the center panel to place the hotspot. Once the hotspot is placed, you can drag it to move it around the scene.

With the hotspot selected, we are able to configure a few settings. The main settings to be familiar with are:

Analytics ID – the unique ID for this hotspot.
Image – the image that will appear at the top of the overlay. Click the 📁 to upload/select the image.
Title – text will appear below the image. This text area supports plain text and HTML.
Description – text that appears below title. This text area supports plain text and HTML.

Below the General and Appearance Settings, there is an option to “Show CTA Button”, click the toggle to enable. This will add a button below the description text if you want to link out to another website.

To preview the overlay, click the toggle to switch from “Edit” mode to “Preview” mode, and click the button to show the overlay.

Customize Project Settings

Click the ⚙ ️next to the project name in the upper left hand corner, to display the Project Settings panel.

The project settings allow you to update the Basic project info, configure audio that will play across all scenes, customize the exit prompt, add custom hotspot icons, or add custom CSS.

Project Info allows you to update the project name, description, and thumbnail image which appear in the dashboard. This information also appears when you share a link to the experience. You can also set a custom Google Analytics ID to send events data directly to your Google Analytics dashboard.

Save, Publish & Preview

Now we are ready to publish our experience and preview it. Click the “Save & Publish” button in the upper right corner. A small grey icon will appear while the project is saving, once it has finished saving a green dot will appear.

Click View Live Project to view your 360 virtual experience. When the experience loads in a new tab, click the Start Experience button to begin exploring the virtual space.