EvoVR Virtual Tour Player - integration of the virtual tour in the iframe
Embedding EvoVR Virtual Tour Player in an iframe
Generate API keys for your domain and paste the appropriate key instead of "VIEW_API_KEY"
in the URL.
Put in place of "POST_ID"
a unique identification number for your platform with which to identify the virtual tour.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EvoVR Virtual Tour Player:Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<iframe style="width: 100%; height: 500px; border: none; max-width: 100%;"
allow="xr-spatial-tracking;vr;gyroscope;accelerometer;fullscreen;" scrolling="no"
allowfullscreen="true" frameborder="0" allowfullscreen="true" allowvr="yes"
src="https://webobook.com/public/i:POST_ID,VIEW_API_KEY,en" allowvr="yes"></iframe>
</body>
</html>
Embedding options
Parameters to the URL in the iframe to customize the tour.
src="https://webobook.com/public/https://webobook.com/public/i:POST_ID,VIEW_API_KEY,en?lazyInit=true&ap=true&si=true&sm=false&sp=true&sfr=false&sl=false&sop=false&"
URL Parameter | Description |
---|---|
|
Lazy load If the parameter has a value of true you will activate a lazy load and the initial photo of the tour will be loaded.This option is suitable when you want the tour to load after the user clicks the play button. Values: true - activates lazy load, false or lack of a parameter will load the tour directly.Example: ?lazyInit=true src="https://webobook.com/public/https://webobook.com/public/i:POST_ID,VIEW_API_KEY,en?lazyInit=true&"
|
|
Autoplay Enables or disables automatic tour playback.Values: true - active, false - inactive.Example: ?ap=false src="https://webobook.com/public/https://webobook.com/public/i:POST_ID,VIEW_API_KEY,en?ap=false&"
|
|
Info button Shows or hides the info button.Values: true - active, false - inactive.Example: ?si=false src="https://webobook.com/public/https://webobook.com/public/i:POST_ID,VIEW_API_KEY,en?si=false&"
|
|
Messages button Shows or hides the messages button.Values: true - active, false - inactive.Example: ?sm=false src="https://webobook.com/public/https://webobook.com/public/i:POST_ID,VIEW_API_KEY,en?sm=false&"
|
|
Phone button Show or hide the phone button.Values: true - active, false - inactive.Example: ?sp=false src="https://webobook.com/public/https://webobook.com/public/i:POST_ID,VIEW_API_KEY,en?sp=false&"
|
|
Full resolution If it is active, it loads the photos in full resolution.Values: true - active, false - inactive.Example: ?sfr=false src="https://webobook.com/public/https://webobook.com/public/i:POST_ID,VIEW_API_KEY,en?sfr=false&"
|
|
Location Show or hide the location.Values: true - active, false - inactive.Example: ?sl=false src="https://webobook.com/public/https://webobook.com/public/i:POST_ID,VIEW_API_KEY,en?sl=false&"
|
|
Opened plan Show opened plan.Values: true - active, false - inactive.Example: ?sop=true src="https://webobook.com/public/https://webobook.com/public/i:POST_ID,VIEW_API_KEY,en?sop=true&"
|
Embedding the EvoVR Virtual Tour Player in a frame that loads in a modal window
Generate API keys for your domain and paste the appropriate key instead of "VIEW_API_KEY"
in the URL.
Put in place of "POST_ID"
the unique identification number you put for EvoVR Virtual Tour Creator.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EvoVR Virtual Tour Player:Test</title>
</head>
<body>
<button id="opener" style="cursor:pointer">Open Tour Creator</button>
<script>
var opener = document.getElementById('opener');
var viewerDiv;
opener.onclick = function(){
viewerDiv = document.createElement("div");
viewerDiv.setAttribute("style", "position: fixed;left:0;top:0;width:100%;height:100%;z-index:9999;overflow:hidden;");
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "https://webobook.com/public/i:POST_ID,VIEW_API_KEY,en,modal");
ifrm.setAttribute("style", "width:100%;height:100%;border:0;");
ifrm.setAttribute("allow", "xr-spatial-tracking;vr;gyroscope;accelerometer;fullscreen;");
ifrm.setAttribute("allowfullscreen", "true");
ifrm.setAttribute("allowvr", "yes");
ifrm.setAttribute("scrolling", "no");
ifrm.setAttribute("width", "100%");
ifrm.setAttribute("height", "100%");
document.body.setAttribute("style", "overflow: hidden");
viewerDiv.appendChild(ifrm);
document.body.appendChild(viewerDiv);
}
if ( window.addEventListener ) {
window.addEventListener('message', handleClose, false);
} else if ( window.attachEvent ) { // ie8
window.attachEvent('onmessage', handleClose);
}
function handleClose(e){
if( e.data=="evr_viewer_closed" && viewerDiv ){
viewerDiv.remove();
document.body.removeAttribute("style", "overflow: hidden");
}
}
</script>
</body>
</html>
Check if the virtual tour is published.
https://webobook.com/public/ct:VIEW_API_KEY,POST_ID
This URL returns the status of the virtual tour in XML format.
If the result is 0, the virtual tour is unpublished, if the result is 1, the virtual tour is published.
Example with php
$tour_validation_url = 'https://webobook.com/public/ct:VIEW_API_KEY,POST_ID';
$tour_validation = file_get_contents($tour_validation_url);