Skip to main content
Virtual Tour Integration

See how to embed virtual tours into your website

Samy Jeffries avatar
Written by Samy Jeffries
Updated over a week ago

1. Iframe

Virtual tours similarly to YouTube videos usually are embedded via iFrame. Here is the iFrame code sample you can use to embed your virtual tours into any website - Please note you will need to replace "YOUR-PROJECT-URL" with the link to the tour you would like to present in your site:

<iframe src="YOUR-PROJECT-URL" width="800" height="400" frameborder="0" border="0" scrolling="no" allowfullscreen allow="vr"></iframe>

Don't forget to switch to HTML editor when you paste the code. Width and height parameters can be changed by your own preferences.

Please, don't use any plugins since their provided iFrame code may differ and features such as Fullscreen might be disabled.

2. Hyperlink

In case you have a separate version of your website for mobile users or you just don't have enough available space to embed iFrame on your webpage, you might want to open virtual tour when text or image (button) is clicked.

Text:

<a href="YOUR-PROJECT-URL" target="_blank">YOUR TEXT</a>

Image:

<a href="YOUR-PROJECT-URL" target="_blank"><img src="YOUR-IMAGE-URL"/></a>


Remove target="_blank" to open tour in the same frame as it was clicked.

Allow for Fullscreen in Embedded Tours

To allow for user to view the tour in full-screen mode, you need to add special allowfullscreen attribute to the embed code. Here is an example embed code where this attribute is used:

<iframe src="https://premium.giraffe360.com/YOUR-PROJECT-URL" width="800" height="400" frameborder="0" border="0" scrolling="no" allowfullscreen allow="vr"></iframe>


If done correctly, you should now see full-screen button on the embedded tour like so:

Disabling Analytics:

You can use virtual tours with analytics disabled by adding extra "/?nocookie" parameter at the end of the virtual tour link.

For example:


Did this answer your question?