Support

How to Embed a Panoskin Tour On Your Website

Step 1: HTML Container

Create a <div> to hold your tour and add a unique id. Place the <div> wherever you want your tour to show on your web page.


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

Step 2: CSS

Style your <div> with some custom CSS.  Below is a sample CSS snippet.


<style>
  #PSTour {
width: 100%; height: 562px; /* Adjust height as needed */ max-width: 900px; /* Adjust max-width as needed */ margin: 0 auto; } </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?


<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 */
  });
</script>

Interested in some advanced embedding options?

Check out our Advanced Embedding Options Tutorial


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 →

Advanced Embedding Options 

Panoskin offers the flexibility to control specific options while embedding.
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 →