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)

#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);


Step 3: JS

Add the following JavaScript snippet to your page using your <div> IDs 'TBTour1' & id 'TBTour2'

<script src="//"></script>
id: 'TBTour1',
tour: '5c5308611a95467cde4e0c6a'
id: 'TBTour2',
tour: '5e2b2cb99e28bb227016a943'


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: