VertoSpin^TM - Embedding Guide

Need help getting started? Contact us!

There are 4 embedding VertoSpin^TM options:

‍1. Plain (Best for Desktop!)
The VertoSpin^TM will show in the selected element.

‍2. Hybrid (Best for Mobile!)
The VertoSpin^TM will show in the selected element without interactive controls. On click a modal will appear with interactive control.

‍3. Popup (Best for Gallery!)
On click the selected element a modal will appear with interactive control.

‍4. Popup_button (The Easiest!)
A button with click a modal will appear with interactive control.

The guide contain integration examples and parameter explanation.
Let's see how it works!

Integration Examples:

Plain integration (Best for Desktop!)

Plain integration - Default

Default parameters

Plain integration + A\B Test

with "add to cart" rate and A\B test with X% of the users *
^{* as defined in you company settings}

Plain integration - Brand name + SKU

Select an item with brand name and SKU instead of UPC

Hybrid integration (Best for Mobile!)

Hybrid integration - Default

Default parameters

Hybrid integration - Custom width size

With custom modal size of 70% of the page width (and 100% of the pageheight - as it's the default)

Hybrid integration - Custom modal size

with custom modal size of 70% of the page width and 90% of the pageheight

Popup integration - (Best for Gallery!)

Popup integration

Default parameters

Popup integration - Brand name + SKU

With brand name and SKU instead of UPC, and custom model size of 70% of the page height (and 100% of the page width - as it's the default)

Popup integration - With A\B test

with "add to cart" rate and a/b test with X% of the users *
^{* as defined in you company settings}

Popup_button integration - (The Easiest!)

Popup_button integration - Default

Default parameters (the button will create next to the script's location)

Popup_button integration - Custom text

With custom text on the button - "Press Here to VertoSpin"

Parameters

The following parameter will help you to define and customize your integration to VertoSpin^TM.

Mandatory params:

feature

Verto feature type id to load:

0: Image. a shoe still images
1: Spin. a 360 view interactive set of images
2: 3D. a full immersive 3d experience with a 3d model

upc

upc (unique identifier) to ask from server

An international unique identifier for specific item
‍
MANDATORY PARAMETER ONLY IF YOU DON'T SEND 'brandName' AND 'sku'

brandName

Name for the product brand (should be given with sku)

MANDATORY PARAMETER ONLY IF YOU DON'T SEND 'upc'

sku

Name for the product sku (should be given with brandName)

MANDATORY PARAMETER ONLY IF YOU DON'T SEND 'upc'

elementId

HTML Element in which to load the VertoSpin^TM

HTML Element in which to load the VertoSpin^TM in.
The element MUST HAVE proper responsive size on the page.
If the element is NOT mandatory and doesn't exist, a new element will be created next to the script's location.

MANDATORY ON ALL INTEGRATION TYPES EXCEPT ON POPUP_BUTTON INTEGRATION

Optional params:

integrationType

How to integrate the viewer in the page: {plain, hybrid, popup, popup_button}.

plain: The feature will be loaded directly to the page

hybrid: A viewer without interaction capabilities will be on the page. on press popup will open and the user can interact with the viewer.
‍
popup: An existing element will be used as button to open the viewer popup
‍
popup_button: A button will be added to the page and the viewer will be visible on popup

default: plain

viewerRatio

String value to specify the aspect ratio of the viewer

width value must be initiated for the provided element on the page
Example value:
     '1x1' -Will show a 1*1 viewer ratio
     '16x9' -Will show a 16*9 viewer ratio
    or any other (whole) number
‍
EFFECTS ONLY PLAIN AND HYBRID INTEGRATION
default: none

cartId

HTML Element of the add to cart button (to add event to events)

default: none

abtest

An integer (1/0), boolean (true/false) or a string ('true'/'false') value determines if users will participate in an A/B test

default: false

buttonClass

A class name that will be added to the button when choosing 'popup_button' integration

With this configuration the client should implement its own button's style

AFFECTS ONLY ON POPUP_BUTTON INTEGRATION

default: none

buttonText

Text to show in button for opening the modal/popup/dialog

AFFECTS ONLY ON POPUP_BUTTON INTEGRATION

default: "View In 3d"

modalWidth

A float number between 0.0 and 1.0 determines the width size of the modal

NO EFFECT ON PLAIN INTEGRATION

default: 1 (100%)

modalHeight

A float number between 0.0 and 1.0 determines the height size of the modal

NO EFFECT ON PLAIN INTEGRATION

default: 1 (100%)

modalBackdrop

A float number between 0.0 and 1.0 determines the backdrop shadow when modal is open

NO EFFECT ON PLAIN INTEGRATION

default: 0.8

modalBackgroundColor

Background color for the modal (any valid CSS color can be provided).
For example:

color as text: white, black, blue, red, etc.
RGB as hex: #FF99FF, #330033, etc. (including the hash symbol '#')
RGB as CSS: rgb(153,255,255)
RGBA: rgba(255,255,102, 0.75)

NO EFFECT ON PLAIN INTEGRATION

default: white

Validation Functions

To validate if the item exist you can use the following functions.
They are async functions that return a promise that always resolves.
The return value (after resolve) is true/false (true = UPC/SKU exists. false = not exists) or undefined if an error occurs.

The functions can be found at: https://cdn.verto.ai/vertoViewerApi.js

UPC validation

window.VERTO_API_CONTENT.validateFeatureByUpc(2, UPC);

async:
window.VERTO_API_CONTENT.validateFeatureByUpc(2, "UPC").then(vertoSpinExists => {}).catch(err => {});

sync:
vertoSpinExists = await window.VERTO_API_CONTENT.validateFeatureByUpc(2, "UPC");

Brand name and SKU validation

window.VERTO_API_CONTENT.validateFeatureBySku(2, brandName, sku);

async:
window.VERTO_API_CONTENT.validateFeatureBySku(2, "BRAND_NAME", "SKU").then(vertoSpinExists => {}).catch(err => {});>

sync:
vertoSpinExists = await window.VERTO_API_CONTENT.validateFeatureBySku(2, "BRAND_NAME", "SKU");

Need help getting started? Contact us!

VertoSpin^TM - Embedding Guide

Integration Examples:

Plain integration (Best for Desktop!)

Hybrid integration (Best for Mobile!)

Popup integration - (Best for Gallery!)

Popup_button integration - (The Easiest!)

Parameters

Mandatory params:

Optional params:

Validation Functions

Have a question? We're happy to hear from you!

Pages

Stay Connected

VertoSpinTM - Embedding Guide

Integration Examples:

Plain integration (Best for Desktop!)

Hybrid integration (Best for Mobile!)

Popup integration - (Best for Gallery!)

Popup_button integration - (The Easiest!)

Parameters

Mandatory params:

Optional params:

Validation Functions

Have a question? We're happy to hear from you!

Pages

Stay Connected

VertoSpin^TM - Embedding Guide