Embed Code Explained

Based on a lot of conversations with our users we've realized that most of you just copy and paste the code to your websites without even reading it ...

Which is 99% of the cases is absolutely fine because we want to make things super simple for you ... however sometimes we have users that would like to make small modifications like hiding some buttons etc and that's when YOU SHOULD READ the code that you are pasting to your website because you might find some useful information there :)

Here is an example of the JS Code ( iFrame has some limitations on mobile devices so we strongly recommend JS ) copied from the main page without even login in

<div style="height:600px;width:100%">
<video id="theviewer-video" playsinline crossorigin="anonymous" style="display:none;"></video>
<script src="https://theviewer.co/embed?spaceId=theConstruct&galleryId=d6140548-9d7b-4000-a954-2d4fe7df523e&fullScreen=true&thumbnail=false&shareNative=true&linkType=ExperimentalEmbedLink"></script>
</div>

Now let's try to analyze it line by line :

Just like the text is saying, if you have some animated components ( link to an article explaining what animated components are ) in your VR Tour like a fireplace or something else, you will have to remove the comments and add the line below to your embedded code :

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>

If you don't have any animated parts you can ignore this line.

Now the big part showing information about 3 parameters like Thumbnail , FullScreen button and something that we should change in the future :) because the last button is called Share Native which is actually a button with a magic link underneath ( here you can read about magic links )

So what this commented part is actually telling you is that YOU can control with the embed code if :

You want to first display a thumbnail to your tour on your website or if you would like to immediately load the first pano. If you don't want to see your thumbnail you will have to modify the embed code and set the thumbnail parameter to false - thumbnail=false
Some of you don't want to show the full-screen button and it's OK! :) you can just change the fullScreen parameter to false and the button will not be visible after embedding the tour on your website fullScreen=false
If you don't want to give your user an easy way to jump straight from your website to theViewer app and view the images in the best possible way ( browsers are awesome but we can display better image quality in the app ) you can hide this button as well by change the parameter value to false shareNative = false

Right now we have only 3 parameters but our strategy is to give you even more control so this list will grow for sure

Last but not least! you have the possibility to control the size of the embed by modifying this line

<div style="height:600px;width:100%">

By playing with the height and width you have full of the size of the frame with your embedded VRTour

So once again ... for 99% of the users our default code is fine ,but if you are in the 1% group and you want to have full control of your embed

Embed Code Explained

Related Articles