JS Library

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)

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).

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.

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. 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>:

<script src="https://module.kleep.ai/api/widget"></script>

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:

<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.

3. Methoden

3.1. `kleep.load` — Kleep’s CTA weergeven

Initialiseer de widget met kleep.load:

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

Voeg een container toe waar de widget op de productpagina moet worden weergegeven:
<div id="kleep-container"></div>

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

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. Standaard: `fr`. Zie de lijst met ondersteunde talen hieronder.	vereist
`market`	string	Landcode (locatie van de websitebezoeker). Volg ISO 3166-1 alpha-2. 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

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

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").

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

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

Voorbeeld

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
  }
})

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

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`

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"
      }
    }
    // ...
  ],
})

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 voor de volledige lijst van trackers, de verwerkte gegevens, de doeleinden en rechtsgrondslagen, hosting, subverwerkers en beveiliging.

Welkom

CMS

Mobiel

Dashboard

Gegevens

Privacy

1. Cookietoestemming (wettelijke vereiste)

2. Installatie

3. Methoden

3.1. `kleep.load` — Kleep’s CTA weergeven

Parameters

Voorbeeld

3.2. `kleep.createButton` — Kleep’s CTA opnieuw aanmaken

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

`product_viewed`

`product_added_to_cart`

`checkout_completed`

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

Cookies en gegevensprivacy

​1. Cookietoestemming (wettelijke vereiste)

​2. Installatie

​3. Methoden

​3.1. kleep.load — Kleep’s CTA weergeven

​Parameters

​Voorbeeld

​3.2. kleep.createButton — Kleep’s CTA opnieuw aanmaken

​3.3. kleep.track — Tracking en dashboardtoegang inschakelen

​product_viewed

​product_added_to_cart

​checkout_completed

​3.4. kleep.getTrackingId — Intern Kleep-ID ophalen

​Cookies en gegevensprivacy

1. Cookietoestemming (wettelijke vereiste)

2. Installatie

3. Methoden

3.1. `kleep.load` — Kleep’s CTA weergeven

Parameters

Voorbeeld

3.2. `kleep.createButton` — Kleep’s CTA opnieuw aanmaken

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

`product_viewed`

`product_added_to_cart`

`checkout_completed`

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

Cookies en gegevensprivacy