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.

<style>
  #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 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 ClientCare@lcpmedia.com. 

<script src="//lcp360.cachefly.net/panoskin.min.js"></script>
<script>
PANOSKIN.createViewer({
	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: