How to Embed a TourBuilder Tour On Your Website

This article will go over how to embed a TourBuilder Tour on a website.

The exact embed code can be found within TourBuilder Insights.

Access my TourBuilder Pro embed code →

  1. Login using your credentials
  2. Select My Tours
  3. Choose the tour you would like to embed
  4. Select Share on top 
  5. Copy code from steps 1 and 2 

Access my TourBuilder Go embed code →

  1. Login using your credentials
  2. Select My Tours
  3. Choose the TourBuilder Pro parent tour 
  4. Select the Units tab 
  5. Choose the TourBuilder Go tour you would like to embed 
  6. Select the Share tab
  7. Copy code from step 1 and 2

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 advanced embedding options?

Check out our Advanced Embedding Options Tutorial



Sample JSfiddle for how to embed a tour below: