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 ID: You have to provide a unique hotspot ID for every hotspot you create in a scene.
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.
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.
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.
There are two types of hotspots available:
Info Type Hotspot
If you choose Info, it will view the fields ‘URL’, ‘On Click Content’ and ‘On Hover Content’
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.
- Image: Use <img src=”your image link”> format as shown in the following image.
- Embedded Video: Copy embedded video link and paste as shown in the image below.
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.’
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.
When you choose a hotspot to be Scene type, the hotspot icon on the tour will change to a small Arrow.
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.
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:
background: url(“image url“) no-repeat center center / auto;
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.
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.
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.
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.
Then apply any changes you want and update the tour for changes to be effective.