Integration Guide

Overview

On this page, you will discover the integration process with our service.
The page will lead you through each required step .

For additional details and customization options, you can explore further integration parameters located at the bottom of the page.

Implementation

To implement our service, follow these steps:

For POC purposes* contact us to permit your website's domain in our system.
Insert our JS API script to your html (see next section).
Call our ‘loadVertoViewer’ api function with the asset and viewer details (see next section).

_{*For further usage after the POC you'll need to create a user and company profile, choose pyament plan and update your payment method.}

HTML

Insert our API script in your html (click to copy).

JS

1. Construct an integration query (minimal required parameters. for more parameters see below).

2. Load Verto asset using our API function (click to copy).

const integrationParemeters = {
feature: '2',
upc: '__insert_product_upc__',
elementId: '__Insert_your_element_id__'
};
window.VERTO_API_CONTENT.loadVertoViewer(
integrationParemeters
).then().catch();
‍
// Notice - element should have defined size

And viola! the 3D is loaded

Integration Type Examples

plain (best for desktop)

const integrationParemeters = {
        feature: '2',
        elementId: '3d_example_1',
        upc: '196565192110',
        integrationType: 'plain'
};

hybrid (best for mobile)

const integrationParemeters = {
        feature: '2',
        elementId: '3d_example_2',
        upc: '7630040562812',
        integrationType: 'hybrid'
};

popup (best for gallery)

const integrationParemeters = {
        feature: '2',
        elementId: '3d_example_3',
        upc: '7890767449135',
        integrationType: 'popup'
};

Click here to open 3D model
(this can be any html element)

popup_button

const integrationParemeters = {
        feature: '2',
        elementId: '3d_example_4',
        upc: '700512976618',
        integrationType: 'popup_button',
        buttonClass: 'example_4_button_class',
        buttonText: 'Click Me !'
‍};

Integration Parameters

Mandatory

Parameter Name

Description

Default

Constraints

feature

Verto feature type to load. Currently supporting 3D assets (feature number '2').

'2' (3D model)

upc, brandName, sku

In order to identify which product you want to load we need either upc, or brand name and sku.
_{* brandName is provided in}_{snake_case}_{* '.', ',' spaces are replaced with '_'
* '&' is replaced with '_n_'}

upc is mandatory if you don't send brandName and sku.
and the opposite

elementId

HTML element in which to load the product into.
_{* the element must have a proper size in the DOM}

Optional

Parameter Name

Description

Default

Constraints

integrationType

how to integrate the viewer in the page: options:
'plain', 'hybrid', 'popup', 'popup_button'.
_{* Shown in the examples above}

plain

abtest

Determines if users will participate in an A/B test. use '1' or 'true' to enable abtest
_{* You will also need to cantact us to determine the A/B test percentage}

false

cartId

Id for HTML element of the add to cart button. will let you see insight about how many time users clicked the add to button with and without our service.
_{* Used with our abtest parameter}

buttonClass

Class name that will be added to the button when choosing 'popup_button' integration.
_{* You should imlement your class.}

Affects only popup_button integration

buttonText

Text to show in button when using 'popup_button'

"View In 3d"

Affects only popup_button integration

modalWidth

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

'1' (100%)

No effect on 'plain' integration

modalHeight

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

'1' (100%)

No effect on 'plain' integration

modalBackdrop

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

0.8

No effect on 'plain' integration

modalBackgroundColor

background color for the modal when it's open.
_{* Any valid css color. such as:
-white, black, blue, red
-#ff99ff, #330033 (including the symbol '#')
-rgb(153,255,255), rgba(255,255,102, 0.75)}

white

No effect on 'plain' integration. (in plain integration the background is tansparent - so your element color will be the background color)

viewerDisabledCallback

callback funciton name. (In case of an issue with given params/other issues).
_{* You should imlement a funciton to handle what happens in case of an error - we will call your function}

Will affect all type of integrations

inputSensitivity

float number which determines the model movement sensitivity (zoom in, zoom out, rotate speed, etc.).

0.5

Will affect all type of integrations._‍

startingAngle

An integer representing the starting angle of the 3d asset after loading the model.
As we position 3d assets front face looking right, the angle change will take place on the left side of the model.
_{* Avaliable values: 0, 10, 21, 32
if other value provided the closest angle will be chosen}

Will affect all type of integrations._‍

promptType

the interaction prompt after model is loaded.
_{'gesture' - will add a hand gif interacting with the model and moving it in a predefined path.
'basic' - will use basic svg small hand gesture right and left
'none' - will remove interaction prompt}

basic

effects only 'plain' integration and element in the modal after modal is open in other integration type.

viewerRatio

String value to specify the aspect ratio of the viewer (width value must be initiated for the element in the page)
values: '1x1', '16x9', ... any numbers will do

effects only 'plain' integration and element in the modal after modal is open in other integration type.

Integration Guide

Overview

Implementation

HTML

JS

Integration Type Examples

plain (best for desktop)

hybrid (best for mobile)

popup (best for gallery)

popup_button

Integration Parameters

Mandatory

Optional

Demo video

Pages

Stay Connected