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: