This article will go over how to Iframe TourBuilder virtual tours on a website.
You can load TourBuilder tours via iframe, though, it is recommended to use our JavaScript API instead of framing. When using an iframe, you may lose some functionality (i.e. going fullscreen, relaying analytics to GA, etc.).
If using our JavaScript API is not an option on your website, then follow the below guide when iframing TourBuilder Pro and TourBuilder Go tours.
Steps to iframe a TourBuilder tour →
Add a tour id to the following URL: https://viewer.panoskin.com
The id must be a valid TourBuilder tour id.
You should also pass in a frameborder attribute set to "none", scrolling set to "no", allowtransparency set to "true", and allow set to "vr,gyroscope,accelerometer". To maintain ADA compliance, you will also want to set a title and aria-label attribute.
<iframe src="//viewer.panoskin.com/?tour=57ebe1a77c6dd0314365b2d0" frameborder="none" allowtransparency="true" scrolling="no" allow="vr,gyroscope,accelerometer" title="The view virtual tour" aria-label="The view virtual tour"></iframe>
You can control certain aspects of the virtual tour using other URL parameters.
A table of those parameters is listed below:
| tour | String | The tour id of the TourBuilder Go tour you are embedding. |
| hideFullScreen | Boolean | When set to true, hides the fullscreen button. |
| pano | String | The pano id of the scene you want to start the tour on. |
| themeId | String | The theme id of the theme you want to use for your tour. |
| hideButtons | String | A comma delimited string of ids for the menu buttons you want to hide (i.e. hideButtons=share,contact,fullscreen) |
| hideRightMenu | Boolean | Hides right hand menu when set to true |
| hideCarousel | Boolean | Hides carousel when set to true |
| startScreen | Boolean | When set to false, hides the start screen |