1. Home
  2. Docs
  3. WP VR
  4. Getting Started with WP VR
  5. HotSpot Settings

HotSpot Settings

For an active scene, you can add multiple hotspots. With this option, you can link any of your scenes with other scenes. Also, you can add image, link or video information via this option. 

Under HotSpot you get the following options: 

HotSpot Menu

HotSpot ID: You have to provide a unique hotspot ID for every hotspot you create in a scene. 

Hotspot ID

Finding Pitch and Yaw:

You will be needing Pitch and Yaw values to set up many features in the Scene Settings and Hotspot Settings. Here are instructions on how to collect the Pitch and Yaw.

After you click on the “Preview” button and load the preview of the tour below, you can click anywhere on the tour preview and you will see some values appearing below the tour preview.

Hotspot pitch and yaw

As indicated, these numbers are the values of Pitch and Yaw coordinates of the point where you clicked.

Example:
Let’s say you wish to add a Hotspot at the center of this table (on the picture). Simply click on the center of the table, and you will see the values of Pitch and Yaw coordinates will update.

You can then collect these values and use them to indicate the position where the hotspot will be placed. (This will get more clear as you apply the instructions and read this documentation further.)

You can copy the Pitch and Yaw and input them in the required fields.

Pitch And Yaw Inputted

Or, you can click on the arrow button (beside the Pitch and Yaw coordinates under the Tour preview) to automatically collect and place Pitch and Yaw values in the Pitch and Yaw fields for a Hotspot.

Collect Pitch and Yaw

Once you are done setting up the hotspot, click on the Preview button and a hotspot icon will appear in the current scene on the spot from where you collected the coordinates of the Pitch and Yaw.

Basic Hotspot Icon

HotSpot Type

There are two types of hotspots available:

  • Info
  • Scene
Hotspot Types

Info Type Hotspot

When you come to the Hotspot tab, the Hotspot-type is by default selected as ‘Info’.

Info Type Hotspot

Here, you will find the fields, it will view the fields ‘URL’, ‘On Click Content’ and ‘On Hover Content’

URL: Provide URL of a website, so clicking on hotspot will take you to that website on a new tab. 

On Click Content: Here you can add HTML content to your hotspot. Clicking on the hotspot will display a pop-up window over the tour with the content you entered.

On Hover Content: Here you can add HTML content to your hotspot. The content will appear if you just hover your mouse on the hotspot.

**Content Format: You can use different types of content for On Click or On Hover Contents (since they are HTML compatible).

  • Paragraph: Use <p>”Content”</p> format as shown in the following image.
Paragraph type content
  • Image: Use <img src=”your image link”> format as shown in the following image.
Image type content
  • Embedded Video: Copy embedded video link and paste as shown in the image below.
Video type content

The images shown above are examples of adding a paragraph, image or video on On-Click content. Use the same process if you wish to add paragraph, image or video for On Hover content as well.

Scene Type Hotspot

You may change the hotspot type to ‘Scene’. The ‘Scene’ type hotspot is used when you wish to link your current scene with another, i.e. clicking on this hotspot will take you to another scene.

Scene type hotspot

It will view the fields ‘On Hover Content’, ‘Select Target Scene from List’ and ‘Target Scene ID.’ 

On Hover Content: Here you can add HTML content to your hotspot. This content will appear if you just hover your mouse on the hotspot.

Select Target Scene from List: Every Scene you create, their Scene IDs get listed here for you to choose from. Whichever you choose will be the scene where the hotspot will take you.

Scene List

Target Scene ID: This field shows you the Id of the Scene that this hotspot is assigned to take you to.

Target Scene ID

When you choose a hotspot to be Scene type, the hotspot icon on the tour will change to a small Arrow.

Scene type hotspot icon

Target Scene Pitch and Target Scene Yaw: In these fields, you may input the Pitch and Yaw of Target scene you set in order to define the initial view of that scene.

Let’s look at an example.

Let’s say the viewer is on a scene in the bar and when clicked on the hotspot, it will take the viewer to the rooftop dining space. Now, let’s say you want it so that when this scene loads, the initial view will be towards the center of a table.

To do this, first set the Target Scene ID. Then preview the tour. On the tour preview, click on the hotspot and it will take you to your target scene.

There, click on the center of the table and you will find the Pitch and Yaw below the Preview tour. Copy these values and insert them in the fields Target Scene Pitch and Target Scene Yaw respectively.

And that’s it. Now clicking on this hotspot will take it to that scene and the initial view will be facing towards the center of the table.

Hotspot Custom Icon

You can change the default icons for hotspots.

Hotspots custom Icon (Pro feature): You choose from over 900+ font-awesome icons to replace the default hotspot icons.

Hotspot custom icon

Hotspot custom icon color (Pro feature): You can change the color of the font-awesome icons that you may use.

Hotspot Custom Icon color

Simply click on the color box under Hotspot custom icon color and get a Colors window to set the color you desire to use.

This icon won’t show at the back-end, but it will appear on the front-end. Hence, embed the tour on a page and preview it to see the result.

Using Custom Icon

Hotspot custom icon class: This filed is there to allow you to implement customizations of the hotspot content.

Hotspot Icon Style:

To create hotspot custom styles of your own, you can add custom class. An example is,  

[wpvr id = "24" width = "600px" height = "400px" class = "myclass"]

Here, myclass defines the stock of customizations you put it in. You can add it to the style sheet of your theme.

You can provide the class name in the Hotspot custom icon class field. Once you provide the class name, the customization will appear in the front-end (i.e. when you embed the virtual tour on a page). 

Hotspot Custom Icon of your own choice: 

You can also set an icon of your choice as the hotspot icon by creating a custom class.

To customize your hotspot icon, go to your Appearance > Editor. Choose the style sheet of your current theme, or you may go to Appearance > Customize > Additional CSS

Here, create a class and under the class, add your custom style CSS code for customization. Click Save. 

Here’s An Example: 

Go to Additional CSS for your theme and add the following codes:

.custom-icon { 
height: 26px; 
width: 26px; 
background: url("image url") no-repeat center center / auto; 
border-radius: 12px; 
}

Add the height and the width of the image, and give the image URL. You can add border-radius if you want the icon to be circular.

Custom Class Icon

Then Publish.

Now go to your tour and input the class name “custom-icon” on “Custom hotspot Field” for the hotspot you wish this icon to apply on.

Custom class provided

Then update the tour. This icon won’t show at the back-end, but it will appear on the front-end.

Hence, embed the tour on a page and preview it to see the result.

Custom Class Icon used