demo-attachment-1436-Rectangle-669-2
demo-attachment-532-Polygon-1
demo-attachment-3350-Rectangle-671

FAQ

Frequently Asked Questions

demo-attachment-106-Rectangle-674
demo-attachment-46-Rectangle-6711
demo-attachment-44-Group-71
demo-attachment-202-Rectangle-653
demo-attachment-1423-Rectangle-675-2
demo-attachment-45-Group-72

How to's

If you are new to our website and need to know how to create a simple virtual museum tour, Gallery portfolios, and blog content related to our community. Follow the simple steps below and make use of your best creative energy.

Gallery

When you want to post a gallery content and add contents to describe it, follow the instructions below.

screenshot-aim.center-2021.05.10-19_05_23

Go to > Post > Add New

  1. Enter your post title(check area labeled 1)
  2. Enter you content such as image, sound by using the sign labeled 2 
  3. Use your to space your content to access the add widget icon to use another widget 

Virtual Tour

Now, let me guide you to create your first virtual tour within 5 minutes.

Here, you will learn how to create a simple virtual tour with the most basic features, and you will be shown how to quickly embed it on a page or post.

Later, on upcoming documentations, you will get instructions on using all the other exclusive features to make the tour more engaging.

So let’s take the first step which is to learn how to create a simple Virtual Tour.

Follow the steps below to create a simple virtual tour.

Initially, let us follow the very basic steps, without worrying about extra features.

It’s simple, you just need to

  • Name the tour
  • Set a scene ID
  • Upload panoramic image
  • Preview tour
  • Publish tour

Now follow the steps below to create the tour.

1. Go to Dashboard > Virtual Tour > Add new tourAdd-New-Virtual-Tour-1320×736As you can see, it will take to the page where you can start creating a virtual tour.

2. On top, you will get to add a title to the tour.

3. Then click on the Scenes tab.Scene-ID-Virtual-Tour-1320×635You can set this scene as your default and set a unique Scene ID for this scene.

**The Scene ID should have no spaces.

4. Click on the Upload button and upload a 360 panoramic image.Scene-Upload-Virtual-Tour-1320×687Once uploaded, a thumbnail will appear.

5. Scroll down and click on the Preview button.

You’ll see a live preview of the tour on the Tour Preview section on the right side.Publish-Virtual-Tour-1320×6716. Simply click on the Publish button on the right side and that’s it. The tour is ready to be used.

There you go. You just created your first virtual tour in less than 5 minutes!!

The next thing to do is to embed this virtual tour on a page or post.

After creating your Virtual Tour you need to embed it as a content on the site by visiting Dashboard > Post > Add New

post link

Add your titleAdd title Post page embed 1

Embed your Virtual Tour by using the block widget.Add title Post page embed 1Just search for WPVR and this block will appear.WPVR_Gutenberg_Block

Once you choose the WPVR block, you will see the following:Embed_Virtual_Tour-768×184

For this block, look at the options on the right side.  You’ll see the following options:WPVR_Block_Options-289×300

  • Id
  • Width
  • Height
  • Radius

Choose the Id of your desired Vitual tour that you wish to embed

Set the Width of the tour as you desire.

  • Assign a positive numeric value which will be used as px. For example, 600
  • Or, you can use a percentage. Example: 90%
  • If you wish the tour to be full-width of the page, the use the text ‘fullwidth’

Set the Height of the tour as you desire.

  • Only assign a positive numeric value which will be used as px. For example, 400
  • Do not use percentage or any text

Set the Radius of the tour as you desire (to create round edges of the tour).

  • Only assign a positive numeric value which will be used as px. For example, 10
  • Do not use percentage or any text

That’s it. You are done. Yu can use same emthod to add other contents to describe yur content by using the block wideget search to embed text and 

Now you can preview the tour to see how it looks.

In this VIRTUAL TOUR lesson, follow the steps below to add a scene or multiple scenes to get started with creating your virtual tour.

Add A Scene To Your Virtual Tour

Go to Dashboard > Virtual Tour > Add new tour.Add-Scene-001-768×392 It will take you to this page where you can start creating your virtual tour.

2. Add a title to the tour.Add-Scene-002-1024×5223. On the left side, you can find the Scenes tab. Click on it…Add-Scene-003-a-1320×674This is where you add the scenes for your virtual tour.Add-scene-004-1320×9694. Click on the blue Upload button and upload a 360 panoramic image.Add-scene-005-1024×794Once uploaded, a thumbnail will appear.Add-scene-006-1024×8755. Assign a Scene ID

6. Change the Set as default to Yes.Add-scene-007-1024×546This will mean that this scene will be the 1st scene of the tour, in case you add multiple scene.

7. Now, click on the Preview button below.Add-Scene-008-1320×976You will see the image has been converted to a virtual and you can get a preview tour on the right side.

8. If you wish to add another scene, simply click on the (+) plus icon above and a blank new scene page will appear.Add-Scene-009-1024×4629. You can upload an image here and set a Scene ID.

10. You can go back to the 1st scene by clicking on it’s respective icon above.Add-Scene-010-1024×46211. Now, again click on Preview.

You will see on the preview tour, you are on the 1st scene (because you set it as default), but there are two images in the gallery below the preview tour.Add-scene-011-1320×976If you double click on the second image in the gallery, it will take you to the second scene in the preview tour.Double-click-to-view-second-sceneThat’s it. You now know how to add scenes to your virtual tour.

Now on the right side, you can see a number of features. You’ll get an  explantation to them in the next lesson.

Once you have added a scene, you will see on the right side, there are several features that you can use to customize a scene.Customize-Scene-001-1320×976

In this lesson, you will get a brief idea about all the features there, that you can use to customize each scene.

Now, you will find the following features on the right side to customize a scene:

  • Title
  • Author
  • Author URL
  • Vertical Angle of View
  • Horizontal Angle of View
  • Vertical Offset
  • Set Default Scene Face
  • Limit Vertical Scene Grab
  • Limit Horizontal Scene Grab
  • Customize Scene Zoom
 

Let us briefly learn how each of them work.

Title

You can add a Title to this scene which could be the name of the room, or location, or any title you want.

For example, let’s say you have a tour of a house, and this scene represents the bed room. Then you use the title Bed Room.TitleIt will look as shown in the image below:Customize-a-scene-Title-added-768×456

Author & Author URL

You can add a sub-text below the Title using the Author field, and link it to an URL using the Author URL field.

The main intention for this field was to let you add a reference to who created the tour, for example, you can use your company name and link.

However, you can also use it for other purposes such as indicating a contact number or address of the place.

For example, you can add the address and link it to the Google map directions.Author-name-and-urlIt will look as shown in the image below.Customize-a-scene-Author-and-URL-added-768×456

*You can use just the Author and not the Title if you want to, but it might now look that great.

Setting Angle Of View

You will find two fields called Vertical Angle Of View and Horizontal Angle Of View.

In case you have an ordinary Panoramic image (i.e. not 360 degree), then normally the image gets stretched into a 360 degree tour, which ruins the image.

These features will let you set a boundary of how much the image will be stretched out so that you can still create a virtual tour out of it.Angle-of-view

You can then Limit Scene Grab (which will be explained below) to turn it into a Partial Panorama.

Vertical Offsetvertical-offset

This feature is only usable if you have an irregular 360 image that needs to be stretched from a different point than a normal 360 panoramic image (vertically).

Set Default Scene FaceCustomize-a-scene-Default-Scene-Face-1024×963

You can decide which direction or view a person will be facing when entering a scene.

Normally, the center of the image, you upload, is viewed first. But you can change that using this feature.

Follow these small steps to set it up.

1. Enable Default Scene Face by marking it as Yes. You will get two new fields called Pitch and Yaw.

2. On the Tour Preview, click on the spot where you want a person to be looking at by default.

3. Below the Tour Preview, you will see some coordinates called Pitch and Yaw.

These indicate the position where you clicked.

4. Copy the coordinates for Pitch and Yaw and paste them in the respective Pitch and Yaw field under the default scene face.

5. Now click on the Preview button below, and you will see that the scene is loaded while viewing in the direction you wanted.

Limit Scene GrabCustomize-a-scene-Limit-Scene-Grab-1024×963

You will find two options called Limit Vertical Scene Grab and Limit Horizontal Scene Grab.

Using these features, you will be able to decide how much a person can look up or down, or left or right.

Follow the steps below to use these features.

i. Limit Vertical Scene Grab

This will limit the view when looking up and down.

1. Turn on Limit Vertical Scene Grab and you will find two new options called Max Pitch and Min Pitch.

2. For Max Pitch, choose a positive value below 90, for example 60.

3. For Max Pitch, choose a negative value more than -90, for example -60.

4. Now click on Preview below and you will see you will be limited to a total of 120 degrees when looking up or down, i.e., you won’t be able to look completely up or complete down.

ii. Limit Horizontal Scene Grab

This will limit the view when looking left or right.

1. Turn on Limit Horizontal Scene Grab and you will find two new options called Max Yaw and Min Yaw.

2. For Max Yaw, choose a positive value below 180, for example 140.

3. For Max Pitch, choose a negative value more than -180, for example -140.

4. Now click on Preview below and you will see you will be limited to a total of 280 degrees when looking left or right from the default view, i.e., you will no longer be able to take a 360 turn on either directions.

Customize Scene ZoomCustomize-a-scene-Scene-Zoom-Limit-768×722

You can even control the zoom amount on the tour using this feature.

Turn on Customize Scene Zoom and you will find three new fields called Default Zoom, Max Zoom, and Min Zoom.

**The zoom ranges from 50 to 120.

i. Default Zoom

You can set a how much the scene will be zoomed in or zoomed out when first viewed.

ii. Max Zoom

You can set how much a person can zoom out.

iii. Min Zoom

You can set how much a person can zoom in.

For all the 3 cases, you can choose a value ranging from 50 to 120.

Then you can preview the tour to see it’s effect.

That’s it. That’s how you use all the scene settings to customize a scene.

Now as mentioned, these are specific customization for each scene.

So if you have set up these features, it will only take effect on the scene you are editing.

To use it on a second scene, switch to the second scene by clicking on the icon above and set these up for it.

Once you have added scene(s) to your virtual tour, you can then add hotspots to make the tour more engaging.

In this Virtual Tour lesson, you will get a step by step guide on how you can add hotspots to a scene.

Add Hotspots To A Scene

Follow the steps below.

1. Select the scene on which you want to add hotspots.Add-hotspot-Choose-scene-and-hotspot-tab-1024×6802. Click on the Hotspots tab on the left.Add-hotspot-Hotspots-Tab-1320×903

This tab will show you hotspots for the scene that you selected.

3. First assign a Hotspot IDAdd-hotspot-hotspot-id-1024×600

4. Now on the Tour Preview, click on the spot where you want to place this hotspot.

5. You will see below the Tour Preview, the coordinates of Pitch and Yaw will change. These coordinates indicate the spot where you clicked.Add-hotspot-Pitch-Yaw-768×513

6. Now, click on the small button beside the Pitch and Yaw.

You will see, the coordinates have been placed on the Pitch and Yaw fields below the Hotspot ID.Add-hotspot-hotspot-pitch-and-yaw-added-1320×7717. Now click on Preview and on on the tour preview, you will see the hotspot is placed in the spot you wanted.Add-hotspot-Preview-tour-with-hotspot-1320×926Add-hospot-hospot-added-768×458

That’s it. You have successfully added a hotspot to the scene.

8. If you want to add another hotspot to this scene, you can simply click on the (+) plus button above to add a blank hotspot page.Add-hotspot-add-second-hotspot-768×425

9. Then follow the steps above from 3 to 7 and a second hotspot will be added.

**In the next lessons, you will learn about how you can use this hotspot to display images, text or videos, or how you can connect multiple scenes.

Adding Hotspots To A Second Scene

In the steps above, I showed you how you can add hotspots to a scene.

To add hotspots to a second scene, follow the steps below.

1. Go back to the Scenes tab and choose the second scene.

2. Now, go back to the Hotspots tab, and now, here you will find the hotspots for the second scene.Add-a-second-hotspot

So basically, the Hotspots tab will display the hotspots for the scene you select earlier.

3. Then you can follow the same steps as explained in the previous section in this lesson to Add hotspots to a scene.

In the next lessons, you will learn about how you can use this hotspot to display images, text, or videos, or how you can connect multiple scenes.

In the last lesson, you learned how you can easily add hotspots to a scene.

In this Virtual Tour lesson, you will learn how you can use a hotspot to display information, images, or videos on your virtual tour.

Hotspot Type

While setting up a hotspot, you will see that on the right side, you have an option to select hotspot type.Hotspot-Type-1320×903

Typically, there are two hotspot types:

  • Info
  • Scene

For displaying Information, Image, or Videos, you will need to choose the Info type hotspot, which is selected by default when you add a new hotspot.Info-Type-hotspot-1024×932

Under the Info type hotspot, you will find three fields,

  • URL
    Here you can place a URL so that, when someone clicks on the hotspot, it will take them to that site on a new tab.
  • On Click Content
    Here, you can use HTML tags to view text, images, or videos.
    They will appear when the hotspot is clicked.
  • On Hover Content
    Here, you can use HTML tags to view text, images, or videos.
    They will appear when someone hovers the mouse on the hotspot.

**You can use both the On Hover Content and the On Click Content at the same time.

**However, you cannot use URL and On Click Content simultaneously on a single hotspot.

Now, let learn how to use them to

  • Display Information On A Hotspot
  • Display Images On A Hotspot
  • Display Videos On A Hotspot

Display Information On A Hotspot

If you want to display text on a hotspot when it is clicked, follow the steps below.

1. Use the paragraph tag, <p> </p>, and input a text in the On click Content field.

For example:

<p>This bed is soft and comfortable.</p>

2. You can also use the <div> </div> tags or apply CSS style to it.

For example:

<div style="margin: 10px 10px"><p style="color: green;">This bed is soft and comfortable.</p></div>

Info-type-hotspot-On-Click-Content-768×7883. Then click on Preview, and on the Tour Preview, you will be able to view the text when you click on the hotspot.Info-type-hotspot-On-Click-Content

If you want to display text on a hotspot when hovering on it, follow the steps below.

1. Insert a text in the On hover content field.

For example, “Master Bed 1”

*You do not need to add a paragraph tag as it is automatically set to a <p> tag by default.

2. You can use the <div> </div> tags and apply CSS style to it. In this case, we advise you use the <p> tag.

For example:

<div style="margin: 10px 10px"><p style="color: green;">Master Bed 1</p></div>

Info-Type-Hotspot-On-hover-text-768×7883. Then click on Preview, and on the Tour Preview, you will be able to view the text when you hover your mouse on the hotspotInfo-type-hotspot-On-Hover-Content

Display Images On A Hotspot

You might wish to display an image on a hotspot when clicked or when hovered.

Follow the steps below.

1. Prepare a code snippet with the HTML image source tag, img src.

Here’s an example:

<img src="https://www.mywebsite.com/2020/10/exampleimage.png" width="300" height="300">

**Simply copy this snippet and replace the URL with the URL of the image you want to use, and set suitable width and height.

2. Paste the code snippet on the On Click Content or the On Hover Content.

Info-type-hotspot-Image-768×788

3. Then click on Preview and test it out on the Tour Preview.

Using it on On Click Content will mean the image will appear when clicked on the hotspot.Info-type-hotspot-on-click-image

Using it on On Hover Content will mean that the image will appear when the mouse is hovered on the hotspot.

Display Videos On A Hotspot

You might wish to display a Youtube video on a hotspot when clicked or when hovered.

Follow the steps below.

1. Go to the video you wish to display and collect it’s embed link.

It will be an iframe link as shown below.

**Change the width and height as per your requirement.

2. Paste the link on the On Click Content or the On Hover Content.Info-Type-hotspot-on-click-video-768×788

3. Then click on Preview and test it out on the Tour Preview.

Using it on On Click Content will mean the video will appear when clicked on the hotspot.Info-type-hotspot-on-click-video

Using it on On Hover Content will mean that the video will appear when the mouse is hovered on the hotspot.

That’s it. That’s how easily you can display information, images or videos on a virtual tour, using hotspots.

In this Virtual Tour lesson, you will learn how you can use a hotspot to go from one scene to another, i.e., connect two scenes.

Hotspot Type

While setting up a hotspot, you will see that on the right side, you have an option to select hotspot type.Hotspot-Type-1320×903

Typically, there are two hotspot types:

  • Info
  • Scene

For connecting two scenes, you will need to choose the Scene type hotspot.Choose-Scene-type-hotspot–768×783**Before choosing the Scene type hotspot, make sure you have no data inputted on the URL and On Click Content fields.Target-Scene-selected-1024×940

Under the Scene type hotspot, you will find the following fields,

  • On Hover Content
    Here, you can use HTML tags to view text, images, or videos.
    They will appear when someone hovers the mouse on the hotspot.
  • Select Target Scene from List and Target Scene ID
    -Here, all the scenes of this tour will be listed for you to choose to connect this hotspot to.
    -Once you select a scene, it’s Scene ID will appear in the Target Scene ID field.
    -This means that clicking on this hotspot will take you to the scene you selected here.
  • Target Scene Pitch and Target Scene Yaw
    Here you can set the coordinates so that after clicking on the hotspot and going to the next scene, this will be the initial view of that scene.

Now, let’s learn how to use them to go from one scene to another.

Connecting Two Scenes

Follow the steps below.

1. You may assign an On Hover Content if you want to.

2. Click on the dropdown list under Select Target Scene List and choose the Scene ID of the scene you wish to connect to.Target-Scenes-List-768×7193. Once you select a scene, the Scene ID of that scene will appear in the Target Scene ID field.Target-Scene-selected-1024×9404. Now click on Preview and on the Tour Preview, you may click on the hotspot and it will take you to the other scene that you selected.Scene-type-hotspot

Setting A Target Scene Face

Let’s say after going to the next scene through this hotspot, you want a person to be looking at a different view that what they see normally.

For example, let’s say a room has a table and a chair. Now when entering the scene, let’s say, by fault the initial view is towards the table. But you want the person to be looking at the chair initial. That is when you use this.

This feature is specifically useful to create a walking effect.

Follow the steps below to use this feature.

1. After you connect two scenes, on the Tour Preview, click on the hotspot to the connected scene.

2. Here, click on the spot where you want the person to be looking at initially when entering this scene.

3. Below the tour preview, you will find the Pitch and Yaw coordinates.

4. Copy and paste them to their respective Target Scene Pitch field and Target Scene Yaw field.

5. Now, click on Preview, and on the tour preview, click on the hotspot. After it takes you to the other scene, you will see that the initial view is the view you set using the Target Scene Pitch and Yaw.

That’s it. Now you know how you can easily use hotspots to go from one scene to another.

In the last couple of lessons, you learned how you can add hotspots and use them properly.

In this Virtual Tour lesson, you will learn how you can customize hotspot icons and color.

Using Custom Hotspot Icons From Plugin

While creating a hotspot, on the left side, you will see three fields called

  • Hotspot Custom Icon
  • Hotspot Custom Icon Color
  • Hotspot AnimationCustom-hotspot-icons-1320×915

    These allow you to use custom icons provided by WP VR for your hotspots.

    Follow the steps below to use these custom icons properly.

    1. Click on the option under Hotspot Custom Icon.

    2. Here you will be able to choose from over 900+ Fontawesome icons that you can use as the hotspot icons.Custom-hotspot-icons-Fontawesome-icons-845×9483. Next, click on the option below Hotspot Custom Icon Color and assign the color you want your hotspots to have.Custom-hotspots-icon-color-845×948

    **Please note, the hotspot color cannot be different for each hotspot. Any color you select here, all the hotspots in the tour will have the same color.

    4. On Hotspot Animation, by default, it is turned on. This will give a continuous ripple animation on the hotspot to be more noticeable. You can turn it off if you don’t want any animation for the custom icons.

    5. Now, these are custom icons and cannot be viewed on the tour preview. So, publish the tour and embed it on a post. Then preview the post and you will be able to see how it looks.Hotspot-with-custom-icon-and-color-845×517