JS Library

Denne guide dækker installation af Kleep AI Sizing-widgetten på enhver butiksfacade ved hjælp af vores JavaScript-bibliotek. Brug den sammen med den platformsspecifikke backend-integrationsguide (Prestashop, Magento, WooCommerce, WShop osv.) — den håndterer dataindsamling, mens denne guide håndterer frontend-CTA’en på dine produktsider.

Indlæsning af Kleep behandler persondata via cookies og lignende teknologier. Du skal derfor juridisk betinge indlæsningen af Kleep på besøgendes forudgående samtykke til cookies — kald ikke kleep.load (eller indlæs biblioteket), før den besøgende har accepteret de relevante cookies i din samtykkehåndteringsplatform (CMP).

Konkret: sæt <script src="https://module.kleep.ai/api/widget">-tagget og kleep.load(...)-kaldet bag din CMP’s samtykkecallback, så de kun kører efter samtykke er givet til begge formål. Hvis samtykke efterfølgende trækkes tilbage, skal du stoppe med at indlæse Kleep ved efterfølgende sidevisninger.

Din CMP skal eksponere to behandlingsformål, og Kleep må kun indlæses, når den besøgende har samtykket til begge. Den nøjagtige formulering til dit banner — på 15 sprog — findes på siden Cookies, CMP & Databeskyttelse. Kopiér den derfra.

2. Installation

For at komme i gang skal du inkludere widgettens JavaScript-fil i dit projekt. Før </body> skal du tilføje:

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

Se logfiler mens du integrerer. Som standard kører widgetten lydløst. For at udskrive de fulde [KLEEP] [Widget]-logfiler (indlæsningsflow, parametre, CTA-oprettelse osv.) i din browserkonsol skal du tilføje ?debug=true til biblioteks-URL’en:

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

Dette URL-flag er den eneste måde at aktivere de detaljerede logfiler på — der er ingen debug-mulighed på kleep.load(...). Kritiske advarsler (ikke-understøttet lang/market, product_id/selectors-mismatch, kald af kleep.load to gange) vises altid, selv uden dette flag. Fjern ?debug=true i produktion.

3. Metoder

3.1. `kleep.load` — Vis Kleeps CTA

Initialisér widgetten med kleep.load:

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

Tilføj en container, hvor widgetten skal vises på produktsiden:
<div id="kleep-container"></div>

Denne div bruges til at tilføje vores knap inde i. Vi overlader CSS-styling af knappen til dig under implementeringen.

Parametre

kleep.load skal kaldes på hver produktside (PDP) for at indlæse Kleeps CTA, med følgende parametre:

Parameter	Type	Beskrivelse	Prioritet
`public_id`	UUID	Den UUID der er udleveret til dig under onboarding	påkrævet
`product_id`	string \| array	Produkt-ID(er) for den PDP, som `kleep.load` kaldes på. En enkelt streng gælder for alle selektorer; et array skal matche `selectors.sizing` (se advarsel nedenfor).	påkrævet
`customer_id`	string	ID for den tilsluttede kunde (skal matche det der sendes via dataoverførsler)	valgfri
`lang`	string	Sidens aktuelle sprog. Følg ISO 639-1. Standard: `fr`. Se listen over understøttede sprog nedenfor.	påkrævet
`market`	string	Landekode (placeringen af websitebesøgende). Følg ISO 3166-1 alpha-2. Standard: `null`. Se listen over understøttede markeder nedenfor.	valgfri
`selectors.sizing`	array	HTML-selektorer til størrelsesknappens wrapper(s). Angiv flere for at tilføje flere CTA’er på samme PDP.	påkrævet
`getSizes`	async function	Returnerer de tilgængelige størrelser som et array af `{ variantId, quantity }`, så widgetten kan tjekke om anbefalede størrelser er på lager.	påkrævet til den pågældende brug, ellers valgfri
`addToCart`	async function	Modtager et `variantId` som input og lægger den tilsvarende produktvariant i kurven.	påkrævet til den pågældende brug, ellers valgfri
`selectSize`	async function	Modtager et `variantId` som input og vælger den tilsvarende variant i din butiksfacade-UI (lader kunden springe et klik over).	påkrævet til den pågældende brug, ellers valgfri

Hvis lang eller market ikke følger deres respektive konventioner eller ikke understøttes, vil du se en konsoladvarsel.

Matching af product_id med selectors.sizing. Disse to styrer, hvilket produkt der vises i hvilken container, så de skal stemme overens:

Ét produkt i én eller flere containere → angiv product_id som en enkelt streng. Det samme produkt anvendes på alle selektorer i selectors.sizing.
Forskellige produkter, ét pr. container → angiv product_id som et array med samme længde som selectors.sizing. De parres efter indeks, så rækkefølgen skal matche (product_id[0] → selectors.sizing[0], osv.).

Hvis product_id er et array, hvis længde er forskellig fra selectors.sizing, gengives ingen CTA overhovedet og en advarsel logges i konsollen (den udskriver begge længder og værdier). For eksempel vil product_id: ["sku-1"] (1 element) med to selektorer fejle lydløst — fix det ved at gentage id’et (["sku-1", "sku-1"]) eller angive det som en streng ("sku-1").

Understøttede sprog (ISO 639-1)

Hvis et sprog du har brug for ikke er på listen nedenfor, bedes du kontakte din Kleep-repræsentant.

fr — Fransk (standard)
br — Brasiliansk
da — Dansk
de — Tysk
en — Engelsk
es — Spansk
fi — Finsk
it — Italiensk
ja — Japansk
ko — Koreansk
nl — Nederlandsk
pl — Polsk
pt — Portugisisk
sv — Svensk
zh — Kinesisk

Understøttede markeder (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

Eksempel

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

Under implementering kan du bruge denne testkonfiguration:

public_id: "aadb1934-6e16-4c8a-a7cb-1fd6e00dd02c"
product_id: "12345"
variantId’er til brug for callbacks (med deres tilsvarende størrelseslabel):

`variantId`	Størrelse
`a`	34
`b`	36
`c`	38
`d`	40
`e`	42

3.2. `kleep.createButton` — Genopret Kleeps CTA

I nogle tilfælde kan dit website genopbygge komponenter eller genindlæse tilstandsvariabler, hvilket får Kleeps CTA til at forsvinde. Kald kleep.createButton for at få den til at dukke op igen. Der er ingen parameter nødvendig — den genbruger de oplysninger du angav ved kaldet til kleep.load, så sørg for at kleep.load kørte først.

3.3. `kleep.track` — Aktivér sporing & Dashboard-adgang

Ud over størrelsisfunktionaliteten tilføjer vi sporing, så du kan måle, hvordan løsningen præsterer på dit website. Brug kleep.track(event_type, event_info) til at sende information, hver gang en sporet hændelse opstår. Vi sporer tre hændelser:

Hændelsestype	Trigger	Prioritet
`product_viewed`	Når PDP vises	`påkrævet`
`product_added_to_cart`	Når produkt lægges i kurven	`påkrævet`
`checkout_completed`	Når ordre bekræftes efter betaling	`påkrævet`

`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` — Hent internt Kleep-ID

Til brugerdefinerede brugsscenarier kan du hente et af den besøgendes Kleep-interne ID’er. Det returnerer enten:

null — hvis den besøgende ikke har brugt Kleep, eller
en UUID — hvis den besøgende har et Kleep-sporings-ID

Cookies og databeskyttelse

Kleep er fuldt ud styret af besøgenes samtykke: scriptet indlæses kun efter samtykke er indsamlet via din CMP, og du skal betinge dets indlæsning derefter. For den komplette liste over trackere, behandlede data, formål og retsgrundlag, hosting, underbehandlere og sikkerhed, se Cookies, CMP & Databeskyttelse.

Velkommen

CMS

Mobil

Dashboard

Data

Privatliv

2. Installation

3. Metoder

3.1. `kleep.load` — Vis Kleeps CTA

Parametre

Eksempel

3.2. `kleep.createButton` — Genopret Kleeps CTA

3.3. `kleep.track` — Aktivér sporing & Dashboard-adgang

`product_viewed`

`product_added_to_cart`

`checkout_completed`

3.4. `kleep.getTrackingId` — Hent internt Kleep-ID

Cookies og databeskyttelse

​1. Cookie-samtykke (lovkrav)

​2. Installation

​3. Metoder

​3.1. kleep.load — Vis Kleeps CTA

​Parametre

​Eksempel

​3.2. kleep.createButton — Genopret Kleeps CTA

​3.3. kleep.track — Aktivér sporing & Dashboard-adgang

​product_viewed

​product_added_to_cart

​checkout_completed

​3.4. kleep.getTrackingId — Hent internt Kleep-ID

​Cookies og databeskyttelse

1. Cookie-samtykke (lovkrav)

2. Installation

3. Metoder

3.1. `kleep.load` — Vis Kleeps CTA

Parametre

Eksempel

3.2. `kleep.createButton` — Genopret Kleeps CTA

3.3. `kleep.track` — Aktivér sporing & Dashboard-adgang

`product_viewed`

`product_added_to_cart`

`checkout_completed`

3.4. `kleep.getTrackingId` — Hent internt Kleep-ID

Cookies og databeskyttelse