Adding your virtual tour to your website & sharing options

Once your virtual tour has been captured and is ready, it’s time to include it in your website and share it. There are several options available. Here are the three most common:

Adding the virtual tour to your website

The virtual tour is added to (or embedded within) a website using an iFrame. An iFrame is a short line of HTML code that includes the tour within a kind of window just as you might do with a normal image.

Here is an example of an embedded virtual tour: http://virtual-tour.uk/virtual-tour-photos-case-study/

This virtual tour has been included in this site using the following line of HTML:

<div style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
<iframe width="100%" height="100%" src="https://my.matterport.com/show/?m=f56Eok5ChdH" frameborder="0" allowfullscreen="" allow="xr-spatial-tracking" style="position:absolute; top:0; left: 0"></iframe>
</div> 

This example is a site which uses the WordPress CMS so it was added using the standard ‘html include’ block via the WYSIWYG editor. Here is what the CMS editor looks like:

Send the link directly

Your virtual tour is hosed on the Matterport servers and includes a direct link. This link can be sent directly, for example, by email or WhatsApp. The link will take you directly to the virtual tour and will look like this (Click here to try the link):

https://my.matterport.com/show/?m=f56Eok5ChdH

Link directly to a particular view within the virtual tour

Occasionally it might be useful to send a specific view within the virtual tour. In the above example of ‘show home’, by default, the tour starts in the kitchen. However, if I wanted to show someone, for example, the ‘master bedroom’ I can do this very easily:

  1. Start the tour and go to the view you would like to send
  2. Press the ‘U’ button on your keyboard
  3. A small window will appear in the top-right corner of the tour which contains the direct link to the view you were looking at when you pressed the ‘U’ button
  4. Copy the link to your clipboard using the ‘copy to clipboard’ button
  5. You can now send the direct link. When anyone clicks the link, it will open at the same view

Click here to try the above example for yourself