Code Monkey home page Code Monkey logo

virtual-tours-web-api's Introduction

Complete Web API documentation for Virtual Tours & Virtual Reality

Welcome to the EvoVR documentation - Web API for integrating Virtual Tours & Virtual Reality into web applications!

Integrate Virtual Tours & Virtual Reality into your site 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 Web API.

Web 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.

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.

  • Step 1: Add the CSS link.
  • Step 2: Add the JS links, authenticate the application and specify the language.
  • 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/asset/ev:latest">

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".
If you do not have integrated jQuery on your site, use the code from the "With jQuery".
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

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

or with With jQuery

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

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

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>

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.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EvoVR Virtual Tour Creator:Test</title>
<link rel="stylesheet" href="https://webobook.com/asset/ev:latest">
</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 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/asset/ep:latest">

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

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

or with With jQuery

<script src="https://webobook.com/asset/af:VIEW_API_KEY"></script>
<script src="https://webobook.com/asset/c:VIEW_API_KEY,YOUR_LANGULAGE"></script>

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.

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 not published 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".

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 Virtual Tour 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.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EvoVR Virtual Tour Player:Test</title>
<link rel="stylesheet" href="https://webobook.com/asset/ep:latest">
</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>

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.

Examples

You can experiment with the examples below.
Be sure to generate API keys (if you havent already) for your domain and insert the appropriate key.

Example of integrating EvoVR Virtual Tour Creator without using the widget.

You can call EvoVR Virtual Tour Creator from any html element with class "evovr-tour-editor" and set showGadget="false".

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EvoVR Virtual Tour Creator:Test</title>
<link rel="stylesheet" href="https://webobook.com/asset/ev:latest">
</head>
<body>
<button class="evovr-tour-editor" postid="101" showGadget="false" >Open</button>
<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>

Example of integrating EvoVR Virtual Tour Creator using the widget.

You can use the widget, which includes an icon and a button below it, to open the EvoVR Virtual Tour Creator.
The widget can be customized, display icon and button or just a button. You can change the color of the button from the preset ones.
You can see the widget setup options in the EvoVR Virtual Tour Creator settings table.
The example below will visualize the widget with all possible attributes.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EvoVR Virtual Tour Creator:Test</title>
<link rel="stylesheet" href="https://webobook.com/asset/ev:latest">
</head>
<body>
<div class="evovr-tour-editor" postid="101" showGadget="true" buttonColor="gray" showIcon="true" editText="Edit tour" createText="Create a 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>

Example of integrating EvoVR Virtual Tour Player with direct loading of the virtual tour in Iframe.

If you want to load a virtual tour along with loading the page, you must set the showIFrame="true" attribute. This will load the virtual tour in Iframe while your page loads.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EvoVR Virtual Tour Player:Test</title>
<link rel="stylesheet" href="https://webobook.com/asset/ep:latest">
</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>

Example of integrating EvoVR Virtual Tour Player by loading the virtual tour in a modal window.

If you want to load the virtual tour after clicking a button in a full-screen modal window, you can use a custom button or the built-in widget.

For a custom button you need to set the evovr-tour-loader class to the desired html element and set the attributes showIFrame="false" and showGadget="false".

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EvoVR Virtual Tour Player:Test</title>
<link rel="stylesheet" href="https://webobook.com/asset/ep:latest">
</head>
<body>
<button class="evovr-tour-loader" postid="101" showIFrame="false" showGadget="false"></button>
<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>

To use the built-in widget, which includes an icon and a button below it, you must set showIFrame="false" and showGadget="true". The gadget can be customized, display an icon and a button, or display a button only. You can change the color of the button from the preset ones. You can see the widget options in the EvoVR Virtual Tour Creator settings table.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EvoVR Virtual Tour Player:Test</title>
<link rel="stylesheet" href="https://webobook.com/asset/ep:latest">
</head>
<body>
<div class="evovr-tour-loader" postid="101" showIFrame="false" showGadget="true" buttonColor="gray" showIcon="true" text="View the virtual tour" style="width:250px; text-align:center;"></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>

virtual-tours-web-api's People

Contributors

webobook avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.