Embedded - Programmatically

To be able to customize as much as possible in the PICTOFiT Virtual Styling component one should perform a programmatic integration. In this case the pictofit-api module is embedded into the website and a handler for the PICTOFiT ready callback is registered on the window object.

To get started inject the following code into your website:

HTML

<html>
    <head></head>
    <body>
      ...
        <script async type="module" src="https://cdn.pictofit.com/pictofit-web-components/master/pictofit-api.mjs">
        </script>
        <script>
            window.onPictofitReady = (api) => {
                // Start using api
                console.log(`Pictofit Ready ...`);
            }
        </script>
      ...
    </body>
</html>

With the api object you can than make use of the different components.

CODE

window.onPictofitReady = (api) => {
    api
        .forOrganisation("428ab0cd-3205-4674-a188-08d5b0355406") // Define the Customer-ID
        .asVirtualStyling() // Get a PICTOFiT Virtual Styling Component Builder
        .build() // Construct a PICTOFiT Virtual Styling Component
        .then((virtualStylingApi) => {
            virtualStylingApi
            .show(            // Show the PICTOFiT Virtual Styling Component
              collection, // A Promise that resolved to a JSON Collection
              collectionReference, // A reference to the collection
              informationProvider, // optionally an information provider
                                   // this allows one to load name
                                   // price and garment details link based on 
                                   // the garment id during runtime
              sharedState,         // optional a state defining the a share result
              commerceProvider,    // optional an commerce provider to handle
                                   // add to cart functionality if needed
              options              // optional lets on configure if the PICTOFiT Virtual Styling Component
                                   // should be fullscreen and/or closeable
            )
            console.log(`Virtual Styling ready!`);
        });
}

The Virtual Styling Builder interface is returned, to be used for the construction of a Virtual Styling Component. For more technical details please consult the reference or our example repository.