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 (*).
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>braInputMandatory
type: boolean; default: false
This attribute makes the bra input field mandatory for women’s clothing.
<fitle-size-recommender ... braInputMandatory ...></fitle-size-recommender>buttonText
type: string
This attribute changes the default text of the button.
<fitle-size-recommender ... buttonText="Custom text" ...></fitle-size-recommender>- Default
- Custom
channel
type: string; optional
This attribute specifies the commerce selling channel where the widget is being used. It can contain arbitrary values to identify different sales channels such as web, app, social media, etc. It should only be used if you need to segment data per-channel in the back-office dashboard.
<fitle-size-recommender ... channel="web" ...></fitle-size-recommender>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) format 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>language
type: string; optional; default: as configured in the back-office
This attribute sets the language for the widget. This is useful for multi-country or multi-language stores where you want to specify the widget language by country or store language.
<fitle-size-recommender ... language="fr" ...></fitle-size-recommender>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")
- None (value
"none")
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
