How to Embed a TourBuilder Pro Tour: Starting 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); } </style>

Step 3: JS

Add the following JavaScript snippet to your page. Make sure to replace PANO-ID with your tour's 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 } }); </script>

You can also use the following URL syntax 

Sample JSfiddle for how to embed a tour below:

Embedding TourBuilder on Your Website

TourBuilder offers the flexibility to start your tour on a specific scene.
Learn More →

How To Get My TourBuilder Pro Tour ID

Learn how to identify and use your TourBuilder Tour ID as you embed your tour in various places.
Learn More →