Documentation ⁄ Developer ⁄ InstaVid360 ⁄ 360° Images, Video & Gallery Capturing

Field name	Description	Data type	Required
vehicle_id	Unique identifier for the vehicle in your system	alphanumeric	Required
stock_code	Reference for this vehicle at the dealership	alphanumeric	Optional (Defaults to vehicle_id)
brand	Brand of the vehicle, e.g. Audi	alphanumeric	Required
range	Range of the vehicle, e.g. Q5	alphanumeric	Required
derivative	Model derivative, e. g. 2.0 TFSI automatic	alphanumeric	Required
Year	Manufacturing or first registration year of the vehicle	4-digit integer	Optional
mileage	Current odometer reading for the vehicle	integer	Required
mileage_unit	Unit of the odometer reading	text ("km" or "mi")	Required
price	Advertised price for the vehicle	integer	Optional (recommended)
currency	Currency of the price in ISO 4217, e.g. USD, EUR, ZAR	Text (3 letters)	Required (if price is available)
colour	Colour of the vehicle	Text	Optional (recommended)
reg	Registration number of the vehicle	alphanumeric	Optional (recommended)
vin	VIN number of the vehicle	alphanumeric	Optional (recommended)
image	Link to an image for this vehicle, minimum size 800x600px recommended	Alphanumeric (url)	Optional (recommended)

Spin Code

Unique code for spin. Required

Field: data-spin

Camera Angle

Show, hide the camera angle display

Field: data-cam-angles

Default: true (show)

Options: true, false

Camera Angle position

Set position of the camera angle display (defaults to a button in the control bar)

Field: data-angleDisplay

Default: false

Options: bottom

Controls Align

Set position of control buttons

Field: data-control-align

Default: bottom

Options: top, middle, bottom

Controls Hover

Enable, disable "Go inside/outside" hover buttons

Field: data-control-hover

Default: true

Options: true, false

Controls Scale

Enable, disable control button responsiveness

Field: data-control-scale

Default: true

Options: true, false

Controls Text

Enable, disable control text variation of certain buttons

Field: data-control-titles

Default: true

Options: true, false

Controls Titles

Enable, disable control button title tooltips

Field: data-control-titles

Default: true

Options: true, false

Cursor

Custom cursor set option

Field: data-cursor

Default: basic

Options: basic, none

Exterior Keyframes

Degree interval between exterior gallery frame images

Field: data-ekf

Default: 45

Options: range between 10 - 180

Fullscreen

Enable, disable full-screen feature

Field: data-fullscreen

Default: true

Options: true, false

Gallery

Enable, disable or hide gallery feature

Field: data-gallery

Default: true

Options: true, false, hide

Height

Number of pixels or percentage string of player height

Field: data-height

Hotspots

Enable, disable or hide hotspot feature

Field: data-hotspots

Default: true

Options: true, false, hide

Hotspot Types

Hide, show hotspots based on the hotspot type. Multiple types can be displayed if separated by commas.

Field: data-hotspotType

Default: all

Options: all, feature, warning, danger, none

Hotspot Animate

Enable, disable hotspot icon animation on hover

Field: data-hotspot-animate

Default: true

Options: true, false

Hotspot Color

Set color of hotspot icon

Field: data-hotspot-color

Default: orange

Options: green, blue, red, orange, white, black, grey

Hotspot Scale

Enable, disable hotspot icon scaling based relative position

Field: data-hotspot-scale

Default: true

Options: true, false

Hotspot Titles

Enable, disable hotspot title headers

Field: data-hotspot-titles

Default: true

Options: true, false

Initial Load

Forces the player to load either exterior, interior or video on first load

Field: data-initial

Default: exterior

Options: exterior, interior, video

Interior

Enable, disable interior feature

Field: data-interior

Default: true

Options: true, false

Interior Keyframes

Degree interval between interior gallery frame images

Field: data-ikf

Default: 90

Options: range between 10 - 180

Language

Language of player in ISO 639-1 code format

Field: data-lang

Default: en

Options: en, de, es, fr, it, zh, sk, nl, cz, ar, tr, fr-ca, pt

Preview

Spin preview type

Field: data-preview

Default: bounce

Options: spin, sway, bounce, none

Spin Start Angle

Spin start angle

Field: data-angle

Default: 0

Options: range between 0-360

Quality

Set spin content quality, options for h = high, m = medium, l = low

Field: data-quality

Default: m

Options: h, m, l

Smoothing

Set exterior frame smoothing value, a higher value results in more frames for a smoother spin and also consumes more data

Field: data-smoothing

Default: 5

Options: 1 - 10

Width

Number of pixels or percentage string of player width

Field: data-width

Default: 100%

Zoom

Enable, disable zoom feature

Field: data-zoom

Default: true

Options: true, false

Zoom Reset

Enable, disable zoom reset feature

Field: data-zoom-reset

Default: true

Options: true, false

Zoom on mobile

Enable, disable zoom feature on mobile

Field: data-zoom-mobile

Default: true

Options: true, false

Blur Interaction

Show, hide the blurred overlay displayed before the initial user interaction

Field: blur-interaction

Default: true

Options: true, false

Load Control Bar

Show, hide the control bar before the initial user interaction

Field: data-load-control-bar

Default: true (show)

Options: true, false

Load Hotspots

Show, hide hotspots before the initial user interaction

Field: data-load-hotspots

Default: true (show)

Options: true, false

Align Close Left

Specifies whether close buttons should be positioned to the left

Field: data-align-close-left

Default: false (positioned to the right)

Options: true, false

Radar

Show, hide the radar displayed on the top left

Field: data-radar

Default: true (show)

Options: true, false

White-label CDN:

The player can be customized to load data from an alternative source such as a third-party CDN or using the CloudFront domain

Override JS

Set the custom path to load spin player JavaScript from

Field: data-override-js

Example: https://dstfk5pujma2h.cloudfront.net/v/master/0.7.latest/js/spin360.min.js

Override CSS

Set the custom path to load spin player style sheet from

Field: data-override-css

Example: https://dstfk5pujma2h.cloudfront.net/v/master/0.7.latest/css/spin360.min.css

Override Images

Set the custom path to load spin image content from

Field: data-override-images

Example: https://dstfk5pujma2h.cloudfront.net/{spin_code}/

Parameters to collect information from the player:

From version 0.7 onwards, the InstaVid360 player provides front end developers with functions to detect player events and errors. These functions and their uses are described below.

metricsReturn function

The function to retrieve interaction events is the metricsReturn() function and it should be called as follows

Field: data-metricsReturn

Example:

                <!-- element -->
                <div id="spin-div" style="max-width: 640px; margin: 0 auto;"></div>
                <!-- script -->
                <script src="https://static.instavid360.com/p/0.7.latest/spin360.lite.js"></script>
                <script>
                var spinplayer = loadSpin360("spin-div", {
                  spin:"16303531620341_5edd084cd02986cc88410dfa48eaeeb8ae70b6cf1b517b7ea",
                  smoothing: 5,
                  language:"en",
                  metricsReturn: function(eventType,eventName,metricsSession,playerVersion,portal,spinCode,timeStamp){
                    console.log(eventType+", "+eventName+", "+metricsSession+", "+playerVersion+", "+portal+", "+spinCode+", "+timeStamp);
                  }
                });
                </script>

Or:

              <div id="spin-div" style="max-width: 640px; margin: 0 auto;">
                <script src="https://static.instavid360.com/p/0.7.latest/spin360.lite.js"
                  data-spin="16303531620341_5edd084cd02986cc88410dfa48eaeeb8ae70b6cf1b517b7ea" 
                  data-metricsReturn="function(eventType,eventName,metricsSession,playerVersion,portal,spinCode,timeStamp){
                  console.log(eventType+', '+eventName+', '+metricsSession+', '+playerVersion+', '+portal+', '+spinCode+', '+timeStamp);}">
                </script>
              </div>

The events returned for the metricsReturn() function are:

Control Bar Button Clicks
Event Type	Event Name	Description
button_click	exterior	The exterior button was clicked. The exterior spin is displayed
button_click	interior	The interior button was clicked. The interior spin is in focus
button_click	video	The video button was clicked. The stock video is played
button_click	camAngles_toggle_on	he default angles button was clicked to show the default angles grid
button_click	camAngles_toggle_off	The default angles button was clicked to hide the default angles grid
button_click	gallery_toggle_on	The gallery button in the control bar was clicked to show the hotspot gallery
button_click	gallery_toggle_off	The gallery grid was closed either by the clicking the gallery toggle button or the close button
button_click	gyro_toggle_on	The motion control button on the control bar was clicked (mobile only) to enable motion control panning of the 360° Spin
button_click	gyro_toggle_off	The motion control button on the control bar was clicked (mobile only) to disable motion control panning of the 360° Spin
button_click	hotspot_toggle_on	The hotspot label button in the control bar was clicked to display the hotspot text
button_click	hotspot_toggle_off	The hotspot label button in the control bar was clicked to hide the hotspot text
button_click	zoom_in	The zoom in button on the control bar was clicked. Zooming in on the spin
button_click	zoom_out	The zoom out button on the control bar was clicked. Zooming out on the spin.
button_click	zoom_exit	The zoom exit button on the control bar was clicked. Resetting the zoom of the spin
button_click	fullscreen	The fullscreen button on the control bar was clicked. Bringing the player to fullscreen
button_click	fullscreen_exit	The fullscreen exit button on the control bar was clicked. Returning the player to normal view

Hotspots and Floating Buttons Clicks
Event Type	Event Name	Description
button_click	exterior_float	The "Go Outside" hotspot was clicked on the spin. Exterior spin is displayed
button_click	interior_float	The "Go Inside" hotspot was clicked on the spin. Interior spin is displayed
button_click	hotspot_view	A hotspot or key frame was viewed
button_click	hotspot_exit	The close button on the hotspot was clicked. Closing the hotspot and returning to spin view

Other Events
Event Type	Event Name	Description
interior_view	N/A	Gets called when mode is set to Interior/Interior spin is displayed
spin_interaction	N/A	Gets called whenever there is any kind of interaction with the player (spin panning, switching modes, zooming, playing video etc.)
exterior_view	N/A	Gets called when mode is set to Exterior/Exterior spin is displayed
spin_loaded	N/A	Runs once at the start of the script
exterior_spin	N/A	Exterior spin is being panned
interior_spin	N/A	Interior spin is being panned
spin_ping	N/A	The player records the spin view duration
hotspot_view	N/A	Gets called when a hotspot is displayed on the screen
video	N/A	Gets called when mode is set to Video/Video is displayed

onLoad function

The function(s) stored in this parameter will be executed once the player has loaded successfully.

Field: data-onLoad

Example:

                <!-- element -->
                <div id="spin-div" style="max-width: 640px; margin: 0 auto;"></div>
                <!-- script -->
                <script src="https://static.instavid360.com/p/0.7.latest/spin360.lite.js"></script>
                <script>
                var spinplayer = loadSpin360("spin-div", {
                  spin:"16303531620341_5edd084cd02986cc88410dfa48eaeeb8ae70b6cf1b517b7ea",
                  smoothing: 5,
                  language:"en",
                  onLoad: function(){
                    console.log("Loaded successfully!");
                  }
                });
                </script>

Or:

              <div id="spin-div" style="max-width: 640px; margin: 0 auto;">
                <script src="https://static.instavid360.com/p/0.7.latest/spin360.lite.js"
                  data-spin="16303531620341_5edd084cd02986cc88410dfa48eaeeb8ae70b6cf1b517b7ea" 
                  data-onLoad="function(){
                  console.log('Loaded successfully!');}">
                </script>
              </div>

onError function

The function stored in this parameter will be executed once an error occurs within the player. It will also return a variable containing the exact error.

Field: data-onError

Example:

                <!-- element -->
                <div id="spin-div" style="max-width: 640px; margin: 0 auto;"></div>
                <!-- script -->
                <script src="https://static.instavid360.com/p/0.7.latest/spin360.lite.js"></script>
                <script>
                var spinplayer = loadSpin360("spin-div", {
                  spin:"16303531620341_5edd084cd02986cc88410dfa48eaeeb8ae70b6cf1b517b7ea",
                  smoothing: 5,
                  language:"en",
                  onError: function(error){
                    console.log("Spin360 player failed to load - "+error);
                  }
                });
                </script>

Or:

              <div id="spin-div" style="max-width: 640px; margin: 0 auto;">
                <script src="https://static.instavid360.com/p/0.7.latest/spin360.lite.js"
                  data-spin="16303531620341_5edd084cd02986cc88410dfa48eaeeb8ae70b6cf1b517b7ea" 
                  data-onError="function(error){
                  console.log('Spin360 player failed to load -'+error);}">
                </script>
              </div>

Functions that can be used outside of the player:

Note: the below functions require Spin360.getPlayer(0) to be assigned when referencing the player.

validSpin()

Returns true if a valid spin is found.

Example:
var player = Spin360.getPlayer(0);
var validSpin = player.validSpin();

validVideo()

Returns true if a valid video is found.

Example:
var player = Spin360.getPlayer(0);
var validVideo = player.validVideo();

The below functions are used to destroy the player and clear the spin container. Usage of Spin360.getPlayer(0) isn't a requirement for these.

Spin360.destroyAll()

Destroys the Spin360 array.

Example:
Spin360.destroyAll();

Spin360.emptyElement()

Clears the spin container/spin div.

Example:
Spin360.emptyElement(spindiv);

Field name	Description
dealer_id	The dealer ID of the partner dealer
dealer_name	The name of the partner dealer
login_android	The total count of logins to the Android app during this period
login_ios	The total count of logins to the iOS app during this period
login_total	The total count of logins into apps during this period
message_viewed	The total count of direct message content viewed during this period
message_shared	The total count of direct message sent during this period
message_total	The total count of direct message created during this period
usage_spin_message	The total count of spin content created via direct message during this period
usage_spin_stock	The total count of spin content created via stock item during this period
usage_spin	The total count of spin content created during this period
usage_video_message	The total count of video content created via direct message during this period
usage_video_stock	The total count of video content created via stock item during this period
usage_video	The total count of video content created during this period
usage_total	The total count of content created during this period

Field name	Description
login_android	The total count of logins to the Android app during this period
login_ios	The total count of logins to the iOS app during this period
login_total	The total count of logins into apps during this period
message_viewed	The total count of direct message content viewed during this period
message_shared	The total count of direct message sent during this period
message_total	The total count of direct message created during this period
usage_spin_message	The total count of spin content created via direct message during this period
usage_spin_stock	The total count of spin content created via stock item during this period
usage_spin	The total count of spin content created during this period
usage_video_message	The total count of video content created via direct message during this period
usage_video_stock	The total count of video content created via stock item during this period
usage_video	The total count of video content created during this period
usage_total	The total count of content created during this period

Field	Description	Example
period_type	Type of stats return format, Y, M, D for year, month, and day respectively. Default is D	Required
date_from	The first date or time in period_type in format: 'Y-m-d H:i:s'	Required
date_to	End date of stats in format: 'Y-m-d H:i:s'	Optional
group_by	Stats data can be grouped by: "spin" or "dealer"	Optional
timezone	Timezone location eg Europe\|London	Optional

Field name	Description
period_type	This is the type of period to format stats data. The values are Y for year, M for month, or D for day.
period_start	This is the start time/date period for stats.
sessions	This is the count of instances where loading the spin player was attempted within the period.
min_duration	This is the shortest duration (seconds) of all sessions within the period.
max_duration	This is the longest duration (seconds) of all sessions within the period.
avg_duration	This is the average duration (seconds) of all sessions within the period.
spin_loaded	This is the count of times the spin player completed loading within the period.
exterior_view	This is the count of events when the exterior spin came into focus. This could be by loading the exterior spin or toggling into the exterior from the interior
exterior_spin	This is the count of times the exterior spin was rotated within the period.
interior_view	This is the count of events when the interior spin came into focus. This could be by loading the interior spin or toggling into the interior spin from the exterior spin.
interior_spin	This is the count of times the interior spin was rotated within the period.
hotspot_view	This is the count of hotspot views for the spin within the period.
gallery_scroll	This is the count of scrolls through the spin image gallery within the period.
button_click	This is the count of button clicks for the spin within the period.
spin_interaction	This is the count of spin interactions within the date period. A spin interaction is recorded for every click/tap and release event.
spin_loaded_unique	This is the unique count of times the spin was loaded within the period.
exterior_view_unique	This is the count of unique exterior_views.
exterior_spin_unique	This is the count of unique events when the the exterior spin was rotated within the period.
interior_view_unique	This is the count of unique interior_views.
interior_spin_unique	This is the count of unique events when the the interior spin was rotated within the period.
hotspot_view_unique	This is the count of unique hotspot views within the period.
gallery_scroll_unique	This is the sum of unique scrolls in the spin image gallery within the period.
button_click_unique	This is the count of unique button clicks for the spin within the period.
spin_interaction_unique	This is the count of unique interactions with the spin within the period.

Field	Description	Example
dealers	Partner dealer id. Allows for comma separated list of dealer ids	Required
period_type	Type of stats return format, Y, M, D for year, month, and day respectively. Default is D	Required
date_from	The first date or time in period_type in format: 'Y-m-d H:i:s'	Required
date_to	End date of stats in format: 'Y-m-d H:i:s'	Optional
group_by	Dealer Stats data can be grouped by: "spin".	Optional
timezone	Timezone location eg Europe\|London	Optional

Documentation

Integration overview

Authentication

Inventory/Stock Integration

Gallery Integration

Push Spin/Video Codes to Inventory/Stock System

Display 360° Spins/Video on Websites

Embedding 360° Spin and Video

Implementation instructions (Inline and Advanced)

Iframe Implementation instructions

Mandatory

Customisation

Embed Spin

Implementation instructions

Mandatory

Customisation

Step 1:

Step 2:

Step 3:

Step 4:

Reporting API

Retrieving sample data

Retrieving live data

Icon	Field	Default	Description	Options
	data-hotspot-color	grey	Set the color for the feature hotspot icon.	green, blue, red, orange, white, black, grey
	data-hotspot-warning-color	orange	Set the color for the warning hotspot icon.
	data-hotspot-danger-color	blue	Set the color for the danger hotspot icon.
All	data-hotspot-all-color	-	Set the same color for all types of hotspot icons. * It overrides any other hotspot color setting.

Field	Description	Example
feedprovider_reference	The unique vehicle identifier in the feed	Required
period_type	Type of stats return format, Y, M, D for year, month, and day respectively. Default is D	Required
date_from	The first date or time in period_type in format: 'Y-m-d H:i:s'	Required
date_to	End date of stats in format: 'Y-m-d H:i:s'	Optional
timezone	Timezone location eg Europe\|London	Optional