Customize the Intro Screen

Estimated reading: 3 minutes

Summary: In this guide, we’ll use the WebXR.tools Virtual Space editor to customize the intro screen for 360 virtual experiences.

WebXR.tools 360 360 Studio allows you to create immersive, branded, discovery-driven virtual experiences that work across desktop and mobile web browsers, without writing any code.

In this guide, we’ll use the WebXR.tools Virtual Space editor to customize the intro screen for 360 virtual experiences.

Prerequisites

WebXR.tools Account

Project Setup

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

When the 360 editor 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 the various interactive hotspots that we can add into the scene.

Customize the Intro Scene

Click the Intro tab in the left side panel, just below the project name.

This will load the Intro screen. The intro page is a landing page that allows you to add custom graphics such as branding or instructions, and to customize the call to action button that users will click/tap to begin the virtual experience.

Basic Intro

The default Intro is very simple with an input to customize the button text and a color selector for updating the button color.

Custom Intro

For more granular control, enable the custom intro settings using the Custom Intro toggle at the top of the right side panel.

Once the custom intro is enabled, you will notice that the default intro button is hidden and an empty grey overlay screen is visible, along with three new inputs.

The Overlay opacity specifies a value between 0 and 1 representing the percentage of how opaque the overlay layer should appear. The Background sets an image to cover the entire screen. While Content sets an interactive graphic that replaces the call to action button, so when the user taps/clicks the Content graphic it will start the experience.

Set the Overlay opacity to 0.70 to represent 70% opacity. Next, click the 📁 next to the Background input to select the image that will appear as the background. Lastly, click the 📁 next to the Content input to select the image asset that will appear in place of the call to action button.

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 the View Live Project button 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.