How to Embed Multiple TourBuilder Tours to Your Website

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: