Introduction

PICTOFiT Web Components provide simple to use Web Components to enrich websites with PICTOFiT Technology like:

Virtual Styling, Virtual Try-On
Try Before You Buy
Mix & Match Garments
Avatars & Personalized Mannequins
Size Recommendation & Fit Visualization

Here is a more detailed description of the possibilities that PICTOFiT provides: https://www.reactivereality.com/virtual-try-on

To integrate PICTOFiT into your websites, we offer pre-made Web Components for different use cases.

Virtual Styling: An explorative experience for the shopper. Used to present a capsule, wardrobe or collection. For each presented outfit one can specify dedicated models and scenes. The shopper can consume the experience like instagram stories but can dive into outfits and modify them interactively with mix&match.
Modal Dressing Room: Used like a classic virtual dressing room. Collect garments on product listing or details pages and create outfits in the dressing room. Visually check recommended size and fit.

Please note that we need to prepare your garments for PICTOFiT. This is a one time effort for each garment that should be available for Try-On. We only need a frontal image of the product. Please visit input specifications sections here.

Integration Basics

Import the PICTOFiT Web Components API as javascript module into your website by including the following code into your website:

HTML

<script type="module" src="https://cdn.pictofit.com/pictofit-web-components/v0.1.70/pictofit-api.mjs">
</script>

All javascript modules are strongly versioned in our CDN and all integrations can be pinned to a specific version, or follow the floating pointer called master.

A pinned integration for version v0.1.70 starts with the following pattern:
https://cdn.pictofit.com/pictofit-web-components/v0.1.70/...
A floating integration following all updates live starts with the following pattern:
https://cdn.pictofit.com/pictofit-web-components/master/...

To access the API once it is loaded register a callback handler, inside of which you can start using the API:

CODE

<script>
window.onPictofitReady = (api) => {
  // Start using api
  console.log(`PICTOFiT API ready ...`);
}
</script>

The API object that is received in this callback is an implementation of the PictofitBuilder interface.

API Reference

The reference for all public types for the PICTOFiT Web Components can be found here. This link is again versioned.

Example Repository

We provide an example repository on how to integrate the PICTOFiT Web Components into a website here.

Next Steps

Look into the details of a specific web component.

Virtual Styling

Modal Dressing Room