EvoVR Web API - official documentation
Free Web API, get started now.

This is the EvoVR Web API integration documentation and is intended for websites or portals that wish to do automatic integration to create and visualize virtual tours.
If you just need to embed/share a created virtual tour, we strongly recommend that you use Iframe embedding from the virtual tour sharing options.

Integrate virtual tours with immersive virtual reality into your website or portal in a few easy steps.

Introduction

Looking for a quick and easy way to integrate virtual tours and immersive virtual reality into your website or blog? Use the EvoVR Web API provided by WeboBook.

EevoVr is a tool for creating and visualizing virtual tours with immersive virtual reality, it can be integrated into any site or portal with multiple accounts via API.

API integration

EvoVr consists of two parts, EvoVR Virtual Tour Creator and EvoVR Virtual Tour Player. The integration of EvoVR Virtual Tour Creator and EvoVR Virtual Tour Player is done separately.

EvoVR Virtual Tour Creator is the tool used to create and edit virtual tours. Integrates in the administrative part of the site, where ads or posts are created or edited.

EvoVR Virtual Tour Player is the player that visualizes virtual tours in front of the end user. It must be integrated in the public part of the site, where ads or posts are displayed to end users.

The architecture of EvoVR is built so that it can be integrated into any type of site, both in blogs or corporate sites and in large portals with multiple separate accounts.

EvoVR Virtual Tour Creator integration

There are three steps to add an EvoVR Virtual Tour Creator.

Editor integration should be in the admin panel of your site where your ads or posts are created and edited.

  1. Step 1: Add the CSS link.
  2. Step 2: Add the JS links, authenticate the application and specify the language.
  3. Step 3: Add an HTML tag and make the necessary settings.

Step 1: Add the CSS link

Copy and paste the <link> styles into the <head> section of your page.

<link rel="stylesheet" href="https://webobook.com/css/evovr.css"> 
<link rel="stylesheet" href="https://webobook.com/css/evovr-preview.css">

Step 2: Add the JS links, authenticate the application and specify the language

Step 2-1: Place the following <script> at the bottom of your pages, just before the closing </body> tag, to enable them.

Important!

If you have integrated jQuery on your site, use the code from the "Without jQuery" tab.
If you do not have integrated jQuery on your site, use the code from the "With jQuery" tab.
In order for EvoVR to work, you need the jQuery library, but if you are already loading it on your site, you need to put the javascript link, which is without the jQuery library.
<script src="https://webobook.com/asset/as:VIEW_API_KEY"></script> - Without jQuery
<script src="https://webobook.com/asset/af:VIEW_API_KEY"></script> - With jQuery 

<script src="https://webobook.com/asset/as:VIEW_API_KEY"></script>
<script src="https://webobook.com/api/asset/u:VIEW_API_KEY,EDIT_API_KEY,YOUR_LANGULAGE"></script>
<script src="https://webobook.com/asset/af:VIEW_API_KEY"></script>
<script src="https://webobook.com/api/asset/u:VIEW_API_KEY,EDIT_API_KEY,YOUR_LANGULAGE"></script>
To authenticate your application you need to get your API keys as described in Step 2-2. There are two API keys "VIEW_API_KEY" and "EDIT_API_KEY".

Step 2-2: Follow these steps to get API keys and verify the application:

  1. Go to the API Keys tab in Account settings.
  2. In the Domain name field, enter the name of the domain for which you want to generate API keys.
  3. Click Add to generate API keys for the specified domain.
  4. From the list below, copy the first API key from the View token column and paste it in place of "VIEW_API_KEY" in the two JS links you placed on your site.
  5. From the list, copy the second API key from the Edit token column and paste it in place of "EDIT_API_KEY" in the second JS connection.

Step 2-3: Set the application language.

To set the application language, replace "YOUR_LANGULAGE" with the corresponding value from the Language code column in the table below.

Language code The language
en English
bg Bulgarian
it Italian
If you need another language, contact us and we will add it within a working week.
Contact Us

Step 3: Add an HTML tag and make the necessary settings

Step 3-1: Place the <html> tag on your page where you want the editor button to appear.

<div class="evovr-tour-editor" postid="POST_ID" showGadget="true" buttonColor="gray" showIcon="true" editText="Edit Virual Tour" createText="Create Virtual Tour"></div>

An important setting of the EvoVR Virtual Tour Creator is to submit a "POST_ID" to initialize the virtual tour.

The table below describes additional settings for customizing the EvoVR Virtual Tour Creator.

Step 3-2: Enter a value for postid and make the desired settings.

Submitting a value to postid is required, postid initializes the virtual tour.

For postid you can set a variable with the ID number of your ad or post. Put the variable in place of the "POST_ID".

Table with additional settings:

Settings Description
class="evovr-tour-editor" Class of the element that calls EvoVR Virtual Tour Creator. EvoVR Virtual Tour Creator can be called from any html element with class "evovr-tour-editor".
Type: string
Example: class="evovr-tour-editor"
postid Your ad or post ID. Replace the POST_ID with the ID of your ad or post.
Type: string
Example: postid="1000"
showGadget Widget that includes a button and icon for EvoVR - Editor. showGadget can have values false (disable the widget) or true (enable the widget)
Type: Boolean
Example: false, true
Example: showGadget="true"
buttonColor If the widget is enabled (showGadget="true"), you can adjust the color of the button. Possible values for buttonColor are gray, blue, gray, green, red.
Type: string
Example: blue, gray, green, red
Default: gray
Example: buttonColor="blue"
showIcon If the widget is enabled (showGadget="true"), you can set whether to display an icon in the widget. Possible values are false (does not show an icon) or true (shows an icon).
Type: Boolean
Example: false, true
Default: true
Example: showIcon="true"
editText If the widget is enabled (showGadget="true"), you can place custom text on the edit button of the virtual tour in the widget. For example, you can change editText="Edit Virual Tour" to editText="Edit My Virual Tour".
Type: string
Example: editText="Edit My Virtual Tour"
createText If the widget is enabled (showGadget="true"), you can place custom text on the button to create the virtual tour. For example, you can change createText="Create Virtual Tour" to createText="Create My Virtual Tour".
Type: string
Example: createText="Create New Virtual Tour"

Try it yourself

Copy the code below and create a test page on your site to experiment.

Be sure to generate API keys for your domain and place the corresponding keys in place of "VIEW_API_KEY" and "EDIT_API_KEY" in the JS connection.

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 Creator:Test</title>
<link rel="stylesheet" href="https://webobook.com/css/evovr.css">
<link rel="stylesheet" href="https://webobook.com/css/evovr-preview.css">
</head>
<body>
<div class="evovr-tour-editor" postid="101" buttonColor="gray" showGadget="true" showIcon="true" editText="Create a tour" createText="Edit tour" >Open</div>
<script src = "https://webobook.com/asset/af:VIEW_API_KEY"></script>
<script src = "https://webobook.com/api/asset/u:VIEW_API_KEY,EDIT_API_KEY,en"></script>
</body>
</html>

EvoVR Virtual Tour Creator - integration with included gadget

Demo

Evo VR Virtual Tour Creator - standard integration

Demo

EvoVR Virtual Tour Player integration

There are three steps to integrating the EvoVR Virtual Tour Player. The integration of the player should be in the public part of your site where your ads or posts are displayed to the end user.

  1. Step 1: Add the CSS link.
  2. Step 2: Add the JS links, authenticate the application and specify the language.
  3. Step 3: Add an HTML tag and make the necessary settings.

Step 1: Add the CSS link

Copy and paste the <link> styles into the <head> section of your page.

<link rel="stylesheet" href="https://webobook.com/css/evovr-preview.css">

Step 2: Add the JS links, authenticate the application and set the language

Step 2-1: Paste <script> at the bottom of your pages, just before the closing </body> tag, to enable them.

Important!

If you have integrated jQuery on your site, use the code from the "Without jQuery" tab.
If you do not have integrated jQuery on your site, use the code from the "With jQuery" tab.
In order for EvoVR to work, you need the jQuery library, but if you are already loading it on your site, you need to put the javascript link, which is without the jQuery library.
<script src="https://webobook.com/asset/as:VIEW_API_KEY"></script> - Without jQuery
<script src="https://webobook.com/asset/af:VIEW_API_KEY"></script> - With jQuery 

<script src="https://webobook.com/asset/as:VIEW_API_KEY"></script>
<script src="https://webobook.com/asset/c:VIEW_API_KEY,YOUR_LANGULAGE"></script>
<script src="https://webobook.com/asset/af:VIEW_API_KEY"></script>
<script src="https://webobook.com/asset/c:VIEW_API_KEY,YOUR_LANGULAGE"></script>
To authenticate the EvoVR Virtual Tour Player you need to get your API keys as described in Step 2-2.

Step 2-2: Follow these steps to get an API key if you dont already have and verify EvoVR Virtual Tour Player:

  1. Go to the API Keys tab in Account settings.
  2. (If you have already generated an API key for your site, skip this step.) If you have not yet generated an API key for your site, in the Domain name field, enter the domain name for which you want to generate an API key..
  3. (If you have already generated an API key for your site, skip this step.) Click Add to generate API keys for the specified domain.
  4. From the list below, copy the first API key from the View token column and paste it in place of "VIEW_API_KEY" in the two JS links you posted on your site.

Стъпка 2-3: Set the language of the application.

To set the application language, replace "YOUR_LANGULAGE" with the corresponding value from the Language code column in the table below.

Language code The language
en English
bg Bulgarian

Step 3: Add an HTML tag and make the necessary settings

Step 3-1: Put the following <html> on your page where you want EvoVR Virtual Tour Player to appear.

<div class="evovr-tour-loader" postid="POST_ID" showIFrame="true" showGadget="false" showIcon="false" buttonColor="" text="" style="width:250px; text-align:center;"></div>

This embedding method will load the virtual tour in Iframe directly. If you dont want the virtual tour to load directly, see the advanced settings table or other embedding examples in the examples section.

An important setting is to submit a "POST_ID" to initialize the virtual tour.

The table below describes additional settings for configuring EvoVR Virtual Tour Player.

Step 3-2: Set a value for postid and make the desired settings.

Submitting a value to postid is required, postid postid initializes the virtual tour.

For postid you can set a variable with the ID number of your ad or post. Put the variable in place of the "POST_ID".

Additional settings for EvoVR Virtual Tour Player:

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.
1. Insert your API key from the View token in place of "VIEW_API_KEY".
2. Put your ad or post ID in place of "POST_ID".

Example with php

$tour_validation_url = 'https://webobook.com/public/ct:VIEW_API_KEY,POST_ID';
$tour_validation = file_get_contents($tour_validation_url);

Additional settings

Settings Description
class="evovr-tour-loader" Class of the element that calls EvoVR Virtual Tour Player. EvoVR Virtual Tour Player can be called from any html element with class "evovr-tour-loader".
Type: string
Example: class="evovr-tour-loader"
postid Your ad or post ID. Replace the POST_ID with the ID of your ad or post.
Type: string
Example: postid="1000"
showIFrame Loads the virtual tour in the iframe.
Type: Boolean
Example: false, true
Example: showIFrame="true"
showGadget Widget that includes a button and icon for EvoVR - Player. showGadget can have values of false (disable the widget) or true (enable the widget).
When the widget is activated, the virtual tour opens in a modal window after clicking on it.
Dependencies: showIFrame must be false, for the widget to activate.
Type: Boolean
Example: false, true
Default: false
Example: showGadget="true"
buttonColor If the widget is enabled (showGadget="true") you can adjust the color of the button. Possible values for buttonColor are gray, blue, gray, green, red.
Type: string
Example: blue, gray, green, red
Default: gray
Example: buttonColor="blue"
showIcon If the widget is enabled (showGadget="true"), you can set whether to display an icon in the widget. Possible values are false (does not show an icon) or true (shows an icon).
Type: Boolean
Example: false, true
Default: true
Example: showIcon="true"
text If the widget is enabled (showGadget="true"), you can place custom text on the button in the widget to view the virtual tour.
Type: string
Example: text="View the virtual tour"

Try it yourself

Copy the code below and create a test page on your site to experiment.

Remember to generate API keys (if you havent already) for your domain and place the appropriate key in place of "VIEW_API_KEY" in the JS connection.

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>
<link rel="stylesheet" href="https://webobook.com/css/evovr-preview.css">
</head>
<body>
<div class="evovr-tour-loader" postid="101" showIFrame="true" style="width:100%; height:100%"></div>
<script src = "https://webobook.com/asset/af:VIEW_API_KEY"></script>
<script src = "https://webobook.com/asset/c:VIEW_API_KEY,bg"></script>
</body>
</html>

EvoVR Virtual Tour Player - direct loading of the virtual tour of the page

Demo

EvoVR Virtual Tour Player - loading the virtual tour in a modal window

Demo

EvoVR Virtual Tour Creator - integration in iframe

EvoVR Virtual Tour Creator can be integrated into Iframe. This method of integration isolates EvoVR Virtual Tour Creator from the website in which it integrates and avoids possible problems with java scripts as well as ensures better security.

Generate API keys for your domain and place the corresponding keys instead of "VIEW_API_KEY" and "EDIT_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 Creator:Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<button id="opener" style="cursor:pointer">Open Tour Creator</button>
<script>

            var opener = document.getElementById('opener');
			var edtorDiv;
            opener.onclick = function(){             
                edtorDiv = document.createElement("div");  
				edtorDiv.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/api/asset/i:POST_ID,VIEW_API_KEY,EDIT_API_KEY,en");
                ifrm.setAttribute("style", "width:100%;height:100%;border:0;");
				ifrm.setAttribute("allow", "microphone");                
                edtorDiv.appendChild(ifrm);  
                document.body.appendChild(edtorDiv); 
				document.body.setAttribute("style", "overflow: hidden");
            }
			
			if ( window.addEventListener ) {
				window.addEventListener('message', handleClose, false);
			} else if ( window.attachEvent ) { // ie8
				window.attachEvent('onmessage', handleClose);
			}
	
			function handleClose(e){   
				if(  e.data=="evr_editor_closed" && edtorDiv ){
					edtorDiv.remove();
					document.body.removeAttribute("style", "overflow: hidden");
				}
			}

</script>
</body>
</html>

Embedding EvoVR Virtual Tour Creator in an iframe

Demo

EvoVR Virtual Tour Player - integration of the virtual tour in the iframe

EvoVR Virtual Tour Player can be integrated into Iframe. This method of integration isolates EvoVR Virtual Tour Player from the website in which it integrates and avoids possible problems with java scripts as well as ensures better security.

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
lazyInitd

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&"
ap

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&"
si

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&"
sm

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&"
sp

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&"
sfr

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&"
sl

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&"
sop

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&"

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.
1. Insert your API key from the View token in place of "VIEW_API_KEY".
2. Put your ad or post ID in place of "POST_ID".

Example with php

$tour_validation_url = 'https://webobook.com/public/ct:VIEW_API_KEY,POST_ID';
$tour_validation = file_get_contents($tour_validation_url);

EvoVR Virtual Tour Player - integration of the virtual tour in the iframe

Demo

Embedding the EvoVR Virtual Tour Player in a frame that loads in a modal window 

<!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>

EvoVR Virtual Tour Player - integration of the virtual tour in the iframe

Demo

Integration in portals with multi-user access.

The EvoVR Web API can be integrated into multi-user applications. To separate individual users you need to submit the user id in place of "EDIT_API_KEY".
It is recommended to use a hash function such as hash("sha256", "EDIT_API_KEY");. The minimum characters to be sent for "EDIT_API_KEY", are 16.
The EvoVR Web API will prompt your individual users to create a WeboBook account and will connect each individual user to your client in the API.
In this way, each individual user will be able to independently manage their virtual tours.

Evo VR Virtual Tour Creator - integration into multi-user websites

Demo

Personal settings

If you need custom settings for the EvoVR Web API, please contact us.
For example:
Remove Outsource button from the editor.
Remove Video tutorial link from the editor.
Remove Powered by WeboBook °.

Contact Us
GitHub