How to Embed Panoskin On Your Website

Embedding Panoskin On Your Website

Step 1

Add the following CSS snippet before the end of your closing head tag.

<style>

#pano {
  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 2

Create a container with id="pano" and place it wherever you want your tour to show on your web page.

<div id="pano"></div>

Step 3

Add the following JavaScript snippet before the end of your closing body tag </body> and replace TOUR-ID with your tour's ID (Where can I find my TOUR ID?).

<script src="//lcp360.cachefly.net/panoskin.min.js"></script>
<script>
  PANOSKIN.createViewer({
    id: 'pano',
    tour: 'TOUR-ID' /* Replace TOUR-ID with your tour's ID */ 
  }); 
</script>

Support

Embedding Panoskin On Your Website

Step 1

Step 2

Embedding Panoskin in Facebook

Panoskin: Starting On a Specific Scene

How To Get My Panoskin Tour ID

LCP360

Tell us about your project