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

> Installera och konfigurera Kleep AI Storleksguide-widget på valfri butik via vårt JavaScript-bibliotek.

Den här guiden beskriver hur du installerar Kleep AI Storleksguide-widget på valfri butik med hjälp av vårt JavaScript-bibliotek. Använd den tillsammans med den plattformsspecifika serverintegreringsguiden (Prestashop, Magento, WooCommerce, WShop, osv.) — den hanterar datainmatning, medan den här guiden hanterar front-end CTA på dina produktsidor.

## 1. Cookie-samtycke (lagkrav)

<Warning>
  Laddning av Kleep behandlar personuppgifter via cookies och liknande tekniker. Du måste därför **rättsligt villkora laddningen av Kleep på besökarens förhandsgodkännande av cookies** — anropa inte `kleep.load` (eller ladda biblioteket) förrän besökaren har accepterat relevanta cookies i din Samtyckeshanteringsplattform (CMP).
</Warning>

<Note>
  Konkret: villkora `<script src="https://module.kleep.ai/api/widget">`-taggen och `kleep.load(...)`-anropet bakom din CMP:s samtyckeskallback, så att de bara körs efter att samtycke har beviljats för båda ändamålen. Om samtycke senare återkallas, sluta ladda Kleep vid efterföljande sidvisningar.
</Note>

Din CMP måste exponera **två behandlingsändamål**, och Kleep får bara laddas när besökaren har samtyckt till båda. Den exakta formulering som ska visas i din banner — på 15 språk — finns på sidan [Cookies, CMP & Dataskydd](/sv/cookie-consent). Kopiera den därifrån.

## 2. Installation

Kom igång genom att inkludera widgetens JavaScript-fil i ditt projekt.

Före `</body>`, lägg till:

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

<Tip>
  **Se loggarna medan du integrerar.** Som standard körs widgeten tyst. För att skriva ut de fullständiga `[KLEEP] [Widget]`-loggarna (laddningsflöde, parametrar, CTA-skapande osv.) i din webbläsarkonsol, lägg till `?debug=true` till bibliotekets URL:

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

  Denna URL-flagga är det enda sättet att aktivera de utförliga loggarna — det finns ingen `debug`-option på `kleep.load(...)`. Kritiska varningar (ej stödda `lang`/`market`, `product_id`/`selectors`-matchningsfel, anrop av `kleep.load` två gånger) visas **alltid**, även utan denna flagga. Ta bort `?debug=true` i produktion.
</Tip>

## 3. Metoder

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

1. Initiera widgeten med `kleep.load`:

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

2. Lägg till en behållare där widgeten ska visas på produktsidan:

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

<Note>
  Denna div används för att infoga vår knapp inuti. Vi överlåter CSS-styling av knappen till dig under implementeringen.
</Note>

#### Parametrar

`kleep.load` ska anropas på varje produktsida (PDP) för att ladda Kleeps CTA, med följande parametrar:

| Parameter          | Typ             | Beskrivning                                                                                                                                                                               | Prioritet                                          |
| ------------------ | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- |
| `public_id`        | UUID            | Det UUID som tillhandahölls dig under onboarding                                                                                                                                          | **obligatorisk**                                   |
| `product_id`       | string \| array | Produkt-ID:n för den PDP där `kleep.load` anropas. En enskild sträng gäller för varje selektor; en array måste matcha `selectors.sizing` (se varning nedan).                              | **obligatorisk**                                   |
| `customer_id`      | string          | ID för den inloggade kunden (måste matcha vad som skickas via dataöverföringar)                                                                                                           | valfritt                                           |
| `lang`             | string          | Sidans aktuella språk. Följ [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes). Standard: `fr`. Se lista över språk som stöds nedan.                               | **obligatorisk**                                   |
| `market`           | string          | Landskod (webbplatsbesökarens plats). Följ [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes). Standard: `null`. Se lista över marknader som stöds nedan. | valfritt                                           |
| `selectors.sizing` | array           | HTML-selektorer för storleksknappsomslutningen/arna. Ange flera för att lägga till flera CTA:er på samma PDP.                                                                             | **obligatorisk**                                   |
| `getSizes`         | async function  | Returnerar tillgängliga storlekar som en array av `{ variantId, quantity }` så att widgeten kan kontrollera om rekommenderade storlekar finns i lager.                                    | obligatorisk för den användningen, annars valfritt |
| `addToCart`        | async function  | Tar emot ett `variantId` som indata och lägger till matchande produktvariant i varukorgen.                                                                                                | obligatorisk för den användningen, annars valfritt |
| `selectSize`       | async function  | Tar emot ett `variantId` som indata och väljer matchande variant i din butiks UI (låter kunden hoppa över ett klick).                                                                     | obligatorisk för den användningen, annars valfritt |

<Note>
  Om `lang` eller `market` inte följer respektive konventioner eller inte stöds, visas en konsolvarning.
</Note>

<Warning>
  **Matcha `product_id` med `selectors.sizing`.** Dessa två styr vilket produkt som visas i vilken behållare, så de måste stämma överens:

  * **En produkt i en eller flera behållare** → ange `product_id` som en **enskild sträng**. Samma produkt tillämpas på varje selektor i `selectors.sizing`.
  * **Olika produkter, en per behållare** → ange `product_id` som en **array med samma längd som `selectors.sizing`**. De paras ihop med index, så ordningen måste matcha (`product_id[0]` → `selectors.sizing[0]`, och så vidare).

  Om `product_id` är en array vars längd **skiljer sig** från `selectors.sizing`, **renderas ingen CTA alls** och en varning loggas i konsolen (den skriver ut båda längderna och värdena). Till exempel misslyckas `product_id: ["sku-1"]` (1 objekt) med två selektorer tyst — åtgärda det genom att upprepa id:t (`["sku-1", "sku-1"]`) eller ange det som en sträng (`"sku-1"`).
</Warning>

<Accordion title="Språk som stöds (ISO 639-1)">
  Om ett språk du behöver inte finns i listan nedan, kontakta din Kleep-representant.

  * `fr` — Franska (standard)
  * `br` — Brasiliansk portugisiska
  * `da` — Danska
  * `de` — Tyska
  * `en` — Engelska
  * `es` — Spanska
  * `fi` — Finska
  * `it` — Italienska
  * `ja` — Japanska
  * `ko` — Koreanska
  * `nl` — Nederländska
  * `pl` — Polska
  * `pt` — Portugisiska
  * `sv` — Svenska
  * `zh` — Kinesiska
</Accordion>

<Accordion title="Marknader som stöds (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>

#### Exempel

```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 använda denna testkonfiguration:

  * `public_id`: `"aadb1934-6e16-4c8a-a7cb-1fd6e00dd02c"`
  * `product_id`: `"12345"`
  * `variantId`:n att använda för callbacks (med deras motsvarande storletiketter):

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

### 3.2. `kleep.createButton` — Återskapa Kleeps CTA

I vissa fall kan din webbplats återbygga komponenter eller ladda om tillståndsvariabler, vilket gör att Kleeps CTA försvinner. Anropa `kleep.createButton` för att få den att visas igen.

Ingen parameter behövs — den återanvänder den information du angav när du anropade `kleep.load`, så se till att `kleep.load` kördes först.

### 3.3. `kleep.track` — Aktivera spårning och dashboardåtkomst

Utöver storleksfunktionaliteten lägger vi till spårning så att du kan mäta hur lösningen presterar på din webbplats. Använd `kleep.track(event_type, event_info)` för att skicka information varje gång en spårad händelse inträffar.

Vi spårar tre händelser:

| Händelsetyp             | Utlösare                             | Prioritet  |
| ----------------------- | ------------------------------------ | ---------- |
| `product_viewed`        | När PDP visas                        | `required` |
| `product_added_to_cart` | När produkt läggs i varukorgen       | `required` |
| `checkout_completed`    | Vid orderbekräftelse efter betalning | `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` — Hämta Kleeps interna ID

För anpassade användningsfall kan du hämta ett av besökarens interna Kleep-ID:n.

Det returnerar antingen:

* `null` — om besökaren inte har använt Kleep, eller
* ett UUID — om besökaren har ett Kleep-spårnings-ID

***

## Cookies och dataintegritet

Kleep styrs helt av besökarens samtycke: skriptet laddas bara **efter** att samtycke har samlats in via din CMP, och du måste villkora laddningen därefter. För den fullständiga listan över spårare, behandlad data, ändamål och rättsliga grunder, hosting, underbiträden och säkerhet, se [Cookies, CMP & dataintegritet](/sv/cookie-consent).