An instance of this interface is provided in the window.onPictofitReady

So to start working with the PICTOFiT web components register the onPictofitReady callback on the window object.

For more information please see the PICTOFiT Webcomponents documentation

This example shows how to get an instance of this interface and how to use it in the main entry point of the with PICTOFiT web components, construct a VSC instance.

window.onPictofitReady = async (initialBuilder: IPictofitBuilder) => {
const vsc_builder = api
.forOrganisation("428ab0cd-3205-4674-a188-08d5b0355406") // Define the Customer-ID
.asVirtualStyling(); // Get a PICTOFiT Virtual Styling Component Builder

// vsc_api_promise becomes a Promise that resolves to a VirtualStylingApi
vsc_api_promise = vsc_builder
.build(); // Construct a PICTOFiT Virtual Styling Component

// We can use the PICTOFiT Virtual Styling Component Builder to load a collection
// from the central asset platform
// We load the collection based on its reference from our central asset platform
collection = await vsc_builder.getCollection(
collectionReference.reference,
collectionReference.organizationId
);

if(collection !== null) {
// We were successfull in loading the collection we want to show from the central asset platform
}
}

This example shows how to get an instance of this interface and how to use it in the main entry point of the with PICTOFiT web components, construct an MDRC instance.

window.onPictofitReady = async (initialBuilder: IPictofitBuilder) => {
const mdrc_builder = api
.forOrganisation("428ab0cd-3205-4674-a188-08d5b0355406") // Define the Customer-ID
.asModalDressingRoom(); // Get a MDRC Builder
}
interface IPictofitBuilder {
    asAvatarEditor(): AvatarEditorBuilder;
    asModalDressingRoom(): IDressingRoomBuilder;
    asVirtualStyling(): IVirtualStylingBuilder;
    forOrganisation(org: string): IPictofitBuilder;
}

Methods