The CloudPano embed code can be grabbed from any tour by clicking the "Share" button and copying the embed code.
Typical embed codes look like this:
width="100%" height="500px" src="https://app.cloudpano.com/public/shareScript.js">
Note: You dont have to pay attention to this code if you simply copy it from the "Share" window for your tour. But if you want to know how it works, the
div id properties will be your tour's ID on CloudPano. In the above case, the ID is
DEMO - and that tour may be accessed at https://app.cloudpano.com/tours/DEMO .
Iframe embed code
If for some reason you do not want to use our modern embed code, you can display the tour in an iframe. We don't provide support for this method of embedding, but you can definitely use it:
<iframe id="/tours/DEMO" allow="vr;accelerometer;gyroscope;fullscreen"
allowfullscreen frameborder="0" width="853" height="480"
To ensure your iframe works properly, ensure you include the code exactly as written above. If some features don't work in your embedded iframe, we have many articles to help you. A common article a lot of people need is: "Why isn't CloudPano Live working in my iframe?" Another article is: "I can't use fullscreen on embedded tours". These articles are only relevant if you are having problems and are writing your own iframe embed code.
Still can't get it working?
Make sure your embed code is structured correctly by testing it on a fresh site. You can paste the embed code into the HTML section of CodePen and see it rendered.
Here's an example:
If it works on CodePen, but not on your site, there is something about your site that is preventing the embed to work.
If it doesn't work on CodePen, there is a problem with the code. Double check the embed code closely and make sure you have
" wrapping around all your strings. For example,
src=https://app.cloudpano.com/public/shareScript.js would be incorrect, but
src="https://app.cloudpano.com/public/shareScript.js" will work.