Embedded - Data Properties

By including the following script into your website, PICTOFiT will automatically attach click handlers to marked html elements.

HTML

<script src="https://cdn.pictofit.com/pictofit-web-components/master/dev/dev-entry-point.mjs" type="module"></script>

When the script is loaded it will search for the html element with the data attribute data-pictofit-component. It will change the behaviour of this element by overwritting the click handler to open the specified component. You specify the component with the value of the attribute.

Here is an example to showcase this behaviour to open the same collection as in the standalone example.

HTML

<html>
    <head></head>
    <body>
        <div data-pictofit-component="virtual-styling" data-pictofit-collection="gid://pictofit/collection/demo/everyday-essentials-acc" data-pictofit-organisation="428ab0cd-3205-4674-a188-08d5b0355406" class="flex-item">
            Everyday essentials
          </div>
        <script src="https://cdn.pictofit.com/pictofit-web-components/master/dev/dev-entry-point.mjs" type="module"></script>
    </body>
</html>

The following data attributes allow you to set specific information like the customer id etc.is set by the data attribute. Here is a complete list of the supported data attributes:

data-pictofit-organisation: This attribute sets the customer id.
data-pictofit-component: This attribute selects the component that should be shown. Valid values are: modal-dressing-room and virtual-styling. This attribute is required and triggers the code injection.
data-pictofit-organisation: This attribute defines the customer ID that should be used and is required.
data-pictofit-collection : This attribute defines the collection identifier and is required if the component virtual-styling is used.
data-pictofit-active-class : This attributes defines a css class, that should be added to the html element when a click handler was successfully established. Defaults to is-pictofit-loaded.
data-pictofit-preload: If this attribute is the string true the pictofit api, will load in the necessary component files during the initialization as well, this will improve the initial load time of the Modal Dressing Room component and the PICTOFiT Virtual Styling component, but might load this data in unnecessarily.