# Initial page On this page, you’ll find detailed information about how to implement **Sizebay services**.\ The documentation is divided into four main sections: **Size & Fit Implementation**\ This section explains how to implement the **Virtual Fitting Room** directly on your product page.\ You’ll find all configuration options and technical details here. **Size & Fit Data Integration**\ This section covers the **data requirements** for running the Size & Fit service and analytics properly.\ It explains what data we need and the different ways you can send it to us. **Size & Fit Order Tracking**\ This section describes how to **track orders** from your e-commerce platform and send them to Sizebay.\ Tracking order data is essential to evaluate the Size & Fit performance and continuously improve size recommendations. **Fashion Hub**\ This section introduces the **Fashion Hub**, our suite of AI-powered products, and the available implementation options. **Virtual Try-On**\ This section introduces the **Virtual Try-On**, an augmented reality-powered fitting room that lets shoppers see how a garment looks on their own body before buying # Introduction The version 4.0 of the Virtual Fitting Room comes with a series of improvements. The most important of them, of course, is its easy implementation and its customization capacity - providing Sizebay's customer with an experience with the plugin much closer to the visual identity of their e-commerce. The purpose of this documentation is to explain, in a simple way, the steps to implement the VFR 4.0 in your e-commerce. We have 5 methods to implement our services, they are: {% content-ref url="/pages/-LzIpV6g1qaFbNomjV7n" %} [Service Implementation (Script)](/size-and-fit-implementation/service-implementation-script) {% endcontent-ref %} {% content-ref url="/pages/-MLP7fgjh6fDIC0KUtyR" %} [Implementation via Tag Manager](/size-and-fit-implementation/implementation-via-tag-manager) {% endcontent-ref %} {% content-ref url="/pages/-LzJEI5ZUGA\_NP9Gwnd2" %} [Service Implementation (API)](/size-and-fit-implementation/service-implementation-api) {% endcontent-ref %} {% content-ref url="/pages/-MLP7jLP\_8MEiu-Shpzr" %} [Service Implementation (VTEX IO)](/size-and-fit-implementation/service-implementation-vtex-io) {% endcontent-ref %} {% content-ref url="/pages/eWAcFLmnhFIKmgilLmTB" %} [Service Implementation (Shopify)](/size-and-fit-implementation/service-implementation-shopify) {% endcontent-ref %} # Service Implementation (Script) {% hint style="danger" %} **DO NOT MODIFY THE PRESCRIPT AND ITS CONTENTS.** It's also advised to **NOT CREATE AN IMPLEMENTATION WITHOUT SIZEBAY'S CONSENT. Both scenarios are considered by Sizebay as extraofficial and WE WILL NOT TAKE RESPONSABILITY FOR SUCH.** If there's a necessity to alter our script or anything that might be not working properly, please contact our support team at . {% endhint %} ### 1. Create an anchor element on your product page. You must include the container element that will display the button for the VFR and the measurement chart on your product detailed page. You should place the element in the position **where you want the buttons to be displayed**. The excerpt below is an example of how this container could be included. Note the id attribute that was defined in it: your button must contain a valid id attribute. **This id will be used later when we are running the plugin's script.** ```html
``` ### 2. Including Sizebay HTML script We will now import the plugin script into your HTML. This snippet can be included in the header (**\**) or at the end of the HTML body (before **\**). Be in mind that in order to properly inject the plugin script, **Sizebay will provide you with all the required info** (e.g tenantId, the URL paths, etc). {% hint style="danger" %} The code below is an **example and should not be injected into your website**, as it serves only for **instructional reasons**. In order to get the correct URL, contact **** so we can guide you through the process. {% endhint %} ```html ``` # Implementation via Tag Manager {% hint style="danger" %} **DO NOT MODIFY THE PRESCRIPT AND ITS CONTENTS.** It's also advised to **NOT CREATE AN IMPLEMENTATION WITHOUT SIZEBAY'S CONSENT. Both scenarios are considered by Sizebay as extraofficial and WE WILL NOT TAKE RESPONSABILITY FOR SUCH.** If there's a necessity to alter our script or anything that might be not working properly, please contact our support team at . {% endhint %} ### 1. Create a anchor element on your product page. You must include the container element that will display the button for the VFR and the measurement chart on your product detailed page. You should place the element in the position **where you want the buttons to be displayed**. The excerpt below is an example of how this container could be included. Note the id attribute that was defined in it: your button must contain a valid id attribute. **This id will be used later when we are running the plugin's script.** ```markup
``` ### 2. Including the Sizebay HTML script Now on your Tag Manager create a new Custom HTML tag, and place the snippet below.\ This script must be triggered only in **product pages**. ```markup ``` {% hint style="info" %} The link of your script should be provided by our **Support Team ().** {% endhint %} # Service Implementation (API) Guidelines for the implementation of Sizebay's VFR and SizeCharts via API ![Flowchart](/files/wAw3X1WDqZrEqRtxr9c8) To display the buttons and access the VFR experience from a product page, it is necessary to first [identify the user](/size-and-fit-implementation/service-implementation-api#1-identifying-the-sizebay-user-sizebay-session-id) and [get the product information](/size-and-fit-implementation/service-implementation-api#2-getting-the-products-information): ### Starter Guide {% hint style="danger" %} Sizebay strongly recommends integrating the Virtual Fitting Room asynchronously, using non-blocking loading.
Blocking implementations may impact performance metrics, delay PDP rendering, and cause page freezes under latency conditions.\ \ The asynchronous approach ensures the page remains functional even during temporary service unavailability and aligns with best practices for third-party integrations. {% endhint %} {% hint style="warning" %} **ATTENTION:** The asterisk (`*`) symbol, when placed next to a field or item in forms or documentation, typically denotes that the information is mandatory or required. {% endhint %} {% hint style="warning" %} **ATTENTION:** Sending the country value is only mandatory if you want to segregate the data by country. If there is no need to segregate by country, you can proceed without providing this information. {% endhint %} We have created a Demo Application that you can use as a start guide. \ You can find this on our Github account. -> ### 1. Identifying the Sizebay User (Sizebay Session ID) The Sizebay Session ID (SID) is used by our services to identify a user. This ID must be stored in the cookies to be consulted in the application. The first step to start the service is to check if a cookie called `SIZEBAY_SESSION_ID_V4` key exists. * **If it exists**, simply use the hash returned for consultation while using the application.
* **If not**, [get a SID](/size-and-fit-implementation/service-implementation-api#session-id) using the route bellow and save this hash in your browser's cookies with the **SIZEBAY\_SESSION\_ID\_V4 key**. ## Session-id `GET` `https://vfr-v3-production.sizebay.technology/api/me/session-id` Creates a new user or returns the existing one {% tabs %} {% tab title="200 This is the session id hash." %} ``` "16006C10A517168a7bc37538415fa3b49b80f4573be8" ``` {% endtab %} {% endtabs %} {% hint style="info" %} If the hash already exists in cookies, it is not necessary to request a new one. This route should only be used for creation. {% endhint %} ### **2.** Getting the product's information Before displaying the buttons it is necessary to check if the product exists in our database using one of the routes below. {% hint style="warning" %} **ATTENTION:** Make sure to only use **ONE** of the methods described below, since they differ in context. {% endhint %} {% hint style="warning" %} **ATTENTION:** Sending the country value is only mandatory if you want to segregate the data by country. If there is no need to segregate by country, you can proceed without providing this information. {% endhint %} #### In order to do that, there are two possible methods: {% tabs %} {% tab title="First method: Permalink" %} `GET` `https://vfr-v3-production.sizebay.technology/plugin/my-product-id?sid=*&permalink=*` #### Headers Parameters
NameDescription
x-szb-countryCountry running plugin (ex: BR, US, MX, DE)
x-szb-device*

User device

Possible values: DESKTOP, MOBILE, TABLET, APP

x-szb-tenant-id*Store ID
#### Query Parameters | Name | Type | Description | | ------------------------------------------- | ------ | ------------------- | | permalink\* | string | Product permalink | | sid\* | string | User identification | | {% endtab %} | | | {% tab title="Second Method: SKU" %} `GET` `https://vfr-v3-production.sizebay.technology/plugin/feed-product-id?sid=*&tenant-id=*&product-id=*` #### Header Parameters
NameDescription
x-szb-countryCountry running plugin (ex: BR, US, MX, DE)
x-szb-device*

User device

Possible values: DESKTOP, MOBILE, TABLET, APP

x-szb-tenant-id*Store ID
#### Query Parameters | Name | Type | Description | | -------------------------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------- | | product-id\* | string | Product SKU. Read more about that in | | sid\* | string | Sizebay Session ID | | tenant-id\* | string | Your store ID | | {% endtab %} | | | | {% endtabs %} | | | #### Both can return three possible responses: {% tabs %} {% tab title="Product Exists (200) ✅" %} ``` { "id": "5286077", // product id "accessory": false, // if the product is an accessory "shoe": false // if the product is a shoe } ``` {% endtab %} {% tab title="Product does NOT Exist (404) ❌" %} ``` "Not product found for *product-id* " ``` {% endtab %} {% tab title="Server Error (500) ❌" %} This usually happens when the data provided is using an invalid format. It can either return an empty response, a BFF response (e.g: "500 for URL ...]"), or, in corner cases, a \`NullPointerException\`. In any of those cases, make sure to contact our support team to assist on whatever is necessary. {% endtab %} {% endtabs %} {% hint style="danger" %} Notice that every and each call to the above GET method for the product's information API is contabilized for statistical and billing purposes, and counts as one hit per success status response - 200 OK {% endhint %} ### 3. Showing the Sizebay buttons The Sizebay buttons (Virtual Fitting Room and SizeCharts) must be executed or not considering the product information, as shown below: | Message | Action | | ---------------------------------------- | ------------------------------------------ | | 404 with "Not product found for \[....]" | Don't show any button | | 200 with "accessory": false" | Show the **VFR** and **SizeChart** buttons | | 200 with "accessory": true" | Show only the **SizeChart** button | ### 4. Opening the Virtual Fitting Room (VFR) and Size Chart via iFrame To embed the Virtual Fitting Room (VFR) or the Size Chart into your product pages, use the appropriate iFrame URL based on the **type of product** (shoes or non-shoes). #### iFrame URLs by Use Cases
Use CaseiFrame URL
VFR – Non-shoe productshttps://vfr-v3-production.sizebay.technology/V4/?mode=vfr&id=*&sid=*&tenantId=*&watchOpeningEvents=true&lang=*&device=*
VFR – Shoe productshttps://new-shoe-experience.sizebay.technology/?mode=vfr&id=*&sid=*&tenantId=*&watchOpeningEvents=true&lang=*&brandsComparison=*&device=*
Size Charthttps://measurements-table.sizebay.technology/?id=*&sid=*&tenantId=*&watchOpeningEvents=true&lang=*&device=*
#### Query Parameters | | | | | ---------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------- | | Name | Type | Description | | mode\* | string | Defines whether the measurement chart ("`chart`") or the virtual fitting room ("`vfr`") will be displayed | | id\* | string | Sizebay's Product ID | | sid\* | string | Sizebay Session ID | | tenantId\* | string | Store ID | | lang\* | string | Main language of the service (ex: `br`, `en`, `es`, `de`) | | watchOpeningEvents\* | boolean | Parameter that enable the events for plugin-opened and table-opened (should be `true`) | | brandsComparison\* | boolean | For shoes: enables recommendation based on brand comparisons | | [sizesInStock](#sizes-in-stock) | string | Product sizes in stock (available) ex: `"S","M","L","XL"` | | [countryValue](#country) | string | Country running plugin (ex: BR, US, MX, DE) | | device\* | string |

User device

Possible values: DESKTOP, MOBILE, TABLET, APP

| {% hint style="warning" %} **ATTENTION:** Sending the country value is only mandatory if you want to segregate the data by country. If there is no need to segregate by country, you can proceed without providing this information. {% endhint %} {% hint style="warning" %} The parameter **`watchOpeningEvents`** is **mandatory** for API implantations. Without, we won't be collecting all the events available. {% endhint %} {% hint style="info" %} Check more custom param's on [#id-7.-utilities-and-tweaks](#id-7.-utilities-and-tweaks "mention") {% endhint %} ### **5. Recommendation on the PDP** The recommendation on the page uses the *recommendedSize* and profileName property to display the recommended size for the active profile. If there is no recommendation, the recommended size will be null. In the web version, we generate an element that is built around these two values. ## Recommendation on page {% hint style="warning" %} **ATTENTION:** Sending the country value is only mandatory if you want to segregate the data by country. If there is no need to segregate by country, you can proceed without providing this information. {% endhint %} `GET` `https://vfr-v3-production.sizebay.technology/api/me/analysis/5286077?sid=*&tenant=*` #### Header Parameters | Name | Description | | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- | | [x-szb-country](#country) | Country running plugin (ex: BR, US, MX, DE) | | [x-szb-device](#id-5.1-adding-the-device-through-the-recommendation-event)\* |

User device

Possible values: DESKTOP, MOBILE, TABLET, APP

| | x-szb-tenant-id\* | Store ID | #### Path Parameters | Name | Type | Description | | ---------------------------------- | ------- | --------------------------------------------- | | \* | integer | Product Identification (Sizebay's Product ID) | #### Query Parameters | Name | Type | Description | | ---------------------------------------- | ------ | ------------------- | | sid\* | string | User identification | | tenant\* | string | Store ID | {% tabs %} {% tab title="200 Recommendation found" %} ``` { "analysisResponse": null, // analysis information "productInfo": null, // product information "recommendedSize": "M", // recommended size "productGender": "F", // profile gender "profileName": "Você" // profile name } ``` {% endtab %} {% endtabs %} ### **5.1 Adding the device through the recommendation event** In order for Sizebay to understand where the recommendation event is coming from, it's important to have the property \`device\` passed through the request headers. This also helps consistency on the user flow, where we'll be able to identify the user through its device. **Passing the device on your request is very straightforward**. #### Add \`x-szb-device\` within the request headers (with logic included!) ```javascript function isMobile() { const toMatch = [/Android/i, /webOS/i, /iPhone/i, /iPad/i, /iPod/i, /BlackBerry/i, /Windows Phone/i] return toMatch.some((toMatchItem) => navigator.userAgent.match(toMatchItem)) } function isTablet() { const toMatch = [/iPad/i, /Tablet/i] return toMatch.some((toMatchItem) => navigator.userAgent.match(toMatchItem)) } function isWebView() { return window.navigator.standalone === true } /** This function returns the current device from the Window object. **/ function getCurrentDevice() { if (isMobile() && !isWebView()) return 'mobile' if (isWebView()) return 'app' if (isTablet()) return 'tablet' return 'desktop' } const request = await fetch(SIZEBAY_RECOMMENDATION_URL, { headers: { // rest of your headers 'x-szb-device': getCurrentDevice(), } }) ``` ### **6.** Initializing the VFR (via WebView) The integration process is very similar to the iframe, seen previously. WebView should load the URLs seen in "[Opening the VFR & SizeChart](/size-and-fit-implementation/service-implementation-api#vfr-or-sizechat-experience)" and "SizeCharts" respectively. **The process for instantiating a WebView in your application is quite simple.** #### Declare a Tag WebView ```java ``` #### Pass the URL for loading the content ```java WebView virtualFittingView = (WebView) findViewById(R.id.webview); virtualFittingView.loadUrl(URL_VFR_permalink); ``` {% hint style="info" %} Replace the URL\_VFR\_permalink for the appropriate permalink. {% endhint %} ### **7.** Utilities and Tweaks #### Custom product image If you wish to explicitly define which product image to be rendered by the VFR, you can pass to **our** URL the query param `pageProductImg=www.your-store.com/product-image-url.png`. #### Custom product sizes If you wish to explicitly define which sizes are available to be rendered by the VFR, you must add to our iFrame/WebView URL the query param: ``` sizes=BASE64_ENCODED_LIST ``` Where `BASE64_ENCODED_LIST` is a Base64-encoded string of your size list, separated by commas.\ For example, if your sizes are: ``` 36,38,40,42 ``` You must first encode them in Base64, resulting in: ``` WyIzNiIsIjM4IiwiNDAiLCI0MiJd ``` And then pass it as: ``` ...&sizes=WyIzNiIsIjM4IiwiNDAiLCI0MiJd ``` #### Sizes in Stock This parameter monitor stock shortage and are used in analytics and reports.\ Add to **our** iFrame/WebView URL the query param `sizesInStock=YOUR,SIZE,LIST,HERE` . Where each item represents a size, separated by a comma. Sizes that are out of stock **must not be added**. #### **Country** This parameter informs which country the plugin is being used in. With this information we are able to create more complete reports. To find out which values ​​are accepted, [click here](/size-and-fit-order-tracking/supported-countries-and-currencies). #### DIY Close Modal If you're looking to have **more control** over the closing modal element and its triggers, you can pass to **our** URL the query param `disableCloseApp=true` {% hint style="info" %} By disabling the close app triggers, you'll have to control the modal closing event by yourself, whilst also providing its proper stylings and layout. You can always talk to us at **** for more info or assistance about it. {% endhint %} # Service Implementation (VTEX IO) We have an app made for Vtex IO. To install the app follow the documentation on Vtex docs here: # Service Implementation (Shopify) This page provides an overview of the necessary steps to implement the Sizebay tool on Shopify. **1. Product API Integration** To allow Sizebay to access your product catalog and integrate the items into our database, please follow this [tutorial](https://static.sizebay.technology/shopify_products_v2.pdf) and share the requested token with us. {% hint style="info" %} If your store offers products across multiple genders, age groups, or uses different size charts, it’s essential for Sizebay to accurately identify these variations to ensure each item is matched with the correct size chart. Please refer to this [documentation](https://docs.sizebay.com/size-and-fit-data-integration/product-integration-shopify) to better understand how we read your Shopify catalog, as well as any additional information we may request from you. {% endhint %} **2. Order Tracking** To enable Sizebay to generate dashboards and track metrics, you need to install our order tracking module available on Shopify. You can install our app by accessing this [link](https://apps.shopify.com/sizebay) and check all the information on how to configure it by accessing this [page](https://docs.sizebay.com/shopping-tracker/platforms/shopify).
**3. Script Integration** To activate the virtual fitting room and size chart features on your product pages, you'll need to add our script to the head section of your pages. Please check this [tutorial](http://static.sizebay.technology/shopify_script.pdf) to understand how to do so. # Product API Integration (Shopify) This page provides an overview of how product integration via API works on Shopify, highlighting key concepts and important points to consider. ### Requirements Create a Shopify app and share the generated token and client\_id with the Sizebay team. All product reads are performed via the Shopify API using those credentials. ### Fields Summary
FieldSizebay KeyShopify SourceNotes
Product Namenametitle—
Gendergendername / tagsCustom mapping rule
Permalinkpermalinkdomain/idUses Shopify product ID
Product Imageimageimages[0]Primary image
Product IDfeedProductIdidNative Shopify numeric ID
Brand NamebrandNamevendor—
CategorycategoryNameproduct_typeMust be mapped to Sizebay categories
Sizessizesoption 1/2/3Position configured during onboarding
Age GroupageGroupname / tagsCustom mapping rule
### Field Notes 1. **Gender** No native field in Shopify. Defaults to unisex. Inform the Sizebay team of your strategy: * Product name keywords (e.g., "Women's" → Female) * Shopify tags — most reliable approach
2. **Category** Read from product\_type. Must be mapped to a Sizebay category:
Sizebay CategoryCommon Store Examples
TopT-shirts, shirts, jackets, blouses, sweaters, hoodies
BottomPants, shorts, skirts, leggings
Full BodyDresses, jumpsuits, overalls, rompers
Top UnderwearBras, bralettes, crop tops (underwear)
Bottom UnderwearBriefs, boxers, panties, thongs
ShoeSneakers, boots, sandals, heels, flats
{% hint style="warning" %} Correct mapping directly impacts automated size chart coverage. {% endhint %} 3. **Sizes** Read from option1, option2, or option3. The option position is configured once and applied globally. {% hint style="warning" %} Size must be in the same option position across your entire catalog. Standardize before onboarding. {% endhint %} 4. **Age Group** No native field in Shopify. Defaults to adult. If your store sells children's products, inform the Sizebay team: * Product name keywords (e.g., "Kids", "Junior") * Shopify tags {% hint style="info" %} Questions? Contact your onboarding manager — we’re happy to help. {% endhint %} # Checking the Installation Once we followed the steps described above (either via direct page deployment or via Google Tag Manager) it is time to check if everything went as expected. The process is really simple. Just enter a product page, one which the VFR should be displayed, open the Console in the Development Tools of your browser (this name may vary from browser to browser). ![](/files/-LzmEwZDMo3ujK2LLY1Z) {% hint style="info" %} If there is still no product integrated on our platform, a 404 error message will be displayed, but do not worry, it is an internal message that the product was not found in our database. {% endhint %} # Custom Implantation Events {% hint style="warning" %} This is a *very* *technical* guide. If you don't have enough experience to proceed, please contact our team at **** so we can properly assist you. {% endhint %} ## Introduction {% hint style="info" %} This feature only works with **Virtual Fitting Room 4**. If you're still using our legacy version, you can request a migration process with our team at **** or by opening a **support ticket**. {% endhint %} In order to extend our service customization, we added a few events that might boost your experience even further. ## Available events This **table of events** aims to describe how each event works and what it returns from the callback payload. You can also find their **usage** in the next section below. | Event | What it does | What it returns | | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | | `onRecommendation` | Returns the recommendation object. It can be used to mount **your** own element with **our** data. | `{ "productGender": "M", "profileName": "Bob", "recommendedSize": "XL" }` | | `onAddToCart` | Returns the Virtual Fitting Room **cart** payload through the callback, which can be used to trigger a shopping cart event from your website. | `{ "size": "XL", "quantity": 1 }` | | `onProductFound` | It can be used to verify whether the product has been identified by Sizebay, thus rendering the Virtual Fitting Room. | `{"accessory":false,"clothesType":"BOTTOM","id":"5143424","shoe":false}` | | `onProductNotFound` | It can be used to override our built-in "product-not-found" event, while also omitting any console outputs from our end. You may also use it as a route to manipulate any element from your website. | *No payload from the callback.* | ## Usage The `Implantation` function accepts a second argument, which is an object called `events`. Let's take a look at the prescript below to understand how each event can be configured. ```javascript // your-store_prescript.js const prescript = { /* Omitted for brevity */ }; const events = { onRecommendation: (recObject) => { let myRecommendationEl = document.createElement("div"); const myRecomendationSelector = "my-cool-class"; const myRecommendationTemplate = `Hi there! I'm recommending ${recObject.recommendedSize} to ${recObject.profileName} :)`; myRecommendationEl.className = myRecommendationSelector; myRecommendationEl.innerHTML = myRecommendationTemplate; document.body.appendChild(myRecommendationEl); }, onAddToCart: (cartPayload) => { myStore.addProductToCart({ quant: cartPayload.quantity, size: cartPayload.size, }); }, onProductFound: (product) => { console.log("Found a product!", product) }, onProductNotFound: () => { console.log( "Hello, Sirrah! alas, the product is yet to be found. what a pity! but at least that throwing error is not around anymore." ); }, }; // Executing Sizebay services window.Sizebay.Implantation(prescript, events); ``` # Configuration Profiles This page will guide you how to configure specific profiles (or aliases) through the Virtual Fitting Room. ## Getting Started Halloween is nearby. For the sake of this guide, let's add a commemorative theme on the VFR for it, shall we? First, let's see how our **configuration file** looks like: ```javascript { "general": { "theme": { "name": "sizebayStore", "logo": "" }, "is3dFeel": true, "language": ["br", "en"], "enableSkinTones": true, "customLanguage": false, "isMetric": false, "ageSwitcher": false, "sizeTailor": true, "measurementSwitcher": true }, "events": { "onAddToCart": true }, "optionalSteps": { "BodyAdjustment": true, "Calculating": true, "FootFormat": true } } ``` Well, that's a pretty simple one, right? It's not even using a custom theme at the moment. This will change soon. ## Integrating a customized profile ### Configuration File (config\_v4.json) Customized profiles work as an *override* for every main property of the config file. So, for every key and value configured within a profile, it'll **replace** the original one from the **base** object. You can also create as many as you want, as you'll be defining which one should be used during the URL mounting (if you're using the standalone approach) Let's add our Halloween theme: ```javascript { "general": { "theme": { "name": "sizebayStore", "logo": "" }, "is3dFeel": true, "language": ["br", "en"], "enableSkinTones": true, "customLanguage": false, "isMetric": false, "ageSwitcher": false, "sizeTailor": true, "measurementSwitcher": true }, "events": { "onAddToCart": true }, "optionalSteps": { "BodyAdjustment": true, "Calculating": true, "FootFormat": true } "profiles": { "halloween_mode": { "general": { "theme": { "css": "https://static.sizebay.technology/1039/halloween_theme.css" } } } }, } ``` Done! Next time the VFR gets to interpret the config file, it'll consider the profile `halloween_mode` which overrides the path `general.theme.css` from the base object. ### Standalone implantation (optional) {% hint style="warning" %} This section is only needed for customers that handle the implantation methods **manually** like, say, a **mobile app** integration. Otherwise, don't worry about it. Sizebay will already add your `configProfile`. Either way, proceed carefully! {% endhint %} Now, after you successfully added the configuration profile, let's inform it through the **VFR URL**. This is done so our inner services can parse and detect which profile should be considered to be looked upon. Your URL probably follows this template: ``` https://vfr-v3-production.sizebay.technology/V4/?mode=vfr&id=PRODUCT_ID&sid=YOUR_SID&lang=YOUR_LANG&tenantId=YOUR_TENANT_ID ``` Adding the profile is a simple append, using the key `configProfile`. In JavaScript, that's how we'd do: ```javascript if (hasHalloweenMode) { customModalFromCustomer.src += '&configProfile=halloween_mode' } ``` This would turn your URL into: ``` https://vfr-v3-production.sizebay.technology/V4/?mode=vfr&id=PRODUCT_ID&sid=YOUR_SID&lang=YOUR_LANG&tenantId=YOUR_TENANT_ID&configProfile=halloween_mode ``` Great job! Everything should be looking Halloween-ish by now. ![Palette-d simplified example for Halloween](/files/-Mksf0cTu20E1ZlIJWOZ) # Understanding Responsivity In this topic, we're going to dive in regarding how respositivity works on the Virtual Fitting Room. ### **Overview** The Virtual Fitting Room is designed to provide a seamless and responsive experience across a variety of mobile viewports available on the market. Responsivity is a crucial aspect to ensure users have an optimal and consistent experience regardless of the device they are using. ### **Mobile Viewports** Our layout has been optimized to function effectively on a wide range of mobile devices, including smartphones and tablets (albeit in landscape mode only). This includes but is not limited to devices with various screen sizes, resolutions, and aspect ratios. **List of supported smartphones (2023)** We designed the VFR to cater to a variety of smartphones available on the market. The application incorporates viewport media query rules to ensure optimal responsiveness. Here is a sample list of smartphones considered during the development and testing phases: 1. **Apple iPhone Series:** * iPhone 13 Pro Max * iPhone 13 Pro * iPhone 13 * iPhone 13 mini * iPhone 12 Pro Max * iPhone 12 Pro * iPhone 12 * iPhone 12 mini *older series are not listed but can work if the client's browser matches the Can I Use* [*guideline*](https://caniuse.com/flexbox) 2. **Samsung Galaxy Series:** * Galaxy S21 Ultra * Galaxy S21+ * Galaxy S21 * Galaxy S20 Ultra * Galaxy S20+ * Galaxy S20 *older series are not listed but can work if the client's browser matches the Can I Use* [*guideline*](https://caniuse.com/flexbox) 3. **Google Pixel Series:** * Pixel 6 Pro * Pixel 6 * Pixel 5a * Pixel 5 4. **OnePlus Series:** * OnePlus 9 Pro * OnePlus 9 * OnePlus 8T * OnePlus 8 Pro * OnePlus 8 *older series are not listed but can work if the client's browser matches the Can I Use* [*guideline*](https://caniuse.com/flexbox) 5. **Xiaomi Series:** * Xiaomi Mi 11 Ultra * Xiaomi Mi 11 * Xiaomi Mi 10 Pro * Xiaomi Mi 10 *older series are not listed but can work if the client's browser matches the Can I Use* [*guideline*](https://caniuse.com/flexbox) Please note that this list is not exhaustive, and our development and testing processes take into account the evolving landscape of smartphones. Users with devices not listed here are still encouraged to use the Virtual Fitting Room. ### **Responsivity Features** **Adaptive Layouts:** We dynamically adjust the layout to accommodate different screen sizes. This ensures that users can interact with the application comfortably on devices with both smaller and larger screens. **Resolution Independence:** Our design system was made to be resolution-independent, meaning the Virtual Fitting Room adapts its visual elements to maintain clarity and functionality regardless of the device's display resolution. ### **Corner Cases and Adjustments** Despite our thorough testing and optimization for various mobile viewports, corner cases may arise due to the ever-evolving landscape of mobile devices. Make sure to let us know about it so adjustments can be made. #### **Guidelines for testing viewport responsivity:** While the Virtual Fitting Room is optimized for various mobile viewports, it's essential to follow certain guidelines when testing responsivity to maintain a reliable and consistent experience. #### **Avoid Unconventional Adjustments** We advise **against** randomly adjusting a device's screen into unusual aspect ratios or orientations during testing. Such unconventional adjustments may not accurately represent the typical user experience and could lead to unexpected behavior. ### Reporting issues We're always ready to make the VFR better. Make sure to contact us through the following channels: * **Support:** * **Technology Team:** * **Luiz Nickel (Head of Technology)**: * **Inara Figueiredo (Head of Product)**: # Product Integration (XML Feed) This document provides guidelines for structuring your store's Product Feed (XML) to be integrated with Sizebay services. 1. **Requirements** To ensure a successful integration, your XML file must adhere to the **Google Shopping standard** (RSS 2.0 or Atom 1.0) and utilize the [Google namespace for the product attributes](https://support.google.com/merchants/answer/160589?hl=en), following the tag specifications below. {% hint style="info" %} For the `g:product_type` field, it’s essential to provide values that allow our system to accurately match products with the correct size charts. We strongly recommend using one of the following standardized values: * **Top** * **Bottom** * **Full Body** * **Top Underwear** * **Bottom Underwear** * **Shoe** We understand that adjusting this field in your feed may not always be simple. However, please note that sending non-standardized values increases the effort required from our team and may delay the integration process or lead to incorrect chart associations. If you have any questions or need guidance on how to structure this field properly, please don’t hesitate to reach out to us. {% endhint %} 2. **XML Tags & Descriptions** | **Tag** | **Description** | **Format** | | ---------------------------- | ---------------------------------------------------------------------------------------------- | ---------- | | `` | Parent Product ID (Unique identifier for the product, not for individual size/color variants). | Text | | `` | Product Title | Text | | `<g:product_type>` | Product Category | Text | | `<g:brand>` | Product Brand | Text | | `<link>` | Product Permalink | URL | | `<g:image_link>` | Product Image URL | URL | | `<g:gender>` | Valid values: `male`, `female`, `unisex` | Text | | `<g:size>` | Clothing/Shoe Size (e.g., `"S"`, `"XL"`, `"34"`) | Text | | `<g:age_group>` | Valid values: `newborn`, `infant`, `toddler`, `kids`, `adult` | Text | | `<g:size_type>` *(optional)* | Valid values: `regular`, `petite`, `plus`, `big and tall`, `maternity` | Text | 3. **Handling Size Variants** You can choose to submit **all size variations under a single item** or **each size variation as a separate item** in the XML. **➡️ Best Practice:** To improve recommendations, **include all available sizes** for a product, even if some are currently out of stock. **Example 1: Single Item with All Size Variants** <div align="left"><figure><img src="/files/4mrgXA7N82KL0X22579G" alt=""><figcaption></figcaption></figure></div> **Example 2: Separate Items for Each Size Variation** <div align="left"><figure><img src="/files/II4tYHGvUXehsNmdt0zZ" alt=""><figcaption></figcaption></figure></div> # Product Integration (API) ## Authentication We use the basic authentication standard, please contact us for your credentials at **<support@sizebay.com>** ## Request endpoint This endpoint create a new product in our database. ## Create new product <mark style="color:green;">`POST`</mark> `https://api.sizebay.technology/v1/integrations/products` #### Authenticator | Name | Type | Description | | ------------------------------------------ | ------ | ------------- | | user<mark style="color:red;">\*</mark> | string | Your user | | password<mark style="color:red;">\*</mark> | string | Your password | #### Request Body | Name | Type | Description | | ------------------------------------------------ | ------ | ------------------------------------------------------------ | | name<mark style="color:red;">\*</mark> | string | Name of the product | | gender<mark style="color:red;">\*</mark> | string | Product gender (see options below) | | permalink<mark style="color:red;">\*</mark> | string | Unique product link (url) | | image<mark style="color:red;">\*</mark> | string | Product image link (url) | | feedProductId | string | Unique product ID | | brandName<mark style="color:red;">\*</mark> | string | Product brand | | categoryName<mark style="color:red;">\*</mark> | string | Product category | | availableSizes<mark style="color:red;">\*</mark> | array | Size of the clothing / shoe avaliables. Ex: \["P", "M", "G"] | | ageGroup<mark style="color:red;">\*</mark> | string | Product age group (see options below) | | sizeType<mark style="color:red;">\*</mark> | string | Product type (see options below) | {% tabs %} {% tab title="200 Success" %} ```javascript "" ``` {% endtab %} {% tab title="401 Permission denied" %} {% endtab %} {% tab title="400: Bad Request An error occurred" %} ```javascript { // The error response can vary, due the many fields on this req } ``` {% endtab %} {% endtabs %} ### Payload example {% hint style="danger" %} There's an important information regarding **categoryName** that must be acknowledged before attempting this integration. Please read the details by checking our docs at <https://docs.sizebay.com/integration-products/categories-accepted-by-the-integration> {% endhint %} <pre class="language-json"><code class="lang-json"><strong>{ </strong> "name": "Shorts", "gender": "M", "permalink": "https://www.exemple.com/prod/3213", "image": "https://www.exemple.com/short-image.jpg", "feedProductId": "he3jga4j4b", "brandName": "Product Brand", "categoryName": "Shorts", "availableSizes": ["PP", "P", "M", "G", "GG"], "ageGroup": "adult", // Properties below are OPTIONAL "sizeType": "regular" } </code></pre> ### Field value limits * `availableSizes`: 20 as the maximum allowed length for each element * `image`: 255 as the maximum allowed url length * `name`: 150 as the maximum allowed length * `categoryName`: 150 as the maximum allowed length * `brandName`: 100 as the maximum allowed length * `permalink`: 150 as the maximum allowed href length ### Fields Options <table><thead><tr><th width="206" align="center">field</th><th width="285.490930745063" align="center">options</th><th align="center">description</th><th data-hidden></th><th data-hidden></th></tr></thead><tbody><tr><td align="center"><strong>gender</strong></td><td align="center"><code>M</code>, <code>F</code>, <code>U</code></td><td align="center">M = male, F = female, U = unisex</td><td></td><td></td></tr><tr><td align="center"><strong>ageGroup</strong></td><td align="center"><code>adult</code><strong>,</strong> <code>infant</code><strong>,</strong> <code>kids</code><strong>,</strong> <code>newborn</code><strong>,</strong> <code>toddler</code></td><td align="center"></td><td></td><td></td></tr><tr><td align="center"><strong>sizeType (optional)</strong></td><td align="center"><code>regular</code>, <code>petite</code> <code>plus size</code>, <code>big and tall</code>, <code>maternity</code></td><td align="center">They must be <strong>exactly the way they are described here.</strong> Do <strong>NOT</strong> send it as e.g "Regular". It's case sensitive.</td><td></td><td></td></tr></tbody></table> # Product Integration (OnPage) Sizebay registers products from HTML pages via a lightweight JavaScript embed. When a visitor lands on a product page, the script reads and registers it in real time. {% hint style="info" %} No app, API token, or client credentials required. The only installation step is adding the Sizebay embed script to your store theme. {% endhint %} ### Fields Summary <table data-header-hidden><thead><tr><th valign="middle"></th><th valign="middle"></th><th valign="middle"></th><th valign="middle"></th></tr></thead><tbody><tr><td valign="middle"><strong>Field</strong></td><td valign="middle"><strong>How It's Read</strong></td><td valign="middle"><strong>HTML Source</strong></td><td valign="middle"><strong>Notes</strong></td></tr><tr><td valign="middle">Product Name</td><td valign="middle">Automatic</td><td valign="middle">page <title> / H1</td><td valign="middle">—</td></tr><tr><td valign="middle">Product Image</td><td valign="middle">Automatic</td><td valign="middle">First image rendered</td><td valign="middle">Ensure main image is correct</td></tr><tr><td valign="middle">URL / Permalink</td><td valign="middle">Automatic</td><td valign="middle">Current page URL</td><td valign="middle">URL changes create a new record</td></tr><tr><td valign="middle">Sizes</td><td valign="middle">Automatic</td><td valign="middle">Size selector (HTML)</td><td valign="middle">Must be in initial HTML, not async</td></tr><tr><td valign="middle">Gender</td><td valign="middle">Client input</td><td valign="middle">meta tag / data-attr / breadcrumb</td><td valign="middle">Inform Sizebay team of source</td></tr><tr><td valign="middle">Category</td><td valign="middle">Client input</td><td valign="middle">meta tag / data-attr / breadcrumb</td><td valign="middle">Must be mapped to Sizebay categories</td></tr><tr><td valign="middle">Age Group</td><td valign="middle">Client input</td><td valign="middle">meta tag / data-attr / breadcrumb</td><td valign="middle">Only required if selling kids and products</td></tr></tbody></table> ### Field Notes 1. **Sizes** The script reads size options from the size selector rendered on the product page. Sizes must be present in the initial HTML response — if loaded asynchronously after page render, they may not be captured. {% hint style="warning" %} Confirm with your theme developer that size options are in the initial HTML, not injected via JavaScript after page load. {% endhint %} 2. **Gender** No standardized field. Sizebay defaults to unisex. Inform the Sizebay team where gender is exposed in your page HTML. Common sources: * Meta tag: \<meta name="gender" content="male" /> * data- attribute: data-gender="male" * Breadcrumb — if navigation separates male and female sections. {% hint style="warning" %} If none of the above applies, share a sample product page URL and the Sizebay team will inspect the HTML to find the best extraction point. {% endhint %} 3. **Category** Used to link products to size charts and to segment usage reports. Same extraction approaches as Gender (meta tag, data- attribute, breadcrumb). All store categories must be mapped to a Sizebay category. Example: "Dresses" → Full Body. Provide your full category list and the team will configure the mappings. <table data-header-hidden><thead><tr><th valign="middle"></th><th valign="middle"></th></tr></thead><tbody><tr><td valign="middle">Sizebay Category</td><td valign="middle">Common Store Examples</td></tr><tr><td valign="middle">Top</td><td valign="middle">T-shirts, shirts, jackets, blouses, sweaters, hoodies</td></tr><tr><td valign="middle">Bottom</td><td valign="middle">Pants, shorts, skirts, leggings</td></tr><tr><td valign="middle">Full Body</td><td valign="middle">Dresses, jumpsuits, overalls, rompers</td></tr><tr><td valign="middle">Top Underwear</td><td valign="middle">Bras, bralettes, crop tops (underwear)</td></tr><tr><td valign="middle">Bottom Underwear</td><td valign="middle">Briefs, boxers, panties, thongs</td></tr><tr><td valign="middle">Shoe</td><td valign="middle">Sneakers, boots, sandals, heels, flats</td></tr></tbody></table> {% hint style="danger" %} Correct mapping directly impacts automated size chart coverage. {% endhint %} 4. **Age Group** Defaults to adult. Only required if your store sells children's products. \ \ Common sources: * Meta tag: \<meta name="age-group" content="kids" /> * data- attribute: data-age-group="adult" * Breadcrumb — if navigation separates adult and kids sections. {% hint style="info" %} Questions? Contact your onboarding manager — we’re happy to help. {% endhint %} # Product Integration (Shopify) This page provides an overview of how product integration via API works on Shopify, highlighting key concepts and important points to consider. ### Requirements Create a Shopify app and share the generated token and client\_id with the Sizebay team. All product reads are performed via the Shopify API using those credentials. ### Fields Summary <table data-header-hidden><thead><tr><th valign="middle"></th><th valign="middle"></th><th valign="middle"></th><th valign="middle"></th></tr></thead><tbody><tr><td valign="middle"><strong>Field</strong></td><td valign="middle"><strong>Sizebay Key</strong></td><td valign="middle"><strong>Shopify Source</strong></td><td valign="middle"><strong>Notes</strong></td></tr><tr><td valign="middle">Product Name</td><td valign="middle">name</td><td valign="middle">title</td><td valign="middle">—</td></tr><tr><td valign="middle">Gender</td><td valign="middle">gender</td><td valign="middle">name / tags</td><td valign="middle">Custom mapping rule</td></tr><tr><td valign="middle">Permalink</td><td valign="middle">permalink</td><td valign="middle">domain/id</td><td valign="middle">Uses Shopify product ID</td></tr><tr><td valign="middle">Product Image</td><td valign="middle">image</td><td valign="middle">images[0]</td><td valign="middle">Primary image</td></tr><tr><td valign="middle">Product ID</td><td valign="middle">feedProductId</td><td valign="middle">id</td><td valign="middle">Native Shopify numeric ID</td></tr><tr><td valign="middle">Brand Name</td><td valign="middle">brandName</td><td valign="middle">vendor</td><td valign="middle">—</td></tr><tr><td valign="middle">Category</td><td valign="middle">categoryName</td><td valign="middle">product_type</td><td valign="middle">Must be mapped to Sizebay categories</td></tr><tr><td valign="middle">Sizes</td><td valign="middle">sizes</td><td valign="middle">option 1/2/3</td><td valign="middle">Position configured during onboarding</td></tr><tr><td valign="middle">Age Group</td><td valign="middle">ageGroup</td><td valign="middle">name / tags</td><td valign="middle">Custom mapping rule</td></tr></tbody></table> ### Field Notes 1. **Gender** No native field in Shopify. Defaults to unisex. Inform the Sizebay team of your strategy: * Product name keywords (e.g., "Women's" → Female) * Shopify tags — most reliable approach<br> 2. **Category** Read from product\_type. Must be mapped to a Sizebay category: <table data-header-hidden><thead><tr><th valign="middle"></th><th valign="middle"></th></tr></thead><tbody><tr><td valign="middle"><strong>Sizebay Category</strong></td><td valign="middle"><strong>Common Store Examples</strong></td></tr><tr><td valign="middle">Top</td><td valign="middle">T-shirts, shirts, jackets, blouses, sweaters, hoodies</td></tr><tr><td valign="middle">Bottom</td><td valign="middle">Pants, shorts, skirts, leggings</td></tr><tr><td valign="middle">Full Body</td><td valign="middle">Dresses, jumpsuits, overalls, rompers</td></tr><tr><td valign="middle">Top Underwear</td><td valign="middle">Bras, bralettes, crop tops (underwear)</td></tr><tr><td valign="middle">Bottom Underwear</td><td valign="middle">Briefs, boxers, panties, thongs</td></tr><tr><td valign="middle">Shoe</td><td valign="middle">Sneakers, boots, sandals, heels, flats</td></tr></tbody></table> {% hint style="warning" %} Correct mapping directly impacts automated size chart coverage. {% endhint %} 3. **Sizes** Read from option1, option2, or option3. The option position is configured once and applied globally. {% hint style="warning" %} Size must be in the same option position across your entire catalog. Standardize before onboarding. {% endhint %} 4. **Age Group** No native field in Shopify. Defaults to adult. If your store sells children's products, inform the Sizebay team: * Product name keywords (e.g., "Kids", "Junior") * Shopify tags ### Understanding Shopify Tags Regarding the use of Shopify tags, please consider the following guidelines to ensure proper integration and accurate size chart mapping:<br> * **Tag Assignment**\ Tags should be added during product registration in Shopify, as described in the [Shopify Help Center](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/using-tags). This ensures that all necessary information is available at the time of ingestion by Sizebay. * **Naming Convention**\ Please provide the exact text used for your tags. Tag values must match precisely with Sizebay’s internal mapping in order to be correctly interpreted (e.g., gender, age group, category). * **Capture Timing**\ Tags are captured only when a product is first registered in the Sizebay system. If tags are added or modified after this initial ingestion, they will **not** be updated automatically. In such cases, the product will remain associated with a default or general size chart. * **Re-integration Process**\ Our daily synchronization process updates only size-related information (such as new SKUs or stock changes), not tags. To update tags for products already in our system, they must be deleted and re-integrated. <figure><img src="/files/Z6gvBRZ4Ss8OJoxcUXKK" alt=""><figcaption></figcaption></figure> {% hint style="info" %} Questions? Contact your onboarding manager — we’re happy to help. {% endhint %} # Return Data Integration (CSV) The return data helps our algorithm learn and enhance the recommendations for your customers. <figure><img src="/files/g0wcKkzVn37adbuZnW3z" alt=""><figcaption></figcaption></figure> ### **Required fields** | **Field** | Description | | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | **return\_date\*** | Date (DD/MM/YYYY) when the return was requested | | **order\_id\*** | The order identification | | **order\_date\*** | Date (DD/MM/YYYY) when the order was created | | **product\_id\*** | The product ID same as in product feed | | **product\_name\*** | The product name same as in product feed | | **product\_url\*** | The product url same as in product feed | | **size\_ordered\*** | The item size ordered | | **product\_sku\*** | Id of product variation | | **quantity\*** | Quantity of returned product items | | **return\_reason\*** | <p>The reason of return. Only the values bellow are acceptable</p><ul><li>0 = unknown / others</li><li>1 = too small</li><li>2 = too big</li></ul> | {% hint style="info" %} *Fields with (\*) are* **mandatory** {% endhint %} ### **How should the files be shared** Returns data should be sent once a month (at least) but we recommend that the files be sent weekly. The data is collected incrementally, so if the data has already been sent previously, it does not need to be in the new file. These files should be named following the pattern "YYYY-MM-DD\_yourstore\_returns," where "YYYY" refers to the year, "MM" to the month, and "DD" to the day. For example: 2024-10-02\_yourstore\_returns. You can email <returns@sizebay.com> {% file src="/files/vBv7mNygfbi3cSC9Qybw" %} # Return Data Integration (API) This endpoint allows partners to send one or multiple product return records to Sizebay. {% hint style="info" %} **Try it out:** Open in [Swagger UI](https://returns.internalsizebay.com/api/docs#/) {% endhint %} ### **Create Return Items** Creates **one or more return items** in the system.\ Returns status `201 Created` with a `results` array containing the processing outcome for each item. ### **Authentication** Each request must include the following header: | Header | Type | Required | Description | | ----------- | -------- | -------- | --------------------------------------- | | `x-api-key` | `string` | ✅ | Authentication key provided by Sizebay. | #### **Endpoint** <mark style="color:green;">`POST`</mark> `https://returns.internalsizebay.com/returns` #### **Request Body** The request body must be sent as **JSON**, containing one or more return items in the `returns` array. **Example Request** ```scheme { "returns": [ { "orderId": "ORD-12345", "orderDate": "28/08/2025", "productIdentifier": "396575_194", "sizeOrdered": "M", "quantity": 1, "returnReason": "BIG", "returnDate": "10/10/2025", "comment": "very long sleeve" } ], "processType": "PRODUCT_ID", "ignoreOrderedSize": false, "domain": "www.example.com" } ``` **Request Body Fields** **ReturnItemDto** Represents an individual return item. <table><thead><tr><th width="174.3984375">Field</th><th width="114.32421875">Type</th><th width="115.93359375">Required</th><th>Example</th><th>Description</th></tr></thead><tbody><tr><td><code>orderId</code></td><td><code>string</code></td><td>✅</td><td><code>ORD-12345</code></td><td>The original order ID.</td></tr><tr><td><code>orderDate</code></td><td><code>string</code></td><td>✅</td><td><code>28/08/2025</code></td><td>Order date in <code>DD/MM/YYYY</code> format.</td></tr><tr><td><code>productIdentifier</code></td><td><code>string</code></td><td>✅</td><td><code>396575_194</code></td><td>Product identifier (SKU, Product ID, or Permalink depending on <code>processType</code>).</td></tr><tr><td><code>sizeOrdered</code></td><td><code>string</code></td><td>✅</td><td><code>M</code></td><td>The size purchased.</td></tr><tr><td><code>quantity</code></td><td><code>number</code></td><td>✅</td><td><code>1</code></td><td>Quantity being returned. Minimum value: <code>1</code>.</td></tr><tr><td><code>returnReason</code></td><td><code>string</code></td><td>✅</td><td><code>BIG</code></td><td>Reason for the return.Accepted values: <code>UNKNOWN</code>, <code>SMALL</code>, <code>BIG</code>.</td></tr><tr><td><code>returnDate</code></td><td><code>string</code></td><td>❌</td><td><code>10/10/2025</code></td><td>Return date in <code>DD/MM/YYYY</code> format. Defaults to today’s date if not provided.</td></tr><tr><td><code>comment</code></td><td><code>string</code></td><td>❌</td><td><code>"Customer mentioned item was too large"</code></td><td>Optional field for any additional notes, such as customer feedback, RMA numbers, or internal remarks for intelligence analysis.</td></tr></tbody></table> **ReturnsDto** Represents the main object containing all return data. | Field | Type | Required | Example | Description | | ------------------- | --------- | -------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------ | | `returns` | `array` | ✅ | `[ReturnItemDto, ...]` | List of one or more return items. | | `processType` | `string` | ✅ | `PRODUCT_ID` | Defines the product matching logic. Accepted values: `PRODUCT_ID`, `PRODUCT_SKU`, `PRODUCT_ID_ON_ORDER_PERMALINK`. | | `ignoreOrderedSize` | `boolean` | ❌ | `false` | Whether to ignore the ordered size when matching. | | `domain` | `string` | ✅ | `www.example.com` | The domain of the store associated with this return batch. | #### **Response** Returns a summary of the operation results for each return item. **Example Response** ```scheme { "results": [ { "index": 0, "status": "created" } ] } ``` **BatchReturnResponseDto** | Field | Type | Required | Description | | --------- | ------- | -------- | ----------------------------------------------- | | `results` | `array` | ✅ | List of results for each processed return item. | **ReturnItemResponseDto** | Field | Type | Required | Example | Description | | --------- | -------- | -------- | --------------------------------- | -------------------------------------------- | | `index` | `number` | ✅ | `0` | Index of the item in the submitted batch. | | `status` | `string` | ✅ | `created` | Operation result (`created`, `error`, etc.). | | `code` | `string` | ❌ | `INVALID_QUANTITY` | Error code, if applicable. | | `message` | `string` | ❌ | `quantity must be greater than 0` | Error message, if applicable. | #### **Response Codes** | Code | Description | | --------------------------- | --------------------------------------- | | `201 Created` | Return items created successfully. | | `400 Bad Request` | Validation error in the submitted data. | | `401 Unauthorized` | Missing or invalid API key. | | `500 Internal Server Error` | Unexpected server error. | #### **Tip** Use the `"comment"` field to include **contextual information** about the return, such as: * Customer feedback (e.g., *“*very long sleeve*”*); * Notes for internal tracking or analytics. # Product Variants Integration We now allow you to integrate multiple variants of your product, from images to even color palettes. {% hint style="warning" %} This feature is for **invites only.** If you're interested in adding it to your website, contact our support team at <support@sizebay.com> {% endhint %} ## Getting started {% content-ref url="/pages/-MfD7Rkr\_b9ylL1cUz5a" %} [V1](/size-and-fit-data-integration/product-variants-integration/v1) {% endcontent-ref %} # V1 1.0.0-BETA, 1.0.0, 1.0.5 ## Getting Started For our script to properly integrate the variants, all of the **required metadata** described below will be fetched through the product page by our implantation team. Here's the final object's schema: ``` { sku: number | string; productId: number | string; source: "https://storename.com/your/catalog/url?skuId=SKU_ID&productId=PRODUCT_ID"; images: string[]; // a list of colors (hex, hsl, rgb, etc) variants: { color: string; variant: string | number }[]; }; ``` Let's now dissect it: * `sku`: Product `SKU` * `productId`: Product `ID` * `source`: your catalog endpoint. It will be used by the Virtual Fitting Room to fetch the variants' metadata, based on their `SKU` and `PRODUCT_ID`. If your endpoint expects a different set of query parameters, please contact our team at <support@sizebay.com>. * `variants`: As of today, our variants integration only detects the color and which variant ID it corresponds to. After that, we'll add to the store domain's cookies the key `SIZEBAY_METADATA`, which serves as a middleware so the Virtual Fitting Room can detect the variants, thus rendering them into the screen. ### Aftermath If everything is properly configured, this is what your Recommendation screen will look like: ![Product Variants carousel and photo slider](/files/-MeAuKTqBh1cP8WrGwBv) # Categories accepted by the Integration In this document, we'll be dissecting the categories that are accepted by the Integration methods available by Sizebay. ### Affected Fields * XML -> **`g:product_type`** * API -> **`categoryName`** ### **Accepted categories** * Top * Bottom * Full Body * Top Underwear * Bottom Underwear {% hint style="info" %} We understand that sometimes it can be challenging for you to change this field, but please be aware that if you don’t send it in this format, it requires extra effort from our team and can prolong the process or result in products being matched with the wrong size chart. If you have any questions regarding this topic, please don’t hesitate to ask us. {% endhint %} # Size Tailor Improve your store integration with Sizebay even further by extending the user measures experience. ## Getting Started ### My Sizebay Admin {% hint style="info" %} If you don't have access to MySizebay Admin, contact our team at <support@sizebay.com> {% endhint %} First, you'll have to enable Size Tailor in a Category. You can do that by going to <https://my.sizebay.com/categories> and clicking on a Category (or creating a new one) like we're showing here: ![Size Tailor configuration through the Categories page](/files/-MjoundN5slPN8o1Shcm) ![Size Tailor being toggled whilst editing/creating a Category](/files/-MjovVkgihtWqJ37WDMD) ### Virtual Fitting Room After enabling it through MySizebay, simply add to your VFR 4 configuration file the following snippet: {% code title="config\_v4.json" %} ```javascript { ... ommitted config file ... general: { ... ommitted general object ... sizeTailor: true, // globally enables Size Tailor ... ommitted general object ... } ... ommitted config file ... } ``` {% endcode %} {% hint style="info" %} It can take a few minutes to reflect the update. Contact our development team at **<support@sizebay.com>** for any further issues. {% endhint %} ## Usage ### Virtual Fitting Room When enabled, Size Tailor will become available as a button through the "Fallback Measures" step. It looks something like this: ![Size Tailor button experience](/files/xzmsOVFNhy7iW3FKT0h6) ![Size Tailor step experience](/files/SXDgCOIuzVhyT21G8lFx) ### eCommerce Integration As a result of using Size Tailor, our service will store into the `window` a new object called `sizeTailor` containing the profile measurements, available through `window.sizebayParams.sizeTailor`. This can be used to facilitate the integration between VFR and your eCommerce, allowing the measurements calculated by Sizebay to be used outside our webapp. PS: The values shown in the object are measured in **centimeters** and **can't be configured** to return as other conversion types. This is what our object looks like: ```javascript // window.SizebayParams.sizeTailor { "id": "szb-compose-size-tailor", "measures": { "waist": 91, "chest": 102, "hip": 106, "sleeve": 42, "length": 0, "insideLeg": 48, "neck": 41, "fist": 0, "underBust": 0, "poundWeight": null } } ``` # Introduction Performing the behavioral analysis of a typical e-commerce user is not an easy task. Indicators such as cart abandonment and conversion rates, although easily estimated, are hard to have as accurate data, specially having them segmented by category, brand, measurements chart or even product. The Shopping Cart Plugin is a Sizebay product that aims to group the information obtained by the users' experience and generate accurate indicators for their e-commerce. This document shows, in a simple way, how developers could incorporate Sizebay's Shopping Cart Plugin into e-commerces. ### **Understanding the sales funnel** The Sales Funnel is, with no doubts, the most important indicator of commercial performance that an e-commerce has. In it we can easily identify, for example, the stages when the purchase experience gets stuck - where users look for products, find them, but are not motivated to buy. <figure><img src="/files/LLXLbpXOdg31PwLVLy9Y" alt=""><figcaption></figcaption></figure> * Page View - how many times users accessed e-commerce products * Products added to cart * Ordered products<br> # Order Tracking (Script) In order for the plugin to be able to correctly capture this data, it is necessary for the platform to call it correctly on each screen that the user could access. Following are the steps (or screens) in which calls to our plugin are needed so we can group the usage data correctly and generate consistent indicators for your day-to-day activities. In all the steps described below, it will be necessary to import the Sizebay script into your e-commerce platform. To do so, just include the following line in your HTML: ```markup <script src="https://vfr-v3-production.sizebay.technology/V4/implantation/index.js"></script> ``` ### **Tracking a Product Page** All Page Views indicators computed by the plugin are obtained by users accessing the products page. If you already have the Virtual Fitting Room integrated, you can skip to the next topic, since the plugin already collects Page Views automatically. If you do not have the plugin previously configured on your product pages, just run the following line of code as soon as the product page opens (DOM Ready or Page Loaded event from browsers): ### **Adding products to the cart** Another important step in the process is when the user adds a product of interest to the shopping cart. This moment is important, and indicates that the user has actually engaged with the product (or with the offer). To add this information to your Sales Funnel, just call the following line of code into your system. ```javascript const payload = { products: [ { permalink: 'https://www.your-store.com/product/product-example' } ] } const tenantId = 000 window.Sizebay.events.addToCart(payload, tenantId) ``` {% hint style="warning" %} **Important**: The tenantId should be provided by our Support Team (<support@sizebay.com>) {% endhint %} #### **E-commerces usually offer two types of experience to put items in the cart:** * The inclusion of the cart **asynchronously** - where the user does not leave the product page, receives a notification that it has been added to the cart and continues to use the site normally.<br> * Feedback that the product has been added to the cart by leaving the product screen and directing the user to **a screen with all the items included in the cart** so far. If your platform makes the inclusion asynchronously, you should avoid placing this code associated directly with the click event on the add to cart button - especially when it validates the size or colors that were not selected by the user. For this information to be accurate and complete, it is important to send it only when the platform has the product properly saved in your cart. If your platform redirects the user to the screen with all the items added to the cart, you can trigger the event as soon as the screen starts (DOM Ready or Page Loaded events from browsers). If it is not possible to distinguish which products were added to the shopping cart with those that were already in place, you can send all items added so far - previously added products will be disregarded. ### **Finalizing the order** The checkout page is the most important page in the process, as it represents the sale itself. It is through the sales indicators, including, that the exchanges/returns rate of the products sold are analyzed. To add this data to your e-commerce indicators, just execute the following lines of JavaScript code: ```javascript const payload = { orderId: 'order01', currency: 'EUR, country: 'FR', items: [ { permalink: 'https://www.your-store.com/product/product-example', price: 75, quantity: 1, size: 'P', feedProductId: "00000", sku: "A1P" } ] } const tenantId = 000 window.Sizebay.events.ordered(payload, tenantId) ``` | `Field` | Type | Description | | --------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `tenantId` | string | Sizebay Store ID | | `orderId` | string | Must be filled in with the order code generated as soon as the purchase is made. It is with this information that we will be able to track this shopping experience in case of a future exchanged/returned product | | `items` | array | Array with the various items that were sold in this purchased order. There are no product limits to be included. Each product has the attributes described **below**: | | `permalink` | string | Product URL. It must be the same used in the shopping cart | | `price` | float | The price of the product sold | | `quantity` | int | Number of itens | | `size` | string | Clothing size ordered | | `feedProductId` | string | Global product id (id for all variations) | | `sku` | string | Id of product variation | | `currency` | string | Currency applied to the ordered item | | `country` | string | Country applied to the ordered item | {% hint style="warning" %} **Important:** For the complete list of supported countries and currencies, please head over to the session [Sizebay Tracker - Supported Countries and Currencies](https://docs.sizebay.com/shopping-tracker/sizebay-tracker-supported-countries-and-currencies) {% endhint %} {% hint style="warning" %} **Important**: The tenantId should be provided by our Support Team (<support@sizebay.com>) {% endhint %} # Sizebay Tracker Script (Sizebay Implementation) This is the most common method, we will develop your tracker from scratch and you only will have to import a JavaScript file to your Cart/Order page. The link to your tracker will be provided by our **Support Team (<support@sizebay.com>).** ### **Adding products to the cart** On your cart page, import the file using `<script>` HTML tag, for example: ```markup <script src="https://this-is-just-a-example/store/tracker.js"></script> ``` For our tracker to work properly, make sure that for each product in your cart the information below is available on your page**:** * **permalink -** link of the product ### **Finalizing the order** In your purchase page (when the order is finished), import the file using `<script>` HTML tag, for example: ```markup <script src="https://this-is-just-a-exemple/store/tracker.js"></script> ``` For our tracker to work properly, make sure that for each product in your order the information below is available on your page**:** * **orderId -** order code generated * **currency -** the currency in which the order was paid * **permalink**: the product URL * **price:** the price of the product sold * **quantity:** number of the item purchased * **size:** the product size ordered * **product\_sku:** the product sku * **product\_id:** the product id # Order Tracking (API) ### Starter Guide {% hint style="warning" %} **ATTENTION:** The asterisk (<mark style="color:red;">`*`</mark>) symbol, when placed next to a field or item in forms or documentation, typically denotes that the information is mandatory or required. {% endhint %} {% hint style="warning" %} **ATTENTION:** Sending the country value is only mandatory if you want to segregate the data by country. If there is no need to segregate by country, you can proceed without providing this information. {% endhint %} ### 1. Adding products to the cart An important step in the process is when the user adds a product to the shopping cart. This a very important moment and indicates that the user has actually engaged with the product (or with the offer). ## Cart <mark style="color:green;">`POST`</mark> `https://vfr-v3-production.sizebay.technology/plugin/new/cart?sid=*` Endpoint for adding the product in the cart. #### Headers Parameters | Name | Type | Description | | ------------------------------------------------- | ------ | ---------------------------------------------------------------------------------------------------------- | | x-szb-country | string | Country running plugin (ex: BR, US, MX, DE) | | x-szb-device<mark style="color:red;">\*</mark> | string | <p>User device</p><p>Possible values: <em>DESKTOP</em>, <em>MOBILE</em>, <em>TABLET</em>, <em>APP</em></p> | | x-szb-tenant-id<mark style="color:red;">\*</mark> | string | Store ID | | x-szb-referer<mark style="color:red;">\*</mark> | string | The referer must be the (domain) of the store, for example: “store.sizebay.com”, without https\://. | #### Query Parameters | Name | Type | Description | | ---- | ------ | ------------------- | | sid | string | User identification | #### Request Body | Name | Type | Description | | ------- | ------ | --------------------------------------- | | payload | object | Payload with all products added to cart | {% hint style="warning" %} The **SID** must me retrieved from the cookies, identified as **`SIZEBAY_SESSION_ID_V4`** {% endhint %} #### Payload Example: ```javascript { "products": [ { "permalink": "https://www.sizebay.com.br/product/product-example" } ], "tenantId": 000 } ``` | `Field` | Type | Description | | ----------- | ------ | -------------------------------------- | | `tenantId` | string | Sizebay Store ID | | `products` | array | Array containing the product permalink | | `permalink` | string | Product URL | {% hint style="warning" %} **Important**: The tenantId should be provided by our Support Team (<support@sizebay.com>) {% endhint %} ### 2. **Finalizing the order** The checkout page is the most important page in the process, as it represents the sale itself. It is through the sales indicators that the exchanges/returns rate of the products sold are analyzed. {% hint style="warning" %} **ATTENTION:** Sending the country value is only mandatory if you want to segregate the data by country. If there is no need to segregate by country, you can proceed without providing this information. {% endhint %} ## Ordered <mark style="color:green;">`POST`</mark> `https://vfr-v3-production.sizebay.technology/plugin/new/ordered?sid=*` Endpoint to register a new order. #### Headers Parameters | Name | Type | Description | | ------------------------------------------------- | ------ | ---------------------------------------------------------------------------------------------------------- | | x-szb-country | string | Country running plugin (ex: BR, US, MX, DE) | | x-szb-device<mark style="color:red;">\*</mark> | string | <p>User device</p><p>Possible values: <em>DESKTOP</em>, <em>MOBILE</em>, <em>TABLET</em>, <em>APP</em></p> | | x-szb-tenant-id<mark style="color:red;">\*</mark> | string | Store ID | | x-szb-referer<mark style="color:red;">\*</mark> | string | The referer must be the (domain) of the store, for example: “store.sizebay.com”, without https\://. | #### Query Parameters | Name | Type | Description | | ---- | ------ | ------------------- | | sid | string | User identification | #### Request Body | Name | Type | Description | | ------- | ------ | ---------------------------------- | | payload | object | Payload with the order information | {% hint style="warning" %} The **SID** must me retrieved from the cookies, identified as **`SIZEBAY_SESSION_ID_V4`** {% endhint %} ```javascript { "orderId": "000000", "items": [ { "permalink": "https://www.sizebay.com.br/product/product-example", "price": 75, "quantity": 1, "size": "M", "feedProductId": "00000", "sku": "A1P" } ], "tenantId": 000, "currency": "EUR" } ``` | `Field` | Type | Description | | --------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `tenantId` | string | Sizebay Store ID | | `orderId` | string | Must be filled in with the order code generated as soon as the purchase is made. It is with this information that we will be able to track this shopping experience in case of a future exchanged/returned product | | `items` | array | Array with the various items that were sold in this purchased order. There are no product limits to be included. Each product has the attributes described **below**: | | `permalink` | string | Product URL. It must be the same used in the shopping cart | | `price` | float | The price of the product sold | | `quantity` | int | Number of itens | | `size` | string | Clothing size ordered | | `feedProductId` | string | global product id (id for all variations) | | `sku` | string | Id of product variation | | `currency` | string | Currency applied to the ordered item | {% hint style="warning" %} **Important:** For the complete list of supported countries and currencies, please head over to the session [Sizebay Tracker - Supported Countries and Currencies](https://docs.sizebay.com/shopping-tracker/sizebay-tracker-supported-countries-and-currencies) {% endhint %} {% hint style="warning" %} **Important**: The tenantId should be provided by our Support Team (<support@sizebay.com>) {% endhint %} # Platforms This page describes platforms that are officially supported by Sizebay. # Shopify The Sizebay Assistant is a Shopify app that captures events on your store to generate analytics and insights about your e-commerce in our platform. To understand more about our Shopping Tracking and reports [read our documentation](/size-and-fit-order-tracking/introduction). {% hint style="info" %} The Sizebay Tech Team released a Technical Note with important information about order capturing, including key integration considerations. Please take a moment to review it, and if you have any questions, feel free to reach out to our team—we're happy to help!\ \ [Click here to check it out](https://docs.sizebay.com/shopping-tracker/platforms/shopify/technical-note) {% endhint %} ### Settings <figure><img src="/files/BgUPSq0fEVgcHQgC4zGo" alt=""><figcaption><p>Settings page</p></figcaption></figure> In the settings page you will find a form that contains 3 fields, they are: * [Tenant ID](#tenant-id) * [Store Domain](#store-domain) * [Size Variant](#size-variant) {% hint style="info" %} If you have any question about the information necessary contact our Support Team (<support@sizebay.com>) {% endhint %} #### Tenant ID A **unique** code that identify a customer in the Sizebay Platform. #### Store Domain Your production store domain, like **[www.mystore.com](http://www.mystore.com)** #### Size Variant Identify the **position of the product size** in the product variants section, must **be the same to all products.** **Why this is needed?** Sizebay collects the Product Size to build reports based on the Size recommended and the Size ordered, but Shopify allows store owner's to choose how the variants fields are allocated and doesn't identify on the back-end what the variation is. This field will identify the variant based on the Size position in the variants section. <figure><img src="/files/5zpz4dej58UFRpNREUwu" alt=""><figcaption><p>Shopify Products Variants</p></figcaption></figure> # Technical Note Sizebay Assistant for Shopify ## Introduction > ℹ️ **About Sizebay Assistant**\ > The **Sizebay Assistant** is a Shopify application designed to capture events from your store and generate valuable analytics and insights about your e-commerce performance on our platform, **My Sizebay**. By integrating this module, store owners can track essential data related to product sizes and customer interactions. For example, when the fitting room is used and a product is purchased, it’s possible to check which size was recommended and which size was bought. For more information on **Shopping Tracking and reports**, please refer to our documentation. *** ## Configuration ### Settings Page On the settings page, you will find a form containing three mandatory fields: ✅ **Tenant ID**: A unique code that identifies each store in the Sizebay platform.\ ✅ **Store Domain**: Your production store domain (e.g., [www.mystore.com).\\](http://www.mystore.com\).\\) ✅ **Size Variant**: Specifies the position of the product size in the product variants section. This must remain consistent across all products. > 💡 **Need Help?**\ > If you have any questions regarding the required information, please contact our **Support Team** at <support@sizebay.com>. #### Why These Settings Are Necessary > ⚠️ Shopify allows store owners to define how product variant fields are allocated, but it does not inherently identify which field represents the size. The **Size Variant** field enables Sizebay to correctly interpret the product size, ensuring accurate reporting based on the recommended size versus the ordered size. *** ## Integration Considerations ### Webhooks Requirement The module operates using Shopify’s **webhook system**, specifically the `orders/create` event. ✅ Orders must pass through this status at some point for proper integration. ### Third-Party Cookie Consent The store must enable the **Third-Party Cookie Message**, and customers must accept it to allow proper order integration. 📌 **Instructions**: [Enable Third-Party Cookie Message](https://community.shopify.com/c/shopify-discussions/enable-third-party-cookie-message/m-p/1908293) ### Webhook Delivery Issues > ⚠️ **Potential Data Loss**\ > Shopify, for unspecified reasons, may not fire certain webhook events due to service downtime or internal platform issues. This may result in some orders not being integrated correctly, leading to **data loss** on the Sizebay side. 📌 **More Details**: [Shopify Webhook Event Not Fired](https://community.shopify.com/c/webhooks-and-events/webhook-event-quot-orders-create-quot-not-fired/m-p/1333905) *** ## Third-Party Checkout / Payment Currently, the **Sizebay O.T** does not ensure proper support for order integrations when customers use **external checkouts** on Shopify. Most external checkout solutions do not transmit the **Shopify cart ID** that originated the order. As a result, it is impossible to determine whether a customer used the **Sizebay virtual try-on** feature for that specific order. > ⚠️ **Shopify Restriction**\ > Shopify states in their [**DEV Community**](https://community.shopify.dev/t/clarification-on-shopifys-external-payment-restrictions/788):\ > *Applications that process payments outside of Shopify’s checkout: Shopify cannot guarantee the security or safety of an order placed through an off-site or third-party payment. Apps that circumvent checkout or payment processing, or record transactions via the Shopify API as part of such activity, are prohibited.* #### Scenarios: 1️⃣ **Scenario 1**: If the external checkout sends the **Shopify cart ID** that originated the order, we can integrate the order with Sizebay and accurately indicate whether the virtual fitting room was used.\ 2️⃣ **Scenario 2**: If the external checkout does **not** send the **Shopify cart ID**, the order is integrated, but all orders will be marked as **not having used the virtual fitting room**.\ 3️⃣ **Scenario 3**: If the external checkout modifies all parameters in the order registration by sending custom fields for price, discount, and cart ID, we cannot guarantee proper integration of the order within Sizebay. > ❗ **External Payments Warning**\ > In cases of **external payments**, Sizebay may **not** be able to receive the tracking information corresponding to these purchases, resulting in **data loss** on our side. *** ## Conclusion > 🛠️ **Final Considerations**\ > The **Sizebay Assistant** provides powerful **tracking and reporting** capabilities for Shopify stores. However, proper **configuration**, including webhook setup and third-party cookie consent, is essential for **accurate data collection** and integration. Store owners should be aware of potential **Shopify limitations** in webhook delivery and monitor their system accordingly. > 💡 **Ongoing Support**\ > The **Sizebay Tech Team** remains committed to monitoring new changes on the **Shopify platform** and assisting store owners in any situation. **Order tracking** is a crucial part of our analytical reports, being essential for evaluating our service performance. However, as explained above, some limitations exist that Sizebay cannot fully control. > 📩 **Need Assistance?**\ > For further assistance, please reach out to our **Support Team** at <support@sizebay.com>. # Prestashop In this topic, you'll see how to install and implement the Shopping Tracker in your PrestaShop e-commerce using the Sizebay Tracker module. ### How to Install Download the module by the following zip archive: {% file src="/files/chL2Rx7LpooHlmVf5tks" %} 1.1.0V {% endfile %} **Video Tutorial:** {% embed url="<https://drive.google.com/file/d/1KozKyaZONU0BjZjpijdKkJ2eegjRmFF6/view?usp=sharing>" %} ### How to Setup After installing the module on your platform, you will need to set up the Tenant ID. To obtain the Tenant ID, please contact our <mark style="color:blue;">**Support Team at <support@sizebay.com>**</mark>. Once you have received the Tenant ID, follow these steps: 1. Access the Module Manager. 2. Search for "Sizebay Tracker." 3. Click the "Configure" button. 4. Insert the Tenant ID on its field. 5. Select your Size Attribute. 6. Save It <figure><img src="/files/z00KEW6q7fUt6rtREdLL" alt=""><figcaption></figcaption></figure> {% hint style="info" %} The Referer field defaults to the domain of the page. You can change this value if your store is associated with a different referer on the Sizebay Dashboard. {% endhint %} When a user completes an order or saves an item to the cart, a request will be sent to the Sizebay Tracker API. For more details, refer to the [Sizebay Tracker via API ](/size-and-fit-order-tracking/order-tracking-api)section. # Magento In this topic, you'll learn how to install and implement the Shopping Tracker in your Magento 2 eCommerce site using the Sizebay Tracker module. {% hint style="info" %} Currently, this module can only be installed via Composer. At Sizebay, we are working on making it available for implementation through the Magento Marketplace. {% endhint %} To install the module, navigate to the root directory of your Magento project and execute the following command in the console: ```sh $ composer require sizebay/sizebay-tracker:dev-master ``` Or ```bash $ bin/composer require sizebay/sizebay-tracker:dev-master ``` Than execute the following commands: ```bash $ bin/magento setup:upgrade $ bin/magento cache:clean $ bin/magento cache:flush $ bin/magento setup:di:compile ``` After the module is installed, you need to access the Admin Back-End and set up the Sizebay Tracker by following the steps below: {% hint style="info" %} You will need to set up the Tenant ID. To obtain the Tenant ID, please contact our <mark style="color:blue;">**Support Team at <support@sizebay.com>**</mark>. {% endhint %} 1. Access **Stores » Settings » Configuration » Sizebay Tracker Settings**. 2. Insert the Tenant ID, refer to your given store in My Sizebay. Then select the country your store is based in and the attribute label corresponding to the size attribute in your products and finally enable the module on the respective store view. <figure><img src="/files/9UJmrpv1Mr7FMNbwJNQ6" alt=""><figcaption></figcaption></figure> # WooCommerce In this topic, you'll learn how to install and implement the Shopping Tracker in your WooCommerce (Wordpress) site using the Sizebay Tracker plugin. {% file src="/files/Flw9HQ1gKN6Tr5HhYoaJ" %} To install the module, access the wp-admin area of your WordPress platform, then follow these steps: <figure><img src="/files/UkMq8Nd4Z0Zq4W1KOC5n" alt=""><figcaption></figcaption></figure> 1. In the sidebar, select **Plugins**. 2. Click on **Add New**. 3. Select **Upload Plugin**. 4. Choose the plugin file you want to install. 5. Click on **Activate Plugin**. The plugin is now installed. Next, configure your store settings in **Sizebay Tracker Settings**: <figure><img src="/files/FUnWcVxqLDmNwPaBgCGd" alt=""><figcaption></figcaption></figure> 1. In the **wp-admin** sidebar, go to **Settings** and select **Sizebay Tracker Settings**. 2. Set up your **Tenant ID.** {% hint style="info" %} You will need to set up the Tenant ID. To obtain the Tenant ID, please contact our <mark style="color:blue;">**Support Team at <support@sizebay.com>**</mark>. {% endhint %} 3. Insert your **Tenant ID**. 4. Enter the **Referer**, typically your store's domain. 5. Select the **Attribute** that corresponds to product size. Congratulations! Your Sizebay Tracker is now set up, and your Orders and Shopping Cart information will be reported in **My Sizebay**. # VTEX IO In this topic, you'll learn how to install and implement the Shopping Tracker in your VTEX IO site using the Sizebay Tracker plugin. 1. **Install the App via VTEX IO Toolbelt** Run the command below to install the app: ``` vtex install sizebay.sizebay-tracker@1.x ``` After installation, you can confirm by running: ``` vtex ls ``` 2. **Access the App in the VTEX Admin** In your account's Admin panel, go to **Apps** and look for the **Sizebay Tracker** card.\ Click the card to open the configuration screen.<br> 3. **Configure the App** Fill in the required fields: * **Domain**: your store’s domain * **TenantId**: the tenant ID provided by the Sizebay support team<br> 4. **Save the Settings** Once all fields are completed, click **Save** to activate the module. # Supported Countries and Currencies In this topic, you'll understand what countries and currencies are supported by our tracking script. {% hint style="info" %} To understand how our tracking script works and parse the following content, head over to [Sizebay Tracker via API](https://docs.sizebay.com/shopping-tracker/sizebay-tracking-via-api) {% endhint %} ## Countries * AC - Ascension Island * AD - Andorra * AE - United Arab Emirates * AF - Afghanistan * AG - Antigua and Barbuda * AI - Anguilla * AL - Albania * AM - Armenia * AO - Angola * AR - Argentina * AS - American Samoa * AT - Austria * AU - Australia * AW - Aruba * AX - Åland Islands * AZ - Azerbaijan * BA - Bosnia and Herzegovina * BB - Barbados * BD - Bangladesh * BE - Belgium * BF - Burkina Faso * BG - Bulgaria * BH - Bahrain * BI - Burundi * BJ - Benin * BL - Saint Barthélemy * BM - Bermuda * BN - Brunei * BO - Bolivia * BQ - Bonaire, Sint Eustatius, and Saba * BR - Brazil * BS - The Bahamas * BT - Bhutan * BW - Botswana * BY - Belarus * BZ - Belize * CA - Canada * CC - Cocos (Keeling) Islands * CD - Democratic Republic of the Congo * CF - Central African Republic * CG - Republic of the Congo * CH - Switzerland * CI - Ivory Coast * CK - Cook Islands * CL - Chile * CM - Cameroon * CN - China * CO - Colombia * CR - Costa Rica * CU - Cuba * CV - Cape Verde * CW - Curaçao * CX - Christmas Island * CY - Cyprus * CZ - Czech Republic * DE - Germany * DJ - Djibouti * DK - Denmark * DM - Dominica * DO - Dominican Republic * DZ - Algeria * EC - Ecuador * EE - Estonia * EG - Egypt * EH - Western Sahara * ER - Eritrea * ES - Spain * ET - Ethiopia * FI - Finland * FJ - Fiji * FK - Falkland Islands * FM - Federated States of Micronesia * FO - Faroe Islands * FR - France * GA - Gabon * GB - United Kingdom * GD - Grenada * GE - Georgia * GF - French Guiana * GG - Guernsey * GH - Ghana * GI - Gibraltar * GL - Greenland * GM - Gambia * GN - Guinea * GP - Guadeloupe * GQ - Equatorial Guinea * GR - Greece * GT - Guatemala * GU - Guam * GW - Guinea-Bissau * GY - Guyana * HK - Hong Kong * HN - Honduras * HR - Croatia * HT - Haiti * HU - Hungary * ID - Indonesia * IE - Ireland * IL - Israel * IM - Isle of Man * IN - India * IO - British Indian Ocean Territory * IQ - Iraq * IR - Iran * IS - Iceland * IT - Italy * JE - Jersey * JM - Jamaica * JO - Jordan * JP - Japan * KE - Kenya * KG - Kyrgyzstan * KH - Cambodia * KI - Kiribati * KM - Comoros * KN - Saint Kitts and Nevis * KP - North Korea * KR - South Korea * KW - Kuwait * KY - Cayman Islands * KZ - Kazakhstan * LA - Laos * LB - Lebanon * LC - Saint Lucia * LI - Liechtenstein * LK - Sri Lanka * LR - Liberia * LS - Lesotho * LT - Lithuania * LU - Luxembourg * LV - Latvia * LY - Libya * MA - Morocco * MC - Monaco * MD - Moldova * ME - Montenegro * MF - Saint Martin * MG - Madagascar * MH - Marshall Islands * MK - North Macedonia * ML - Mali * MM - Myanmar * MN - Mongolia * MO - Macao * MP - Northern Mariana Islands * MQ - Martinique * MR - Mauritania * MS - Montserrat * MT - Malta * MU - Mauritius * MV - Maldives * MW - Malawi * MX - Mexico * MY - Malaysia * MZ - Mozambique * NA - Namibia * NC - New Caledonia * NE - Niger * NF - Norfolk Island * NG - Nigeria * NI - Nicaragua * NL - Netherlands * NO - Norway * NP - Nepal * NR - Nauru * NU - Niue * NZ - New Zealand * OM - Oman * PA - Panama * PE - Peru * PF - French Polynesia * PG - Papua New Guinea * PH - Philippines * PK - Pakistan * PL - Poland * PM - Saint Pierre and Miquelon * PR - Puerto Rico * PS - State of Palestine * PT - Portugal * PW - Palau * PY - Paraguay * QA - Qatar * RE - Réunion * RO - Romania * RS - Serbia * RU - Russia * RW - Rwanda * SA - Saudi Arabia * SB - Solomon Islands * SC - Seychelles * SD - Sudan * SE - Sweden * SG - Singapore * SH - Saint Helena, Ascension, and Tristan da Cunha * SI - Slovenia * SJ - Svalbard and Jan Mayen * SK - Slovakia * SL - Sierra Leone * SM - San Marino * SN - Senegal * SO - Somalia * SR - Suriname * SS - South Sudan * ST - São Tomé and Príncipe * SV - El Salvador * SX - Sint Maarten * SY - Syria * SZ - Eswatini * TA - Tristan da Cunha * TC - Turks and Caicos Islands * TD - Chad * TG - Togo * TH - Thailand * TJ - Tajikistan * TK - Tokelau * TL - Timor-Leste * TM - Turkmenistan * TN - Tunisia * TO - Tonga * TR - Turkey * TT - Trinidad and Tobago * TV - Tuvalu * TW - Taiwan * TZ - Tanzania * UA - Ukraine * UG - Uganda * US - United States * UY - Uruguay * UZ - Uzbekistan * VA - Vatican City * VC - Saint Vincent and the Grenadines * VE - Venezuela * VG - British Virgin Islands * VI - U.S. Virgin Islands * VN - Vietnam * VU - Vanuatu * WF - Wallis and Futuna * WS - Samoa * XK - Kosovo * YE - Yemen * YT - Mayotte * ZA - South Africa * ZM - Zambia * ZW - Zimbabwe ## Currencies * USD - United States Dollar * AED - United Arab Emirates Dirham * ARS - Argentine Peso * AUD - Australian Dollar * BGN - Bulgarian Lev * BOB - Bolivian Boliviano * BRL - Brazilian Real * CAD - Canadian Dollar * CHF - Swiss Franc * CLP - Chilean Peso * CNY - Chinese Yuan * COP - Colombian Peso * CZK - Czech Koruna * DKK - Danish Krone * EGP - Egyptian Pound * EUR - Euro * GBP - British Pound Sterling * HKD - Hong Kong Dollar * HRK - Croatian Kuna * HUF - Hungarian Forint * IDR - Indonesian Rupiah * ILS - Israeli New Shekel * INR - Indian Rupee * JPY - Japanese Yen * KRW - South Korean Won * MAD - Moroccan Dirham * MXN - Mexican Peso * MYR - Malaysian Ringgit * NOK - Norwegian Krone * NZD - New Zealand Dollar * PEN - Peruvian Nuevo Sol * PHP - Philippine Peso * PKR - Pakistani Rupee * PLN - Polish Złoty * RON - Romanian Leu * RSD - Serbian Dinar * RUB - Russian Ruble * SAR - Saudi Riyal * SEK - Swedish Krona * SGD - Singapore Dollar * THB - Thai Baht * TRY - Turkish Lira * TWD - New Taiwan Dollar * UAH - Ukrainian Hryvnia * VND - Vietnamese Đồng * ZAR - South African Rand # Introduction This documentation provides technical guidelines for integrating your store with **Sizebay's Fashion Hub**, a unified platform for AI-based fashion experiences. **Fashion Hub** currently includes the following modules: * **Fashion Hint** – Similar and Complementary Product Suggestions * **Fashion Image Search** – Visual Search Based on Uploaded Images * **Fashion Looks** – AI-generated full outfits based on the viewed product This section outlines the requirements for integration, including product data formats, page structure prerequisites, and implementation details for each module. Use this documentation to ensure accurate configuration and optimal performance of the Fashion Hub features in your storefront. # Product Integration (XML Feed) Sizebay supports product integration via XML feeds based on the Google Merchant Center standard. This approach simplifies implementation while ensuring compatibility with e-commerce best practices ### 1. Requirements The XML feed should be segmented by each unique combination of country, language, and currency to ensure accurate localization. | Parameter | Description | Required for Separate Feed? | | ------------------ | --------------------------------------- | --------------------------- | | `target_country` | Country where the product is sold | ✅ | | `content_language` | Language used for product content | ✅ | | `currency` | Currency in which the product is priced | ✅ | > **Rule of thumb**:\ > You must provide **one XML feed per unique combination** of `target_country` + `content_language` + `currency` ### 2. XML Tags & Descriptions | Field | Description | Required | | --------------------------- | -------------------------------------------- | -------- | | `id` | Unique ID of the variant (e.g. color + size) | ✅ | | `item_group_id` | Common ID for all variants of a product | ✅ | | `title` | Product title (localized) | ✅ | | `description` | Product description (localized) | ❌ | | `link` | Product detail page URL (localized) | ✅ | | `image_link` | Main image of the variant | ✅ | | `additional_image_link` | Additional images for the variant | ❌ | | `brand` | Product brand | ✅ | | `product_type` | Product taxonomy (breadcrumb-style format) | ✅ | | `price` | Regular price | ✅ | | `sale_price` | Promotional price (if applicable) | ❌ | | `sale_price_effective_date` | Promotion date range (ISO 8601 format) | ❌ | | `availability` | Stock status (`in stock`, `out of stock`) | ✅ | | `size` | Variant size | ✅ | | `color` | Variant color | ❌ | | `gender` | Target gender (`male`, `female`, `unisex`) | ✅ | | `age_group` | Target age group (`adult`, `kids`) | ✅ | | `gtin` | GTIN / EAN / UPC | ❌ | ### 3. Sample XML Entry ``` <item> <id>12345-RED-M</id> <item_group_id>12345</item_group_id> <title>Basic Men's T-Shirt - Red Comfortable cotton t-shirt for daily wear. https://store.com/en/product/basic-tshirt-red https://store.com/img/12345-red.jpg https://store.com/img/12345-red_1.jpg Nike Apparel & Accessories > Clothing > Tops > T-Shirts 49.90 USD 39.90 USD 2025-06-01T00:00:00/2025-06-07T23:59:59 in stock M Red male adult 7891234567890 ``` ### 4. Feed Update Frequency Sizebay fetches your XML feed **once per day** at **05:00 AM (GMT+0)**. * **If the product does not exist**, it will be **automatically added** to our system. * **If the product already exists**, it will be **updated** based on changes in: * `title` * `price` * `sale_price` * `sale_price_effective_date` * `availability` > Make sure your XML is accessible and up-to-date before the scheduled fetch time. # Product Integration (API) This page explains how to create and update product data using the AI Image Service API by Sizebay. You can also explore and test the endpoints in the Swagger documentation. ### 1. Create Product `POST` `https://ai-image-service-dev.internalsizebay.com/products`\ \ **Description:** Submits a product for asynchronous processing. A callback will notify success or failure after processing. #### Headers | Header | Type | Required | Description | | ----------- | ------ | -------- | -------------------------- | | `x-api-key` | string | ✅ | API key for authentication | #### Body Parameters | Field | Type | Required | Description | | ------------------------- | ------ | -------- | -------------------------------------------- | | `tenantId` | number | ✅ | Tenant (client) ID | | `collectionName` | string | ✅ | Product collection name | | `processType` | string | ✅ | Type: `SIMILAR`, `COMPLEMENTARY`, `ALL` | | `brandName` | string | ✅ | Brand name | | `specialtyFromPersona` | string | ✅ | Product style (e.g., "casual fashion") | | `productItem.id` | string | ✅ | Unique ID of the variant (e.g. color + size) | | `productItem.itemGroupId` | string | ✅ | Common ID for all variants of a product | | `localizations` | object | ✅ | Language-specific title, link, availability | | `pricing` | object | ✅ | Prices by currency (price, salePrice, date) | | `productType` | string | ✅ | Category hierarchy | | `imageLink` | string | ✅ | Main image of the variant | | `additionalImageLinks` | array | Optional | Additional images for the variant | | `gender` | string | ✅ | `male`, `female`, `unisex` | | `ageGroup` | string | ✅ | `adult`, `kids` | | `size` | string | ✅ | Sizes, comma-separated (e.g., `S,M,L`) | | `sizeSystem` | string | ✅ | Size system (`BR`, `US`, etc.) | | `color` | string | ✅ | Product color | | `gtin` | string | Optional | Barcode (Global Trade Item Number) | #### Callback Notification After processing, a POST request is sent to your callback URL: ``` { "productId": "380145e972ee", "status": "success", "message": "Required only if status is 'error'" } ``` > Header `Authorization` will be included in the request. #### Payload Example ```json { "tenantId": 1234, "collectionName": "sizebay-collection", "processType": "SIMILAR", "brandName": "Sizebay", "specialtyFromPersona": "casual fashion", "productItem": { "id": "380145e972ee", "itemGroupId": "edb1e435d172", "localizations": { "en-US": { "title": "Classic White T-Shirt", "availability": "in stock", "link": "www.example.com/us/product" }, "pt-BR": { "title": "Camiseta Branca", "availability": "in stock", "link": "www.example.com/br/product" } }, "pricing": { "USD": { "price": 25, "salePrice": 19.99, "salePriceEffectiveDate": "2024-06-10T00:00:00/2024-06-20T23:59:59" }, "BRL": { "price": 99.9, "salePrice": 79.9, "salePriceEffectiveDate": "2024-06-10T00:00:00/2024-06-20T23:59:59" } }, "productType": "KIDS > MALE > BOTTOMS", "brand": "Sizebay", "imageLink": "www.example.com/image.jpg", "additionalImageLinks": [ "www.example.com/image.jpg" ], "gender": "unisex", "ageGroup": "adult", "size": "XS,S,M,L,XL", "sizeSystem": "BR", "color": "Blue", "gtin": "00012345678905" } } ``` #### Responses | Status | Meaning | | ------ | ------------------------------- | | 202 | Product accepted for processing | | 400 | Invalid or missing fields | | 500 | Internal server error | ### 2. Update Product `PATCH` `https://ai-image-service-dev.internalsizebay.com/products`
**Description:** Updates an existing product’s title, availability and pricing. #### Headers | Header | Type | Required | Description | | ----------- | ------ | -------- | -------------------------- | | `x-api-key` | string | ✅ | API key for authentication | #### Body Parameters | Field | Type | Required | Description | | ---------------- | ------ | -------- | --------------------------------------- | | `tenantId` | number | ✅ | Tenant ID | | `collectionName` | string | ✅ | Collection name | | `productId` | string | ✅ | ID of the product to update | | `localizations` | object | ✅ | Updated title & availability per locale | | `pricing` | object | ✅ | Updated prices per currency | #### Payload Example ```json { "tenantId": 123, "collectionName": "string", "productId": "FSW012345", "localizations": { "en-US": { "title": "Classic White T-Shirt", "availability": "in stock" }, "pt-BR": { "title": "Camiseta Branca", "availability": "in stock" } }, "pricing": { "USD": { "price": 25, "salePrice": 19.99, "salePriceEffectiveDate": "2024-06-10T00:00:00/2024-06-20T23:59:59" }, "BRL": { "price": 99.9, "salePrice": 79.9, "salePriceEffectiveDate": "2024-06-10T00:00:00/2024-06-20T23:59:59" } } } ``` #### Responses | Status | Meaning | | ------ | ---------------------------- | | 200 | Product updated successfully | | 400 | Invalid or missing fields | | 404 | Product not found | | 500 | Internal server error | ### 3. Swagger – Interactive API Explorer To simplify integration and testing, you can access the official [**Swagger API Reference**](https://ai-image-service-dev.internalsizebay.com/api/docs)**.** What you can do there: | Feature | Description | | ----------------- | --------------------------------------------------------------------------- | | Explore endpoints | View all available endpoints with descriptions and example payloads | | Test requests | Use the “Try it out” button to send test requests directly from the browser | | Validate payloads | Ensure your request structure matches the API’s expected schema | | Check responses | See example success and error responses | | Use your API key | Authenticate and test using your tenant’s `x-api-key` | > This tool is ideal for developers and integrators during setup, debugging, and ongoing maintenance. # Service Implementation (Script) ### 1. Creating the Necessary HTML Elements Add the HTML elements below to your pages, depending on which Fashion Hub modules your store will support:
Element PurposeHTML SnippetMandatory
Container for Fashion Hint – Similar

<div id="fashion-hint-similar"></div>
Yes (if Fashion Hint is contracted)
Container for Fashion Hint – Complementary

<div id="fashion-hint-complementary"></div>
Yes (if Fashion Hint is contracted)
Open Image Search button

<button id="openSearchModalButton">Search by Image</button>
Yes (if Image Search is contracted)
Open Image Search using the currently viewed product as the context
<div class="resultsButtonsWrapper">
  <button class="openResultsModalButton" data-tab="similar">Similar</button>
  <button class="openResultsModalButton" data-tab="complementary">Complementary</button>
</div>
Yes (if Image Search is contracted and you intend to display the additional CTAs)
Modal for Image Search

<div class="modal" id="imageSearchModal">
  <div class="modal-content small">
    <button class="close-button" id="closeSearchModalButton">&times;</button>
  </div>
</div>

Yes (if Image Search is contracted)
Modal for Image Search Results

<div class="modal" id="imageSearchResultsModal">
  <div class="modal-content large">
    <button class="close-button" id="closeResultsModalButton">&times;</button>
  </div>
</div>
Yes (if Image Search is contracted)
### 2. Script Injection To enable Sizebay's features on your store, you must include the following script in the `` of your HTML: ```html ``` > Replace `TENANT_ID` with your actual tenant ID. If you don't have it, please contact our team.\ > This script is required for the initialization of all Fashion Hub modules. # Service Implementation (SDK) If you want to have **full control over the layout** and design the Fashion Hub components the way that best fits your application — or even implement the solution inside **native mobile apps** — you can use our official SDK. The SDK allows you to directly interact with all Fashion Hub services, including product data handling, size recommendations, and tracking events, while giving you complete freedom on how to render and structure your UI. For more details and examples of usage, check the package documentation on npm:\ # Introduction Sizebay's Virtual Try-On is an augmented reality-powered fitting room that lets shoppers see how a garment looks on their own body before buying. Customers simply upload a photo and the technology overlays the selected product onto their image, delivering a true-to-life preview of fit and style without leaving the store. This documentation provides the technical guidelines for integrating Sizebay's Virtual Try-On into your store. # Product Page Identification Sizebay's Virtual Try-On does not maintain an internal product database. Instead, the VTR dynamically reads and interprets elements directly from your store's product page to generate each simulation in real time. This means no manual product registration is required — as long as the right elements are present and readable on the page, the VTR will work automatically. **Page Elements** The following elements are captured from the product page and used to generate accurate simulations: * **Product Image** — The primary image used to render the garment on the shopper's photo. For best results, make sure the product has a front-facing photo with good resolution and consistent positioning within the image carousel. Images that are cropped, angled, or vary in position across products may affect the quality of the simulation. * **Product Title** — Used to identify and contextualize the garment. * **Product Description** — Provides additional context about the product's fit, fabric, and style. * **Product Category** — Helps the VTR apply the correct simulation model for each garment type. * **Product Gender** — Ensures the simulation is rendered with the appropriate body reference. * **Product Age Group** — Used to apply the correct fit and body proportions (e.g., adult vs. children's sizing). The presence and accuracy of these elements directly impact the fidelity of the generated simulations. Incomplete or missing information may result in lower-quality or incorrect outputs. **Element Detection** Sizebay automatically inspects your product pages and captures these elements without any manual input from your team. However, if our system encounters difficulty identifying one or more elements — due to non-standard page structures, custom themes, or dynamic content loading — our team will reach out to request clarification or additional configuration from your side. # Service Implementation (Script) {% hint style="danger" %} **DO NOT MODIFY THE PRESCRIPT AND ITS CONTENTS.** It's also advised to **NOT CREATE AN IMPLEMENTATION WITHOUT SIZEBAY'S CONSENT. Both scenarios are considered by Sizebay as extraofficial and WE WILL NOT TAKE RESPONSABILITY FOR SUCH.** If there's a necessity to alter our script or anything that might be not working properly, please contact our support team at . {% endhint %} ### 1. Create an anchor element on your product page. You must include the container element that will display the button for the VTR on your product detailed page. You should place the element in the position **where you want the button to be displayed**. The excerpt below is an example of how this container could be included. Note the id attribute that was defined in it: your button must contain a valid id attribute. **This id will be used later when we are running the plugin's script.** ```html
``` ### 2. Including Sizebay HTML script We will now import the plugin script into your HTML. This snippet can be included in the header (**\**) or at the end of the HTML body (before **\**). Be in mind that in order to properly inject the plugin script, **Sizebay will provide you with all the required info** (e.g tenantId, the URL paths, etc). {% hint style="danger" %} The code below is an **example and should not be injected into your website**, as it serves only for **instructional reasons**. In order to get the correct URL, contact **** so we can guide you through the process. {% endhint %} ```html ``` # Service Implementation (API) Native iOS and Android integration via REST endpoint ### 1. What it is and when to use it The **Eligibility API** checks, in a single call, whether a product supports Virtual Try-On and returns the iframe URL ready to open in a WebView — no need to run JavaScript on the client side. Use this endpoint in native apps that don't have access to the store's DOM, for example when rendering a product page on iOS or Android. ### 2. Endpoint `POST` `https://tryon.internalsizebay.com/api/tryon/eligibility` #### Required header | Header | Value | | -------------- | ------------------ | | `Content-Type` | `application/json` | ### 3. Request body #### Full example ```json { "tenant_id": 6273, "sid": "user-session-abc123", "product_data": { "product_id": "sku-42", "permalink": "https://yourstore.com/produtos/polo", "lang": "en", "title": "Men's Polo Shirt", "category": "tops", "description": "Slim fit polo in pima cotton.", "price": "USD 149.90", "image_url": "https://cdn.yourstore.com/polo.jpg" } } ``` #### Root fields | Field | Type | Required | Description | | -------------- | ------ | -------- | ----------------------------------------------------------------------------- | | `tenant_id` | number | **✓** | Numeric ID of your Sizebay tenant | | `sid` | string | **✓** | User session identifier (max. 512 chars). Used for analytics inside the modal | | `product_data` | object | **✓** | Product data — see table below | #### `product_data` fields | Field | Type | Required | Limit | Description | | ------------- | ------------- | -------- | ---------- | -------------------------------------------------------------------------------- | | `product_id` | string | **✓** | 256 chars | Unique product identifier in the catalog | | `permalink` | string (URL) | **✓** | 2048 chars | Canonical URL of the product page | | `lang` | string (enum) | **✓** | — | Modal language. Example: `pt`, `en`, `es`, `it` | | `title` | string | **✓ \*** | 512 chars | Product name. Used to infer the category when `category` isn't sent | | `category` | string | **✓ \*** | 256 chars | Product category. Accepts free text (`"tops"`) or a direct enum (`"UPPER_BODY"`) | | `description` | string | — | 2000 chars | Product description | | `price` | string | — | 64 chars | Display price, e.g.: `"R$ 149,90"` | | `image_url` | string (URL) | — | 2048 chars | URL of the main product image | ### 4. Responses **200 — Eligible product:** open the `iframe_url` in a WebView ```json { "ok": true, "eligible": true, "category": "UPPER_BODY", "iframe_url": "https://tryon.internalsizebay.com/tryon/index.html?productData=...&tenantId=6273&..." } ``` **200 — Ineligible product:** don't display the Try-On button ```json { "ok": true, "eligible": false, "reason": "UNSUPPORTED_CATEGORY", "message": "Product category could not be mapped to a supported try-on category..." } ``` **400 — Validation error:** missing or invalid field ```json { "ok": false, "error_code": "MISSING_FIELDS", "message": "\"tenant_id\" is required" } ``` #### `reason` codes (ineligible) | `reason` | Meaning | | ---------------------- | ------------------------------------------------------------------------ | | `UNSUPPORTED_CATEGORY` | The product category couldn't be mapped to any supported Try-On category | | `UNKNOWN_TENANT` | The provided `tenant_id` wasn't found or is inactive | ### 5. Supported categories If your app already has a structured taxonomy, pass the enum directly in `category` to skip text-based inference. | Returned enum | Recognized product types | | ------------- | ---------------------------------------------------------------- | | `UPPER_BODY` | Tops, t-shirts, blouses, jackets, hoodies, blazers, coats, polos | | `LOWER_BODY` | Pants, jeans, skirts, shorts, leggings, bermudas | | `FULL_BODY` | Dresses, jumpsuits, gowns | | `FOOTWEAR` | Shoes, sneakers, boots, sandals, flip-flops | | `BAGS` | Bags, backpacks, wallets | | `HEAD` | Caps, hats, sunglasses, helmets, earrings, necklaces | ### 6. Integrate into the app (iOS / Android) When you receive `"eligible": true`, open the `iframe_url` in a WebView with camera permission enabled.