AI Sizing

Prerequisites — before implementing AI Sizing, complete the Cookie consent and Installation steps on the JS Library page. Kleep must not load until the visitor has consented via your CMP, and the library must be loaded site-wide.

Methods

`kleep.load` — Display Kleep’s CTA

Initialize the widget with kleep.load:

<script>kleep.load({ /* ...params */ })</script>

Add a container where the widget should be displayed on the product page:
<div id="kleep-container"></div>

This div is used to append our button inside. We leave CSS styling of the button to you during the implementation.

Parameters

kleep.load should be called on each product page (PDP) to load Kleep’s CTA, with the following parameters:

Parameter	Type	Description	Priority
`public_id`	UUID	The UUID provided to you during onboarding	required
`product_id`	string \| array	Product ID(s) of the PDP on which `kleep.load` is called. A single string applies to every selector; an array must match `selectors.sizing` (see warning below).	required
`customer_id`	string	ID of the connected customer (must match what is sent via data transfers)	optional
`lang`	string	Current language of the page. Follow ISO 639-1. Default: `fr`. See list of supported languages below.	required
`market`	string	Country code (location of the website visitor). Follow ISO 3166-1 alpha-2. Default: `null`. See list of supported markets below.	optional
`selectors.sizing`	array	HTML selectors of the sizing button wrapper(s). Pass multiple to add several CTAs on the same PDP.	required
`getSizes`	async function	Returns the available sizes as an array of `{ variantId, quantity }` so the widget can check whether recommended sizes are in stock.	required for that usage, otherwise optional
`addToCart`	async function	Receives a `variantId` as input and adds the matching product variant to the cart.	required for that usage, otherwise optional
`selectSize`	async function	Receives a `variantId` as input and selects the matching variant in your storefront UI (lets the customer skip one click).	required for that usage, otherwise optional
`callbacks`	object	Custom callbacks behind the extra drawer buttons configured for your account (e.g. `notifyMe`, `contactUs`). See Custom callbacks below.	optional

If lang or market don’t follow their respective conventions or aren’t supported, you’ll see a console warning.

Matching product_id with selectors.sizing. These two control which product is shown in which container, so they have to line up:

One product in one or several containers → pass product_id as a single string. The same product is applied to every selector in selectors.sizing.
Different products, one per container → pass product_id as an array with the same length as selectors.sizing. They are paired by index, so the order must match (product_id[0] → selectors.sizing[0], and so on).

If product_id is an array whose length is different from selectors.sizing, no CTA is rendered at all and a warning is logged in the console (it prints both lengths and values). For example, product_id: ["sku-1"] (1 item) with two selectors fails silently — fix it by repeating the id (["sku-1", "sku-1"]) or passing it as a string ("sku-1").

Supported languages (ISO 639-1)

If a language you need isn’t in the list below, please contact your Kleep representative.

fr — French (default)
ar — Arabic
br — Brazilian
da — Danish
de — German
el — Greek
en — English
es — Spanish
fi — Finnish
hu — Hungarian
id — Indonesian
it — Italian
ja — Japanese
ko — Korean
nl — Dutch
pl — Polish
pt — Portuguese
ru — Russian
sv — Swedish
th — Thai
vi — Vietnamese
zh — Chinese (Simplified)
zht — Chinese (Traditional)

Regional tags are accepted too (en-GB, fr_CA…): zh-TW, zh-HK and zh-Hant select Traditional Chinese.

Editing widget copy per language. Once integrated, you can fine-tune the widget’s default text - button labels, intro copy, consent notices, etc. - for each of your supported languages directly from your Kleep Dashboard. See Web Translations.

Supported markets (ISO 3166-1 alpha-2)

AF, AX, AL, DZ, AD, AO, AI, AG, AR, AM, AW, AC, AU, AT, AZ, BS, BH, BD, BB, BY, BE, BZ, BJ, BM, BT, BO, BA, BW, BV, BR, IO, BN, BG, BF, BI, KH, CA, CV, BQ, KY, CF, TD, CL, CN, CX, CC, CO, KM, CG, CD, CK, CR, HR, CU, CW, CY, CZ, CI, DK, DJ, DM, DO, EC, EG, SV, GQ, ER, EE, SZ, ET, FK, FO, FJ, FI, FR, GF, PF, TF, GA, GM, GE, DE, GH, GI, GR, GL, GD, GP, GT, GG, GN, GW, GY, HT, HM, VA, HN, HK, HU, IS, IN, ID, IR, IQ, IE, IM, IL, IT, JM, JP, JE, JO, KZ, KE, KI, KP, XK, KW, KG, LA, LV, LB, LS, LR, LY, LI, LT, LU, MO, MG, MW, MY, MV, ML, MT, MQ, MR, MU, YT, MX, MD, MC, MN, ME, MS, MA, MZ, MM, NA, NR, NP, NL, AN, NC, NZ, NI, NE, NG, NU, NF, MK, NO, OM, PK, PS, PA, PG, PY, PE, PH, PN, PL, PT, QA, CM, RE, RO, RU, RW, BL, SH, KN, LC, MF, PM, WS, SM, ST, SA, SN, RS, SC, SL, SG, SX, SK, SI, SB, SO, ZA, GS, KR, SS, ES, LK, VC, SD, SR, SJ, SE, CH, SY, TW, TJ, TZ, TH, TL, TG, TK, TO, TT, TA, TN, TR, TM, TC, TV, UG, UA, AE, GB, US, UM, UY, UZ, VU, VE, VN, VG, WF, EH, YE, ZM, ZW, ZZ

Example

kleep.load({
  public_id: "UUID",
  product_id: ["id_1", "id_2"],
  customer_id: "customer_test",
  lang: "fr-FR",
  market: "EU",
  selectors: {
    sizing: ["#kleep-container-1", "#kleep-container-2"]
  },
  getSizes: async () => {
    return [
      { variantId: "variant-XYZ-XS", quantity: true },
      { variantId: "variant-XYZ-S", quantity: true },
      { variantId: "variant-XYZ-M", quantity: false },
      { variantId: "variant-XYZ-L", quantity: false },
      { variantId: "variant-XYZ-XL", quantity: true },
    ]
  },
  addToCart: async variantId => {
    document.querySelector(".sizes").value = variantId
    document.querySelector(".addToCart").click()
  },
  selectSize: async variantId => {
    document.querySelector(".sizes").value = variantId
  }
})

While implementing, you can use this test config:

public_id: "aadb1934-6e16-4c8a-a7cb-1fd6e00dd02c"
product_id: "12345"
variantIds to use for the callbacks (with their corresponding size label):

`variantId`	Size
`a`	34
`b`	36
`c`	38
`d`	40
`e`	42

Custom callbacks

Besides getSizes, addToCart and selectSize, kleep.load accepts custom callbacks under callbacks. They work the same way: a button in the drawer, and when the visitor clicks it, Kleep calls your function. Each custom button is set up by Kleep for your account during onboarding (label, translations, and when it appears — for example when the recommended size is out of stock); you only implement the function.

Parameter	Type	Description	Priority
`callbacks`	object	Map of custom callback name → `async function`. Names are agreed with Kleep when the buttons are configured. A button whose callback is missing isn’t displayed.	optional

Each callback receives the variantId of the size the visitor was looking at (null when getSizes isn’t implemented), and a second argument with productId and size.

kleep.load({
  public_id: "UUID",
  product_id: "id_1",
  lang: "fr",
  selectors: { sizing: ["#kleep-container"] },
  getSizes: async () => [ /* ... */ ],
  addToCart: async variantId => { /* ... */ },
  callbacks: {
    // "Notify me" button, shown when the recommended size is out of stock
    notifyMe: async (variantId, { productId, size }) => {
      openBackInStockForm({ productId, variantId, size })
    },
    // "Contact us" button, shown when the recommended size is out of stock
    contactUs: async (variantId, { productId, size }) => {
      openClientAdvisorChat({ productId, size })
    }
  }
})

`kleep.requestSize` — Get the recommended size on a PDP

Call kleep.requestSize on each product page to get the visitor’s recommended size for that product, without opening the drawer. It is meant to be called on every PDP, including products Kleep can’t size: it then resolves with success: false and you display nothing. It works in two modes:

Return only — Kleep returns the recommended size and you build your own element and wording around it.
Fill an element — you pass a selector; Kleep writes the recommended size into that element as plain text (not a button), with the same wording as the “Recommended size” state of the CTA created by kleep.load, translated in the page’s lang (editable in your Dashboard under Web Translations). The element is left untouched when there is nothing to display.

const result = await kleep.requestSize({
  public_id: "UUID",
  product_id: "id_1",
  lang: "fr",
  market: "FR",
  selector: "#kleep-recommended-size" // optional: fill mode
})

Parameters

Parameter	Type	Description	Priority
`public_id`	UUID	The UUID provided to you during onboarding. Defaults to the value given to `kleep.load` when it already ran on the page.	required
`product_id`	string	Product ID of the PDP. Must match the `product_id` passed to `kleep.load` for this product.	required
`lang`	string	Current language of the page (ISO 639-1), see the supported languages above. Defaults to the value given to `kleep.load`.	required
`market`	string	Country code (ISO 3166-1 alpha-2). Defaults to the value given to `kleep.load`.	optional
`customer_id`	string	ID of the connected customer, same as in `kleep.load`.	optional
`selector`	string	HTML selector of the element to fill with the recommended size text (fill mode). Without it, nothing is written to the page.	optional

Return value

A Promise resolving to an object. It never rejects: errors resolve with success: false.

Field	Type	Description
`success`	boolean	`true` when a recommended size is available for this product and visitor.
`size`	string \| null	The recommended size, in the product’s own nomenclature (the label you sell it under). `null` when `success` is `false`.
`label`	string \| null	The full text written in fill mode, e.g. `"Recommended size: M"`, so you can reuse the same wording in return-only mode. `null` when `success` is `false`.
`reason`	string \| null	Why there is no size, when `success` is `false`: `not_recommendable` (Kleep has no sizing for this product — display nothing), `no_profile` (the product can be sized but the visitor hasn’t completed the questionnaire yet — display your “find my size” entry point instead), `error`.

// Return-only mode
const { success, size, reason } = await kleep.requestSize({ public_id: "UUID", product_id: "id_1", lang: "fr" })

if (success) {
  document.querySelector("#size-hint").textContent = `Your size: ${size}`
} else if (reason === "no_profile") {
  document.querySelector("#size-hint").textContent = "Answer a few questions to find your ideal size"
}
// reason === "not_recommendable" → leave the element empty

// Fill mode
const { success } = await kleep.requestSize({ public_id: "UUID", product_id: "id_1", lang: "fr", selector: "#size-hint" })

kleep.requestSize only reads the visitor’s existing Kleep profile: it never opens the drawer or asks questions, and it returns sizes only — never the visitor’s measurements or identifiers. Call it again when the product displayed changes (single-page apps) or after the drawer closes, so the label follows the latest profile.

`kleep.createButton` — Recreate Kleep’s CTA

In some cases your website might rebuild components or reload state variables, causing Kleep’s CTA to disappear. Call kleep.createButton to make it reappear. No parameter is needed — it reuses the information you provided when calling kleep.load, so make sure kleep.load ran first.

`kleep.track` — Enable tracking & Dashboard access

On top of the sizing functionality, we add tracking so you can measure how the solution performs on your website. Use kleep.track(event_type, event_info) to send information each time a tracked event occurs.

These events track your store’s standard customer journey — a product being viewed, added to cart, or purchased through your usual storefront flow. They are not Kleep-specific actions (e.g. an add-to-cart triggered from the Kleep widget); fire each one wherever it naturally happens on your site.

We track three events:

Event type	Trigger	Priority
`product_viewed`	Upon PDP viewed	`required`
`product_added_to_cart`	Upon product added to the cart	`required`
`checkout_completed`	Upon order confirmation after payment	`required`

`product_viewed`

kleep.track("product_viewed", {
  productId: "123ABC456"
})

`product_added_to_cart`

kleep.track("product_added_to_cart", {
  productId: "123ABC456",
  variantId: "123ABC456-00R",
  cart: [
    {
      productId: "123ABC456",
      variantId: "123ABC456-00R",
      sku: "XYZ",
      size: "S",
      quantity: 2,
      price: {
        amount: "50",
        currencyCode: "EUR"
      }
    },
    {
      productId: "123ABC456",
      variantId: "123ABC456-00R",
      sku: "XYZ",
      size: "S",
      quantity: 1,
      price: {
        amount: "40",
        currencyCode: "USD"
      }
    }
    // ...
  ],
})

`checkout_completed`

kleep.track("checkout_completed", {
  orderId: "000001",
  cart: [
    {
      lineItemId: "000001#1",
      productId: "123ABC456",
      variantId: "123ABC456-00R",
      sku: "XYZ",
      size: "S",
      quantity: 2,
      price: {
        amount: "50",
        currencyCode: "EUR"
      }
    },
    {
      lineItemId: "000000#2",
      productId: "123ABC456",
      variantId: "123ABC456-00R",
      sku: "XYZ",
      size: "S",
      quantity: 1,
      price: {
        amount: "40",
        currencyCode: "USD"
      }
    }
    // ...
  ],
})

`kleep.getTrackingId` — Get internal Kleep ID

For custom use cases, you can retrieve one of the visitor’s Kleep internal IDs. It returns either:

null — if the visitor has not used Kleep, or
a UUID — if the visitor has a Kleep tracking ID

Cookies & data privacy

Kleep is fully gated by visitor consent: the script only loads after consent is collected through your CMP, and you must condition its loading accordingly. For the complete list of trackers, the data processed, the purposes and legal bases, hosting, subprocessors and security, see Cookies, CMP & Data Privacy.

Welcome

CMS

Mobile

Data

Privacy

Methods

`kleep.load` — Display Kleep’s CTA

Parameters

Example

Custom callbacks

`kleep.requestSize` — Get the recommended size on a PDP

Parameters

Return value

`kleep.createButton` — Recreate Kleep’s CTA

`kleep.track` — Enable tracking & Dashboard access

`product_viewed`

`product_added_to_cart`

`checkout_completed`

`kleep.getTrackingId` — Get internal Kleep ID

Cookies & data privacy

​Methods

​kleep.load — Display Kleep’s CTA

​Parameters

​Example

​Custom callbacks

​kleep.requestSize — Get the recommended size on a PDP

​Parameters

​Return value

​kleep.createButton — Recreate Kleep’s CTA

​kleep.track — Enable tracking & Dashboard access

​product_viewed

​product_added_to_cart

​checkout_completed

​kleep.getTrackingId — Get internal Kleep ID

​Cookies & data privacy

Methods

`kleep.load` — Display Kleep’s CTA

Parameters

Example

Custom callbacks

`kleep.requestSize` — Get the recommended size on a PDP

Parameters

Return value

`kleep.createButton` — Recreate Kleep’s CTA

`kleep.track` — Enable tracking & Dashboard access

`product_viewed`

`product_added_to_cart`

`checkout_completed`

`kleep.getTrackingId` — Get internal Kleep ID

Cookies & data privacy