Integrate the VTO Footwear
1. Integrate the library
First you need to add this script tag to your HTML:
<script src="https://vto-shoes-integration-api.fittingbox.com/index.js"></script>
2. Instantiate the module
Create the module with the factory:
const vtoShoes = createVtoShoes('#vtoShoes', { apiKey: 'your-api-key' });
|
Parameter |
Type |
Description |
|---|---|---|
|
|
string |
DOM selector for the viewer container |
|
|
string |
Your API key provided by vtoShoe |
|
|
string |
Suffix added to the url used for the qrCode |
3. Manage the module
a) Start the module
Call the start method when you want to start the VTO experience for your user.
start(mode: 'tryon' | 'viewer') : void
This method starts or switches between try-on (AR) mode and 3D viewer mode.
// Example, when the user clicks the CTA
vtoShoes.start('tryon');
b) Change the current shoe
Call the load method to load a new shoe or change the current shoe displayed in the VTO experience.
load(model: string)
This method loads a shoe model in the product.
// Example
vtoShoes.load('myNike123');
Best practices
-
Use HTTPS to allow camera access in try-on mode.
-
Make sure the container (
#vtoShoes) is visible in the DOM before callingload().
Example
To see a full demo of the VTO shoes integration, check out this