VertoSpinTM - Embedding Guide

Need help getting started? Contact us!
There are 4 embedding VertoSpinTM options:
1. Plain (Best for Desktop!)
The VertoSpinTM will show in the selected element.
2. Hybrid (Best for Mobile!)
The VertoSpinTM 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
<script src="https://cdn.verto.ai/vertoViewer.js?upc=195719218133&feature=2&
elementId=3d_placement"></script>
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
<script src="https://cdn.verto.ai/vertoViewer.js?upc=195719218133&feature=2&
elementId=3d_plain_AB_Test&
cartId=add_to_cart_btn&abtest=true"></script>
Plain integration - Brand name + SKU
Select an item with brand name and SKU instead of UPC
<script src="https://cdn.verto.ai/vertoViewer.js?brandName=hoka&
sku=1123200/bbgp&
feature=2&
elementId=3d_placement"></script>

Hybrid integration (Best for Mobile!)

Hybrid integration - Default
Default parameters
<script src="https://cdn.verto.ai/vertoViewer.js?upc=195719218133&feature=2&
elementId=3d_hybrid&
integrationType=hybrid"></script>
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)
<script src="https://cdn.verto.ai/vertoViewer.js?upc=195719218133&feature=2&
elementId=3d_hybrid_size&
integrationType=hybrid&modalWidth=0.7"></script>
Hybrid integration - Custom modal size
with custom modal size of 70% of the page width and 90% of the pageheight
<script src="https://cdn.verto.ai/vertoViewer.js?upc=195719218133&feature=2&
elementId=3d_hybrid_size_2&
integrationType=hybrid&modalWidth=0.7&
modalHeight=0.9"></script>

Popup integration - (Best for Gallery!)

Popup integration
Default parameters
<script src="https://cdn.verto.ai/vertoViewer.js?upc=195719218133&feature=2&
elementId=btn_placement&
integrationType=popup"></script>
shoe image
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)
<script src="https://cdn.verto.ai/vertoViewer.js?brandName=hoka&sku=1123200/bbgp&
feature=2&elementId=btn_placement_2&
integrationType=popup&modalHeight=0.7">
</script>
shoe image
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
<script src="https://cdn.verto.ai/vertoViewer.js?upc=195719218133&feature=2&
elementId=btn_placement_3&
cartId=add_to_cart_btn&abtest=true&
integrationType=popup"></script>
shoe image

Popup_button integration - (The Easiest!)

Popup_button integration - Default
Default parameters (the button will create next to the script's location)
<script src="https://cdn.verto.ai/vertoViewer.js?upc=195719218133&feature=2&
integrationType=popup_button"></script>
Popup_button integration - Custom text
With custom text on the button - "Press Here to VertoSpin"
<script src="https://cdn.verto.ai/vertoViewer.js?upc=195719218133&feature=2&
integrationType=popup_button&
buttonText=Press Here To VertoSpin"></script>

Parameters

The following parameter will help you to define and customize your integration to VertoSpinTM.

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 VertoSpinTM
HTML Element in which to load the VertoSpinTM 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!

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

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.