How to create and publish a self-hosted virtual 360 photo tour for real estate

This article will focus on how to use IdeaSpaceVR to create and publish a 360 virtual photo tour for real estate agents. You need a website, IdeaSpaceVR should already be installed and you should have a couple of 360 degree photos of one or many of your properties at hand.


Why virtual 360 photo tours?

Any future home owner wants to get a visual impression of the property before visiting it. Plain old rectangular images are nice to get an idea of the place but a virtual tour using 360 degree photos will always be a better option to get a first impression.

By using IdeaSpaceVR on your own server you are not dependent on any software service with recurring monthly fees. With IdeaSpaceVR there is also no limit on the number of virtual tours you want to create, publish and embed in your property listings on your existing website. It is an open source and free software, maintained by passionate people.

Ok, let’s start, you will see, it is easy and fun!


Log in to IdeaSpaceVR

After logging in, navigate to the Themes page.



There are two themes (by June 2018, there will be more in the future) for creating virtual 360 tours:

  • IdeaSpace 360 Photo Tour (pre-installed)
  • IdeaSpace 360 Photo Tour Pro (add-on)


The Pro theme offers features such as:

  • Customise hotspots choosing from various hotspot icons (simple button, shopping cart button, plus button).
  • Information hotspots can contain text, an image and a link button (for external links).
  • Customise hotspot text and background colours.
  • Add your brand image.
  • Configure initial photo sphere / panorama view angles.


If you want to experiment with virtual tours or don’t need the Pro features, you can just start by using the free IdeaSpace 360 Photo Tour theme which is shipped with the IdeaSpaceVR software.

Let’s continue with the Pro theme (the steps described below are the same for the free theme).

Click on  Install .



Next, we create a space and select the theme.


Step 1: Add A New Space




We enter a title, a URL and click on  Save Draft .



Step 2: Add First Photo Sphere

We click on  Add Photospheres .



Then we click on  Add Photo Sphere . We either upload a new photo or select an existing photo.



We click on  Insert .



Next we click on  Set Rotation  for Photo Sphere.



We click on Insert , then we scroll to the bottom of the page and click  Save .



Next we add a second photo by clicking on  Add Photo Spheres .


Step 3: Add Another Photo Sphere

We upload or select a photo sphere, set the initial rotation and click on  Save .



Now we have two 360 degree photo spheres: representing a garden and a kitchen, but we cannot navigate between them. It’s the time to add navigation hotspots.

First let’s add a navigation hotspot in the garden.


Step 4: add navigation hotspots

Select  Edit  on the Garden photo sphere, scroll to Photo Sphere to Photo Sphere Navigation Hotspots. Click on  Attach .



Select Kitchen from select box of the Available Placeholder Items.




Now position the hotspot in front of the kitchen door. Click on  Attach , then  Insert .



Then click on  Save .

Now let’s add a navigation hotspot to the Kitchen.

Select Kitchen and click on  Edit .



Scroll to Photo Sphere to Photo Sphere Navigation Hotspots. Click on  Attach .

Select Garden from select box of the Available Placeholder Items.



Position the hotspot in the room where it leads to the garden.

Select  Insert , then click on  Save .

Let’s preview the space: click on  Preview .


Step 5: Preview virtual 360 photo tour


If you think you are ready to publish your virtual tour, set the space status from Draft to Published and click  Update .



You can now directly link to your virtual photo tour with its URL or embed it on your existing website by using the Embed Code.



Step 6: Embedded Virtual 360 Photo Tour


This is an example of an embedded virtual photo tour. You can embed your tour in any website.


(Photos by Ufosnap)