Widget Attributes

In the widget overview, we explain how to use the widget on a product page through a custom HTML element. The attributes you provide during setup enable communication with Fitle’s APIs and help customize the user experience.

Custom Element Attributes

Below is a list of attributes you can use with the custom element. Required attributes are marked with an asterisk (*).

Note

HTML tag and attribute names are not case-sensitive. For example, fooBar works the same as foobar. We use camelCase for better readability.

availableSizes*

type: string (sizes separated by commas); required

This attribute lists the available sizes for the product. Customers should be able to select any of these sizes on the product page.

<fitle-size-recommender ...
    availableSizes="34,36,38,40" ...></fitle-size-recommender>

Effects

The available sizes should reflect what your product page offers. For instance, a user might receive a recommendation for size 42, but the widget will indicate that “42 is not available.”

---

braInputMandatory

type: boolean; default: false

This attribute makes the bra input field mandatory for women’s clothing.

<fitle-size-recommender ...
    braInputMandatory ...></fitle-size-recommender>

Caution

Remove the braInputMandatory attribute if you do not want the input to be mandatory and wish to allow users to proceed to the next screen.

---

buttonText

type: string

This attribute changes the default text of the button.

<fitle-size-recommender ...
    buttonText="Custom text" ...></fitle-size-recommender>

• Default
• Custom

---

clientId*

type: string; required

This is the client identifier provided by us. It allows us to recognize you in our database.

<fitle-size-recommender ...
    clientId="12345" ...></fitle-size-recommender>

---

shopCountry

type: string

This attribute sets the country of the shop. It will be used to segment data in the back-office dashboard. It’s expected to contain ISO 3166-1 alpha-2 plus a ww code if you need a “worldwide” aggregation.

<fitle-size-recommender ...
    shopCountry="fr" ...></fitle-size-recommender>

---

debug

type: boolean; default: false

This attribute is for developers during implementation. When set to true, it enables logging in the console for debugging purposes.

<fitle-size-recommender ...
    debug ...></fitle-size-recommender>

Caution

Remember to remove the debug attribute before going into production.

---

language

type: string; default: en (English)

This attribute sets the language for the widget. It can be automatically detected on your website; otherwise, it defaults to en (English).

<fitle-size-recommender ...
    language="fr" ...></fitle-size-recommender>

Available languages

You can use any of the following language codes:

Language	ISO Country code	ISO Language code
Chinese	cn	zh
Danish	da	da
German	de	de
English (UK)	uk	en
English (US)	us	us
Finnish	fi	fi
French	fr	fr
Italian	it	it
Japanese	jp	ja
Dutch	nl	nl
Norwegian	no	no
Portuguese	pt	pt
Spanish	es	es
Swedish	se	sv

---

logo

type: string

This attribute allows you to change the default appearance of the logo.

<fitle-size-recommender ...
    logo="s" ...></fitle-size-recommender>

• Default
• Small (value "s")
• Ruler (value "ruler")

---

productId*

type: string; required

This is the identifier for the product. It has to be the same provided with feeds and events.

<fitle-size-recommender ...
    productId="12345A" ...></fitle-size-recommender>

---

productImageUrl*

type: string; required

This is the URL for the product’s image, which is displayed in the recommendation process. Relative paths are not supported, so make sure to provide the full URL.

<fitle-size-recommender ...
    productImageUrl="https://example.com/tshirt.jpg" ...></fitle-size-recommender>

---

tooltipPosition

type: string

This attribute changes the default position of the tooltip if it is hidden due to the widget’s location.

<fitle-size-recommender ...
    tooltipPosition="left" ...></fitle-size-recommender>

• Default
• Left

---

Guides

• Widget Overview