How to Embed VR Tours on Your Website

Embedding tours on your website is extremely simple because theViewer will generate all the code for you and the only thing you have to do is paste it in your website ... BUT there is a bit of knowledge about web development required because you should know how to edit or at least ad some code to your website.

Step 1 : Find the tour that you want to embed on theViewer.co . If you just want to do a simple test you don't even have to login and you can pick one of the Featured Tours on the main site.

Step 2 : Click on the share button to see all the possible options . You will see different types of links and two "Embed" options

You have two ways of Embedding a tour on your website - you can do it via iFrame and JS Code.

iFrame is the older solution and it should be supported by pretty much every hosting service BUT it has some limitations. For example if you use iFrame you might have issues with gyroscope on mobile devices... Due to security reasons that we don't fully understand :) Apple and Google decided NOT to give access to gyroscope information for iFrame solutions. 

When you use the JS Code option we have full access to gyroscope on mobile devices and everything will work fine.
Downside of this option is that some hosting solutions might not allow adding JS Code

Step 3 : OK so after the long explanation of all options in previous step you should know what you want and you can simply click on the iFrame embed or on the one that we recommend  which is the JS Code Embed.
Now the code is copied to your clipboard ( if you don't know what clipboard is .... google it :)  

Step 4 : Simply paste the code to your website and thats it ! I would also like to strongly encourage you to always test your code using some sort of a live html sandbox tool like dreamtemplate.com for example

and thats it :)
If you have any questions please use the chat or email us at help@theViewer.co but before you do :) i strongly encourage you to invest 5 min in doing a simple experiment on dreamtemplate.com or any other platform for html live sandboxing 

EXTRAS : Bellow you can find the sample of the code generated by theViewer.co

You can see bellow in the code sample that some sections are automatically commented by theViewer.co platform.
You can still use them ,but you just have to remove the comments ...

For example :

<!-- ACTIVATE THIS LINE IF YOU HAVE ANIMATIONS IN VRTOUR <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script> !--><br><!-- CHANGE PARAMETERS INSIDE SCRIPT SRC FOR MANAGE YOUR EMBED.JS BEHAVIOUR:<br>	 - thumbnail=true/false (ENABLED/DISABLED)<br>	 - fullScreen=true/false (ENABLED/DISABLED)<br>	 - shareNative=true/false (ENABLED/DISABLED)<br>!--><br><div style="height:600px;width:100%"><br><script src="https://theviewer.co/embed?spaceId=theConstruct&galleryId=70b44889-8c35-449c-9fcd-42c8da805c65&fullScreen=true&thumbnail=false&shareNative=true&linkType=ExperimentalEmbedLink"></script><br></div>
	

Animation - If you have a tour with animation there is one extra line of code that you will have to add to your html

Parameters - there are three parameters that I think are pretty much self explanatory ....except the last one for which one I want to apologies :) 

• thumbnail - by setting this parameter on true you will embed the tour on your website and your thumbnail will be visible first. User will have to click on the thumbnail and then the 360 tour will load. If you set this parameter to false you will directly embed the tour without the thumbnail.
• full screen - you can allow or disallow the end user to activate full screen. Sometimes our customers want to only show the tour in a certain window and not allow activating full screen. 
• share Native - ok thats the one that is super confusing and I blame our developers for that ! :) sorry :) share native is nothing but an icon with a magic link in your tour. If your user will open your website on a mobile device and this option will be activated it will be possible to click on the icon and then a Magic Link will be activated which will take your user directly to our app and show your tour in best possible quality ... which we think is good :) but if for some reason you don't want it to be possible you can set the shareNative parameter to false.

Cheers!
Piotr