JS-bibliotek - Kleep Docs

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.

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

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.

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

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

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:

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

3. Metoder

3.1. `kleep.load` — Visa Kleeps CTA

Initiera widgeten med kleep.load:

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

Lägg till en behållare där widgeten ska visas på produktsidan:
```
<div id="kleep-container"></div>
```

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

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

Om lang eller market inte följer respektive konventioner eller inte stöds, visas en konsolvarning.

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

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

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

Exempel

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

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`

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

​1. Cookie-samtycke (lagkrav)

​2. Installation

​3. Metoder

​3.1. kleep.load — Visa Kleeps CTA

​Parametrar

​Exempel

​3.2. kleep.createButton — Återskapa Kleeps CTA

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

​product_viewed

​product_added_to_cart

​checkout_completed

​3.4. kleep.getTrackingId — Hämta Kleeps interna ID

​Cookies och dataintegritet

1. Cookie-samtycke (lagkrav)

2. Installation

3. Metoder

3.1. `kleep.load` — Visa Kleeps CTA

Parametrar

Exempel

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

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

`product_viewed`

`product_added_to_cart`

`checkout_completed`

3.4. `kleep.getTrackingId` — Hämta Kleeps interna ID

Cookies och dataintegritet