EyeSpy360 API & SDK

What are EyeSpy360™ Virtual Tours?

Fully immersive 360-degree walkthroughs of properties, boats, hotels and more, that users create and publish themselves using the quick and simple EyeSpy360™ Virtual Tour Editor. Take a look at our demo video on https://www.eyespy360.com. It really is very simple.

What is the EyeSpy360™ HTML Widget?

The EyeSpy360™ Widget is an API / SDK that allows you to add virtual tour creation and publishing to your own property listing editor. It is as simple as adding a single line of code:

<script src="https://e3.eyespy360.com/widget/virtual-tours.1.0.2.js?key=1234&secret=ABCDEF&externalTourID=myPropertyID&target=virtualTourURL"></script> 

Who is this for?

You already operate a property listing management system where your users create, edit and publish property listings. These listings include descriptions and images, and you want to give your users the ability to create 360 virtual tours.

How does it work?

You probably already have a virtual tour URL form field for your property listing data record and edit form. If not, create one first. Add the EyeSpy360™ Widget one line embed code and set the target parameter to the ID of the HTML input field for virtual tour URL, e.g. <input id="virtualTourURL". The widget will automatically place a Virtual Tour Editor button after the input field.

When a user clicks on the Tour Editor button, the EyeSpy360™ Tour Editor will appear inside the same web page as a 95% x 95% pop-up. The user uploads the 360 images, links them via their entrances and exits, previews the virtual tour and clicks 'Publish'. The published URL is automatically entered in the virtual tour URL form field specified by the target widget parameter. The Tour Editor closes when the user clicks the Close button in the top-right, or if the user clicks outside the Tour Editor, where the main website is still visible in the 5% pop-up margin.

You will then store the Virtual Tour URL value in your database along with any other fields the user has modified, as the user saves their changes.

Widget parameters

key, secret - Mandatory. The key and secret fields are displayed under your 'Settings -> API Credentials' section in https://e3.eyespy360.com. Don't have an EyeSpy360™ account? Get one for FREE

externalTourID - Mandatory. A unique identifier provided by you. Max length 36 characters. You will be already storing your properties in a data store under some unique identifier. Use that here.

target - Mandatory. The ID of the HTML input field that the EyeSpy360™ Virtual Tour editor will put the Tour URL.

agent - Optional. If your property management system is multi-user or even multi-company, please set this field to a user or a company name. This will help you track which tours belong to which agent in the EyeSpy360™ backend. Example: Jon Doe, Jane Doe, Doe Estates

tour - Optional. Name of the virtual tour . Set this to your property listing title, so that your users don't need to enter it again in the Tour Editor. Example: Cavendish House

hl - Optional. Interface language. Supported values are ar,bg,de,en,es,fr,nl,pt,ru,th,zh. Defaults to 'en'

Widget button customization

You will almost certainly want to change the way the 'Tour Editor' button looks to match your own website look and feel. You can do that by applying any CSS you like to the eyespy360_btn element. Example:

#eyespy360_btn {
  color: red;
  font-weight: bold;
  margin-left: 10px;
}

Android Virtual Tour SDK 

You can also emebed the EyeSpy360™ Tour Editor directly into your Android Application. Take a look at the SDK at https://github.com/eyespy360/Virtual-Tour-Android-SDK

iOS Virtual Tour SDK

You can also embed the EyeSpy360™ Tour Editor directly into your iOS Application. Take a look at the SDK at: https://github.com/eyespy360/Virtual-Tour-iOS-SDK

Test Content

Panoramic images and floor plans:

https://www.eyespy360.com/downloads/EyeSpy360_Test_Images.zip

How do I embed the tours in my published property listings?

Embedding in an iframe:

<iframe width="640" height="390" src="virtualTourURL" allowfullscreen></iframe>

Where VirtualTourURL is the value from your data store. Adjust width and height to match your design.