1. Home
  2. Docs
  3. WPVR – 360 Panorama and virtual tour creator for WordPress
  4. WPVR Documentation
  5. HotSpot Settings

HotSpot Settings

For an active scene, you can add multiple hotspot. With this option, you can link any of your scenes with other scenes. As well as, you can add image, link or video information via this option. Under HotSpot you get the following options:

HotSpot ID: You have to provide unique hotspot IDs for every hotspot your create for every scene.

Pitch and Yaw: Pitch and Yaw stands for initialization of hotspot position.

Here is where you can get the hotspot position:

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.

HotSpot Settings 1

Pitch and Yaw coordinates:

The pitch and yaw coordinates are shown below the preview. You can copy and paste them in the fields Pitch and Yaw.

In the HotSpot tab, Add New HotSpot and put those values of your hotspot position.

HotSpot Type: There are two type of hotspot available here,

  1. Info
  2. Scene

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

  1. URL: Provide URL of a website, so clicking on hotspot will visit that website
  2. On Click Content: Here you can add html content for your hotspot. Clicking on the hotspot will display a pop-up window over your preview with the content you entered.
  3. On Hover Content: Here you can add html content for 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:

Paragraph: Use <p>”Content”</p>

HotSpot Settings 2
Example: On-Click content paragraph

Image: Use <img src="your image link">

HotSpot Settings 3
Example: On-Click content image

Embedded Video: Copy embedded video link and paste.

HotSpot Settings 4
Example: On-Click Content video

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

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.

HotSpot Settings 5

Custom Style:

To create styles of your own, Here, 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. You can provide the class name here, of any class you created to implement style customizations of the content. 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 can 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.

Then provide this class name to the HotSpot Custom Class field. And the customization will be applied on the front-end. Customizations such as changing the hover symbol, modifying the fonts and their color, anything that are related to style, can be tweaked here.

How To Edit An Existing Item:

To edit an existing item, Go to Wpvr Items and Select the one you want to edit.

Was this article helpful to you? Yes No

How can we help?