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

> Installer og konfigurér Kleep AI Sizing-widgetten på enhver butiksfacade via vores JavaScript-bibliotek.

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.

## 1. Cookie-samtykke (lovkrav)

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

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

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](/da/cookie-consent). 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:

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

<Tip>
  **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:

  ```html theme={null}
  <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.
</Tip>

## 3. Metoder

### 3.1. `kleep.load` — Vis Kleeps CTA

1. Initialisér widgetten med `kleep.load`:

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

2. Tilføj en container, hvor widgetten skal vises på produktsiden:

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

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

#### 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](https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes). 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](https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes). 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 |

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

<Warning>
  **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"`).
</Warning>

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

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

#### Eksempel

```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>
  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        |
</Tip>

### 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`

```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` — 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](/da/cookie-consent).