This article will go over how to embed multiple TourBuilder virtual tour videos on your website.
Step 1: HTML Containers
To have 2 or more tours on one page, Create a <div> to hold your tour and add a unique id to each one of them (i.e. id="TBTour1" and id="TBTour2") and place it wherever you want your tour to show on your web page.
<div id="TBTour1"></div>
<div id="TBTour2"></div>
Step 2: CSS
Style your <div> with some CSS. making sure you style your different IDs (i.e. #TBTour1 & #TBTour2)
<style>
#TBTour1, #TBTour2 {
width: 100%;
height: 562px; /* Adjust height as needed */
max-width: 900px; /* Adjust max-width as needed */
margin: 0 auto;
-webkit-box-shadow: -1px 9px 18px -6px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 9px 18px -6px rgba(0,0,0,0.75);
box-shadow: -1px 9px 18px -6px rgba(0,0,0,0.75);
}
</style>
Step 3: JS
Add the following JavaScript snippet to your page using your <div> IDs 'TBTour1' & id 'TBTour2'
<script src="//lcp360.cachefly.net/panoskin.min.js"></script>
<script>
PANOSKIN.createViewer({
id: 'TBTour1',
tour: '5c5308611a95467cde4e0c6a'
});
PANOSKIN.createViewer({
id: 'TBTour2',
tour: '5e2b2cb99e28bb227016a943'
});
</script>
IMPORTANT: IDs must be different from the ones in this example - use your own PANO ID
Sample JSfiddle for how to embed a tour below: