1. Help Center
  2. Tour Distribution

How to embed the tour on your website or blog

Embedding a tour is easy. Just use the below embed code and update the tour ID with your tour ID and put it anywhere

You can embed the tour on a site.  see this page for an example https://floorplanonline.com/virtual-showings/#tour  

This is the embed code to use - just change the tour ID to the tour ID you want to embed. The tour ID is the bolded part below.   
<iframe name="tour" src="https://www.my.homediary.com/tour/184056" frameborder="2" width="100%" height="675"></iframe>
The embedded tour looks like this - it is responsive so if you adjust the width (100%) it will fill that container.  You do need to set the height to a certain pixel size.  As you can see, it works on custom websites or WordPress sites. 
This embed code uses our TOUR viewer - it can be used independently of the Story viewer format.  If you change to the Tour Viewer in the edit details option on Manage Tours, you can then set the default view, like the dashboard view or the floor plan view like you see on this page, or, you can just add a /xxxx at the end and show that content.  If you want the Story viewer to be your default, just make the initial save with your Tour Viewer settings, and then come back and change it back to the Story.  What you selected before for the Tour will stick when you use that tour version.
Examples
The story version of this tour is https://www.my.homediary.com/story/184056/b/
 
You can even embed just the 3D viewer with 3D Designer.  Here is an example using this tour link https://www.my.homediary.com/story/368100/b/3d for the embed code - notice it ends in /3D so that is what shows.
 
So I can use the Story version for the MLS and website distribution, but I can use the tour viewer for my website or blog.  You can see in the URL the words /tour/ or /story/ dictates which viewer shows so they can be used independently....and in different ways.   Pretty cool, huh!
Here is a video on how to do it on a WordPress website.