1. Home
  2. Docs
  3. WP VR
  4. Getting Started
  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 unique hotspot ID for every hotspot you create in a scene. 

Hotspot ID

Pitch and Yaw

Pitch and Yaw stand for initialization of hotspot position.

Here is where you can get the hotspot position (Pitch and Yaw): 

After filling up all the information in the Scene Tab, click on the “Preview” button to load the scene below. Click anywhere on the preview to know the pitch and yaw value of that point.

Pitch And Yaw Coordinates

The pitch and yaw coordinates are shown below the preview.  

You can copy the Pitch and Yaw. In the HotSpot tab, Add New HotSpot and put those values of your hotspot position in the required fields.

Pitch And Yaw InputtedHotSpot Settings 1

Once you are done setting up the hotspot, a hotspot icon will appear in the current scene on the spot of the coordinates you set as Pitch and Yaw. 

Basic Hotspot Icon

HotSpot Type

There are two types of hotspots available:

  • Info
  • Scene

Hotspot Types

Info Type Hotspot

If you choose Infoit will view the fields URL’, ‘On Click Content’ and ‘On Hover Content

Info Type Hotspot

URL: Provide URL of a website, so clicking on hotspot will visit that website 

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 on a pop-up window over your preview if you just hover your mouse on the hotspot.

**Content Format:  You can use different types of contents 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 under the “Content Format” sections are examples of adding 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 Types Hotspot

If you choose Scene as the hotspot type, it will view the fields ‘On Hover Content’ and ‘Target Scene ID.’

Scene type hotspot

Target Scene ID: This option is used when you are about to link your scenes with one another via Scene ID. Input the Scene ID of the scene that you wish to assign as the Target Scene under this particular hotspot. Clicking on this hotspot will take you to that scene.

Target Scene ID Inputted

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

Custom Style

To create styles of your own, you can add custom class to customize. 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 in the style sheet of your theme.  

Hotspot Custom Class: This filed is there to allow you to implement customizations of the hotspot content.

Hotspot custom class field

You can provide the class name here, of any class you created to implement style customizations of the hotspot icon. 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). 

To customize your hotspot, 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 your theme’s style sheet file and style an icon using the following format:

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 the give the image URL. You can add border-radius if you want the icon to be circular.

Custom Icon Code 

Then Update the Stylesheet. 

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 Inputted

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

Custom Hotspot Icon

How To Edit An Existing Item/Tour:  

To edit an existing item/tour, Go to “Tours” under WPVR dashboard and select the one you want to edit.

Tours

Then apply any changes you want and update the tour for changes to be effective.

Was this article helpful to you? Yes 1 No

How can we help?