Support

How to Embed a Panoskin 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.


<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 TOUR-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 CustomerCare@lcp360.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:

Embedding Panoskin in Facebook

Embed your Panoskin tour into Facebook so prospects can interact right from your business page.
Learn More →

Embedding Panoskin on Your Website

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

How To Get My Panoskin Tour ID

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