Tour Integration examples for Websites


On this page you find two examples you can easily adapt to show tours from immoviewer on your own web page. For more comprehensive information on what parameters can be used in the request and what common approaches are please refer to Tour Integration for CRM Systems or Portals


External ID usage

You can request the tour using either the externalID or the tour name. In any case, the identity should be provided:

https://app.immoviewer.com/rest/v1/tour?identity={IDENTITY}&externalID={EXTERNAL_ID} 
https://app.immoviewer.com/rest/v1/tour?identity={IDENTITY}&name={TOUR_NAME} 
  • Replace {EXTERNAL_ID} with the external object ID for your expose.
  • Replace {TOUR_NAME} with the tour name.
  • Replace {IDENTITY} with the identity of the customer in immoviewer.


1 - Pop-up Integration

Replace {IDENTITY} and {EXTERNAL_ID} or {INTERNAL_ID} for your own tour values. The value of attr-identiy is prefered over attr-external, which is why attr-internal is used in case both are provided.

code
<script type='text/javascript' src='https://app.immoviewer.com/portals/assets/javascripts/embedcode-utils.js'></script>
<link rel='stylesheet' href='https://app.immoviewer.com/portal/assets/stylesheets/embedcode-utils.css' type='text/css' />
<a id='{NAME_OR_EXTERNAL_ID}' attr-identity='{IDENTITY}' attr-externalID={EXTERNAL_ID} attr-internalID={INTERNAL_ID} class='iframe embed-container' style='display : none;'><canvas width='400' height='200'></canvas></a>	

The Popup requires JQuery on the webpage and includes JQuery Colorbox itself. If you run into any errors please make sure the stylesheets of colorbox do not interfere with some stylesheets on your page (mostly when you are using colorbox already).

If you don't want the tour to be opened in a popup on the same page or your website does not allow this kind of deep integration you can also add the attribute "attr-newtab" to the <a> tag. In this case the same preview is shown, but the tour will open in a new tab when you click on it.

2 - Direct Integration (in the same page)

You can test it on your own in JsFiddle. Just replace {IDENTITY} and {TOUR_NAME} for your own values.

code
<html>
	<head>
		<!-- Insert this code in the <head> tag -->
		<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
		<!-- Finished insertion -->	
	</head>
	<body>
		<!-- Insert this part wherever (inside the body tag) you want to show the iframe -->
		<div style='max-width: 1280px; padding-bottom: 56.25%; position: relative; display: block; height: 0; overflow: hidden; margin: 0; display:none;'>
    		<iframe id='{EXTERNAL_ID}' style='position: absolute; top: 0; bottom: 0; left:0; width: 100%; height:100%' allowfullscreen></iframe>
		</div>
		<!-- Finished insertion -->	
 
<!-- Insert this script in the end-->
<script type='text/javascript'>            

(function($) {
	$(document).ready(function(){
		$.ajax({
			url: 'https://app.immoviewer.com/rest/v1/tour?identity={IDENTITY}&externalID={EXTERNAL_ID}',
			dataType: 'jsonp',
			success: function(data){
				if (data['type'] == "ITEM_NOT_FOUND") {
    	        	alert("Item does not have Tour or item does not exist");
    	    	}else if(data['iframe'] != null && data['iframe'] != ""){
					$('#{EXTERNAL_ID}').attr('src', data['iframe']);
		        	$('#{EXTERNAL_ID}').parent().show();
				}
			}
		});
	})
}(jQuery));
</script>
<!-- Finished insertion -->	
	</body>
</html>