Support

How to Embed Two Panoskin Tours to Your Website

Step 1: HTML Containers

To have 2 or more tours on one page, Create a <div> to hold your tour and add a unique id to each one of them (i.e. id="PSTour1" and id="PSTour2") and place it wherever you want your tour to show on your web page.


<div id="PSTour1"></div>
<div id="PSTour2"></div>

Step 2: CSS

Style your <div> with some CSS. making sure you style your different IDs (i.e. #PSTour1 & #PSTour2)


<style>
  #PSTour1, #PSTour2 {
  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 using your <div> IDs 'PSTour1' & id 'PSTour2'


<script src="//lcp360.cachefly.net/panoskin.min.js"></script>
<script>
PANOSKIN.createViewer({
	id: 'PSTour1',
	tour: '5c5308611a95467cde4e0c6a'
});
PANOSKIN.createViewer({
	id: 'PSTour2',
	tour: '5e2b2cb99e28bb227016a943'
});
</script>

IMPORTANT: ID's must be different from the ones in this example - use your own Tour ID


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 →