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.
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.
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
However, you can click on the arrow button (beside the Pitch and Paw coordinates under the Tour preview) to automatically collect and place Pitch and Yaw values in the Pitch and Yaw fields for a Hotspot.
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.
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 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 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 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 Type Hotspot
If you choose Scene as the hotspot type, it will view the fields ‘On Hover Content’, ‘Select Target Scene from List’ and ‘Target Scene ID.’ 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.
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.
Target Scene ID: This field shows you the Id of the Scene that this hotspot is assigned to take you to.
When you choose a hotspot to be Scene type, the hotspot icon on the tour will change to a small Arrow.
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 color (Pro feature): You can change the color of the font-awesome icons that you may use.
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 front-end. Hence, embed the tour on a page and preview it to see the result.
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 in 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:
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.
(**Note that if you copy this code from here, when you paste it, delete and re-enter the quotations (“) manually. Copying codes changes the format of the quotations, so you need to re-enter it.)
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.