How to use the VTO module in its native pop-up mode
Simple and quick
The native "pop-up integration" mode is provided to offer a simple and quick way to integrate the VTO module in a pop-up window, with minimal coding required.
The "pop-up integration" is configured very simply via an instantiation parameter (see API Reference > Instantiation Parameters > popupIntegration).
This option is intended for simple integrations and, in order to get the best user experience for your end-users, we recommend doing a complete integration adapted to your website and the user journey you want to offer to your customers.
Workflow
The VTO module works similarly in "pop-up integration" mode and in the normal mode (see How to integrate). The instantiation initializes the module and loads the required data (see Instantiate the VTO module). Then, a call to the `startVto` method will be the trigger to actually start the VTO experience, thus opening the camera feed.
Important note: We recommend instantiating the VTO module as soon as possible in the webpage lifecycle in order for the needed pre-processings to be done in the background.
Additionally, the VTO module should be instantiated only once in a scope and the same instance should be used for several consecutive VTO experiences.
The native pop-up integration displays a close button which will automatically stop the VTO module when clicked on by the end-user.
In the case of the "pop-up integration", the visibility of the HTML element is managed by the VTO module, thus displaying it when you call `startVto` and hiding it when the end-user clicks on the close button.
As for the normal mode, you can refer to the different callbacks to be notified and react to the changes of state of the VTO module (see API Reference > Instance callbacks).