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 for Hotspot Settings

HotSpot ID: You have to provide 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

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.

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

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 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.
    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 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.

Scene type 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

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.

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.

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 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:

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.
(**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.)

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 front-end. Hence, embed the tour on a page and preview it to see the result.

Custom Class Icon used

 

Was this article helpful to you? Yes 2 No

How can we help?