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 →
- Login using your credentials
- Select My Tours
- Choose the tour you would like to embed
- Select Share on top
- Copy code from steps 1 and 2
Access my TourBuilder Go embed code →
- Login using your credentials
- Select My Tours
- Choose the TourBuilder Pro parent tour
- Select the Units tab
- Choose the TourBuilder Go tour you would like to embed
- Select the Share tab
- 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: