> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kleep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# JS Library

> Installeer en configureer de Kleep AI Sizing-widget op elke webwinkel via onze JavaScript-bibliotheek.

Deze handleiding beschrijft hoe u de Kleep AI Sizing-widget op elke webwinkel installeert met behulp van onze JavaScript-bibliotheek. Gebruik deze handleiding samen met de platformspecifieke backend-integratiehandleiding (Prestashop, Magento, WooCommerce, WShop, enz.) — die verwerkt de gegevensinvoer, terwijl deze handleiding de front-end CTA op uw productpagina's behandelt.

## 1. Cookietoestemming (wettelijke vereiste)

<Warning>
  Het laden van Kleep verwerkt persoonsgegevens via cookies en vergelijkbare technologieën. U bent daarom **wettelijk verplicht het laden van Kleep te conditioneren op de voorafgaande cookietoestemming van de bezoeker** — roep `kleep.load` niet aan (en laad de bibliotheek niet) totdat de bezoeker de relevante cookies heeft geaccepteerd in uw Consent Management Platform (CMP).
</Warning>

<Note>
  Concreet: blokkeer de `<script src="https://module.kleep.ai/api/widget">` tag en de `kleep.load(...)` aanroep achter de toestemmingscallback van uw CMP, zodat ze alleen worden uitgevoerd nadat toestemming is verleend voor beide doeleinden. Als de toestemming later wordt ingetrokken, stop dan met het laden van Kleep bij volgende paginaweergaven.
</Note>

Uw CMP moet **twee verwerkingsdoeleinden** blootstellen, en Kleep mag alleen worden geladen nadat de bezoeker met beide heeft ingestemd. De exacte tekst die u in uw banner weergeeft — in 15 talen — staat op de pagina [Cookies, CMP & Gegevensprivacy](/nl/cookie-consent). Kopieer de tekst vanaf die pagina.

## 2. Installatie

Om te beginnen, voeg het JavaScript-bestand van de widget toe aan uw project.

Voeg het volgende toe vóór `</body>`:

```html theme={null}
<script src="https://module.kleep.ai/api/widget"></script>
```

<Tip>
  **Logboeken bekijken tijdens de integratie.** Standaard werkt de widget stilzwijgend. Om de volledige `[KLEEP] [Widget]`-logboeken (laadstroom, parameters, CTA-aanmaak, enz.) in uw browserconsole te tonen, voegt u `?debug=true` toe aan de bibliotheek-URL:

  ```html theme={null}
  <script src="https://module.kleep.ai/api/widget?debug=true"></script>
  ```

  Deze URL-vlag is de enige manier om de uitgebreide logboeken in te schakelen — er is geen `debug`-optie op `kleep.load(...)`. Kritieke waarschuwingen (niet-ondersteunde `lang`/`market`, `product_id`/`selectors`-mismatch, `kleep.load` tweemaal aanroepen) worden **altijd** weergegeven, ook zonder deze vlag. Verwijder `?debug=true` in productie.
</Tip>

## 3. Methoden

### 3.1. `kleep.load` — Kleep's CTA weergeven

1. Initialiseer de widget met `kleep.load`:

   ```html theme={null}
   <script>kleep.load({ /* ...params */ })</script>
   ```

2. Voeg een container toe waar de widget op de productpagina moet worden weergegeven:

   ```html theme={null}
   <div id="kleep-container"></div>
   ```

<Note>
  Deze div wordt gebruikt om onze knop in te plaatsen. De CSS-stijl van de knop laten we tijdens de implementatie aan u over.
</Note>

#### Parameters

`kleep.load` moet op elke productpagina (PDP) worden aangeroepen om de CTA van Kleep te laden, met de volgende parameters:

| Parameter          | Type            | Beschrijving                                                                                                                                                                                            | Prioriteit                                 |
| ------------------ | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `public_id`        | UUID            | De UUID die u tijdens de onboarding heeft ontvangen                                                                                                                                                     | **vereist**                                |
| `product_id`       | string \| array | Product-ID('s) van de PDP waarop `kleep.load` wordt aangeroepen. Een enkele string wordt op elke selector toegepast; een array moet overeenkomen met `selectors.sizing` (zie waarschuwing hieronder).   | **vereist**                                |
| `customer_id`      | string          | ID van de ingelogde klant (moet overeenkomen met wat via gegevensoverdrachten wordt verzonden)                                                                                                          | optioneel                                  |
| `lang`             | string          | Huidige taal van de pagina. Volg [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes). Standaard: `fr`. Zie de lijst met ondersteunde talen hieronder.                             | **vereist**                                |
| `market`           | string          | Landcode (locatie van de websitebezoeker). Volg [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes). Standaard: `null`. Zie de lijst met ondersteunde markten hieronder. | optioneel                                  |
| `selectors.sizing` | array           | HTML-selectors van de wrapper(s) voor de maatknop. Geef meerdere door om meerdere CTA's op dezelfde PDP toe te voegen.                                                                                  | **vereist**                                |
| `getSizes`         | async function  | Geeft de beschikbare maten terug als een array van `{ variantId, quantity }` zodat de widget kan controleren of aanbevolen maten op voorraad zijn.                                                      | vereist voor dat gebruik, anders optioneel |
| `addToCart`        | async function  | Ontvangt een `variantId` als invoer en voegt de bijbehorende productvariant toe aan de winkelwagen.                                                                                                     | vereist voor dat gebruik, anders optioneel |
| `selectSize`       | async function  | Ontvangt een `variantId` als invoer en selecteert de bijbehorende variant in de UI van uw webwinkel (bespaart de klant één klik).                                                                       | vereist voor dat gebruik, anders optioneel |

<Note>
  Als `lang` of `market` niet voldoen aan de respectieve conventies of niet worden ondersteund, krijgt u een consolewaarschuwing te zien.
</Note>

<Warning>
  **`product_id` afstemmen op `selectors.sizing`.** Deze twee bepalen welk product in welke container wordt weergegeven, dus ze moeten op elkaar aansluiten:

  * **Één product in één of meerdere containers** → geef `product_id` door als een **enkele string**. Hetzelfde product wordt toegepast op elke selector in `selectors.sizing`.
  * **Verschillende producten, één per container** → geef `product_id` door als een **array met dezelfde lengte als `selectors.sizing`**. Ze worden per index gekoppeld, dus de volgorde moet overeenkomen (`product_id[0]` → `selectors.sizing[0]`, enzovoort).

  Als `product_id` een array is met een **andere** lengte dan `selectors.sizing`, wordt **geen CTA weergegeven** en wordt een waarschuwing in de console gelogd (met beide lengtes en waarden). Bijvoorbeeld: `product_id: ["sku-1"]` (1 item) met twee selectors mislukt stil — herstel dit door het id te herhalen (`["sku-1", "sku-1"]`) of het als string door te geven (`"sku-1"`).
</Warning>

<Accordion title="Ondersteunde talen (ISO 639-1)">
  Neem contact op met uw Kleep-vertegenwoordiger als een taal die u nodig heeft niet in de onderstaande lijst staat.

  * `fr` — Frans (standaard)
  * `br` — Braziliaans
  * `da` — Deens
  * `de` — Duits
  * `en` — Engels
  * `es` — Spaans
  * `fi` — Fins
  * `it` — Italiaans
  * `ja` — Japans
  * `ko` — Koreaans
  * `nl` — Nederlands
  * `pl` — Pools
  * `pt` — Portugees
  * `sv` — Zweeds
  * `zh` — Chinees
</Accordion>

<Accordion title="Ondersteunde markten (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
</Accordion>

#### Voorbeeld

```javascript theme={null}
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
  }
})
```

<Tip>
  Tijdens de implementatie kunt u deze testconfiguratie gebruiken:

  * `public_id`: `"aadb1934-6e16-4c8a-a7cb-1fd6e00dd02c"`
  * `product_id`: `"12345"`
  * Te gebruiken `variantId`'s voor de callbacks (met het bijbehorende maatlabel):

  | `variantId` | Maat |
  | ----------- | ---- |
  | `a`         | 34   |
  | `b`         | 36   |
  | `c`         | 38   |
  | `d`         | 40   |
  | `e`         | 42   |
</Tip>

### 3.2. `kleep.createButton` — Kleep's CTA opnieuw aanmaken

In sommige gevallen kan uw website componenten herbouwen of toestandsvariabelen opnieuw laden, waardoor de CTA van Kleep verdwijnt. Roep `kleep.createButton` aan om deze opnieuw te laten verschijnen.

Er is geen parameter nodig — de methode hergebruikt de informatie die u heeft opgegeven bij het aanroepen van `kleep.load`; zorg er dus voor dat `kleep.load` eerst is uitgevoerd.

### 3.3. `kleep.track` — Tracking en dashboardtoegang inschakelen

Bovenop de maatfunctionaliteit voegen we tracking toe zodat u kunt meten hoe de oplossing presteert op uw website. Gebruik `kleep.track(event_type, event_info)` om informatie te versturen telkens wanneer een bijgehouden gebeurtenis plaatsvindt.

We volgen drie gebeurtenissen:

| Gebeurtenistype         | Trigger                                   | Prioriteit |
| ----------------------- | ----------------------------------------- | ---------- |
| `product_viewed`        | Bij weergave van PDP                      | `required` |
| `product_added_to_cart` | Bij toevoegen van product aan winkelwagen | `required` |
| `checkout_completed`    | Bij orderbevestiging na betaling          | `required` |

#### `product_viewed`

```javascript theme={null}
kleep.track("product_viewed", {
  productId: "123ABC456"
})
```

#### `product_added_to_cart`

```javascript theme={null}
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`

```javascript theme={null}
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"
      }
    }
    // ...
  ],
})
```

### 3.4. `kleep.getTrackingId` — Intern Kleep-ID ophalen

Voor aangepaste gebruiksscenario's kunt u een van de interne Kleep-ID's van de bezoeker ophalen.

De methode geeft één van de volgende waarden terug:

* `null` — als de bezoeker Kleep nog niet heeft gebruikt, of
* een UUID — als de bezoeker een Kleep-tracking-ID heeft

***

## Cookies en gegevensprivacy

Kleep is volledig afhankelijk van de toestemming van de bezoeker: het script wordt alleen geladen **nadat** toestemming is verkregen via uw CMP, en u moet het laden dienovereenkomstig conditioneren. Zie [Cookies, CMP & Gegevensprivacy](/nl/cookie-consent) voor de volledige lijst van trackers, de verwerkte gegevens, de doeleinden en rechtsgrondslagen, hosting, subverwerkers en beveiliging.