How to Embed a TourBuilder Tour: Starting On a Specific Scene

This article will go over how to embed TourBuilder virtual tour that starts on a specific scene.

Step 1: HTML Container

Create a <div> to hold your tour and add a unique id (i.e. id="PSTour") and place it wherever you want your tour to show on your web page.

<div id="PSTour"></div>


Step 2: CSS

Style your <div> with some CSS. add the following CSS snippet before the end of your closing head tag.

#PSTour {
  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. Make sure to replace PANO-ID with your tour ID (Where can I find my TOUR ID?)

You will also need your scene PANO-ID of the scene you want your tour to start. To get a list of your carousel Pano-IDs contact

<script src="//"></script>
id: 'PSTour',
tour: 'TOUR-ID', /* Replace TOUR-ID with your tour's ID */
panoStart: {
panoid: 'PANO-ID', /* Replace PANO-ID with scene ID */
pov: {
heading: 0,
pitch: 0,
zoom: 1

You can also use the following URL syntax 

Sample JSfiddle for how to embed a tour below: