# Knapper på din egen side

<https://kuvert.dk/no/dokumentation/indlejring>

Butikken din kan stå for seg selv, men de fleste salg skjer der kunden allerede er. Én linje kode legger en knapp på siden din, og du bestemmer selv hvor den står, hva som skjer når noen klikker, og hvordan den ser ut.

## Den korte versjonen

Sett denne linjen inn rett før </body> på siden din. Slik er du i gang: det kommer en «Kjøp gavekort»-knapp i hjørnet, og den åpner butikken din i et vindu ovenpå siden.

```html
<script src="https://shop.kuvert.dk/embed.js" data-slug="dit-butiksnavn"></script>
```

> **Merk:** Du skal ikke skrive noe av dette her i hånden. I dashbordet under Innstillinger, velger du hvordan knappen skal se ut, ser den med det samme, og kopierer den ferdig koden.

## Fire måter å gjøre det på

| Slik | Hva du skriver | Når |
| --- | --- | --- |
| Flytende knapp | Bare <script>-linjen | Raskest. Sitter fast i hjørnet på alle sider. |
| Knapp hvor du vil | <span data-kuvert-buy></span> | Sett den ved et produkt, i menyen, i footeren. Så mange du vil. |
| Din egen knapp | data-kuvert-open på ditt eget element | Du har allerede en knapp eller et link som passer til siden din. |
| Hele butikken | <div data-kuvert-inline></div> | Butikken din vises direkte på siden din uten knapp og vindu. |

Den flytende knappen forsvinner av seg selv, så snart du har satt en av dine egne inn. Du ender aldri med to knapper ved en ulykke.

> **Merk:** Butikken på din egen side (data-kuvert-inline) måler seg selv og forteller siden hvor høy den er. Rammen vokser og krymper med trinnene, så det verken står en halv produktlinje ved kanten eller en tom skjerm under betalingsknappen. data-height er høyden før butikken har svart, og gulvet etterpå.

```html
<!-- One button per product, each with its own amount -->
<span data-kuvert-buy data-amount="300" data-label="Gavekort · 300 kr."></span>
<span data-kuvert-buy data-amount="500" data-label="Gavekort · 500 kr."></span>

<!-- Your own link in the menu -->
<a href="/gavekort" data-kuvert-open>Gavekort</a>

<!-- Once, at the foot of the page -->
<script src="https://shop.kuvert.dk/embed.js" data-slug="dit-butiksnavn"></script>
```

## Slik kommer den til å se ut

Prøv deg fram nedenfor. Det er de ekte knappene, med samme mål og former som dem kundene dine får se.

Har du allerede et design du hellere vil bruke, så sett data-class til dine egne klasser. Slik holder vi fingrene fra utseendet helt og aldeles, og knappen arver din egen styling i stedet for å slåss med den.

```html
<span data-kuvert-buy data-class="btn btn-primary"></span>
```

## Bestem hva knappen åpner

En knapp kan peke på et bestemt produkt, et fast beløp eller et antall og starte kjøperen lenger inne i flyten. Det er slik «Kjøp gavekort · 500 DKK» blir til ett klikk i stedet for fire.

```html
<span data-kuvert-buy
      data-product="prod_spaophold"
      data-amount="500"
      data-quantity="2"
      data-label="To spa-gavekort · 500 kr."></span>
```

> **Merk:** Beløp skrives i kroner, som på din egen prisliste: data-amount="500" er 500 DKK. Hopper du over et trinn med data-step, hoppes bare det over som du selv har fylt ut: mangler noe, starter kjøperen nøyaktig der.

> **Viktig:** Attributter på <script>-linjen gjelder ALLE knapper på siden. Skal én knapp åpne et bestemt produkt, må data-product stå på den knappen og ikke på skriptet.

## En knapp til deres neste arrangement

data-event peker normalt på ett bestemt arrangement. Skriver du next i stedet, åpner knappen det neste som er til salgs, så du slipper å redigere siden din hver gang dere setter opp en ny dato.

```html
<a href="/arrangementer" data-kuvert-open data-event="next">Billetter</a>
```

> **Merk:** Neste betyr: publisert, ikke holdt ennå, og med bestillingsfristen innen rekkevidde. Er det ingen, svarer siden det samme som ved et ukjent arrangement. Et utsolgt arrangement hoppes ikke over. Så lenge det er deres neste, er det det gjesten skal se.

## Alle muligheter

| Attributt | Hvor | Eksempel |
| --- | --- | --- |
| data-slug | <script> | `noen` |
| data-origin | <script> | `https://shop.kuvert.dk` |
| data-locale | begge | `da` |
| data-button | <script> | `auto` |
| data-kuvert-buy | på elementet | — |
| data-kuvert-open | på elementet | — |
| data-kuvert-inline | på elementet | — |
| data-label | begge | `Kjøp gavekort` |
| data-color | begge | `#b8935a` |
| data-text-color | begge | `#ffffff` |
| data-size | begge | `md` |
| data-shape | begge | `pill` |
| data-variant | begge | `solid` |
| data-block | begge | `true` |
| data-class | begge | `min-knap` |
| data-position | <script> | `br` |
| data-product | begge | `prod_open` |
| data-amount | begge | `500` |
| data-quantity | begge | `1` |
| data-step | begge | `personalize` |
| data-event | begge | `next` |
| data-campaign | begge | `cmp_jul` |
| data-height | begge | `640` |
| data-mode | begge | `modal` |
| data-consent | <script> | `granted` |
| data-scheme | begge | `dark` |
| data-booking | begge | `true` |
| data-date | begge | `2026-11-06` |
| data-tier | begge | `tier_loge6` |
| data-view | begge | `tables` |
| data-compact | begge | `true` |

## Til utviklere

Skriptet legger window.kuvert på siden, slik at en single-page-app kan åpne butikken fra sin egen kode, og sender hendelser på `window`, som ditt eget analyseverktøy kan lytte med på.

```javascript
kuvert.open({ product: 'prod_spaophold', amount: 500 })
kuvert.close()

// The same choices as a plain link, for a mail, a QR code or a new tab
kuvert.url({ event: 'next', view: 'tables' })

window.addEventListener('kuvert:checkout', (e) => {
  // e.detail: pass it on to your own analytics
})
```

- `kuvert:ready`: skriptet er lastet inn og knappene satt opp
- `kuvert:open`: butikken ble åpnet
- `kuvert:close`: butikken ble lukket igjen
- `kuvert:checkout`: kjøperen trykket betal. Med følger beløp, antall, valuta og hva som ble kjøpt (gavekort, billett, bord eller handlekurv), og for et arrangement dets id og prisenes id

Gjengir siden din knappene etter at skriptet har kjørt, slik en React- eller Vue-side gjør, så kall kuvert.refresh() etterpå. Den fanger opp nye knapper og hopper over dem den allerede kjenner.

> **Merk:** Selve betalingen foregår hos Stripe, som ikke kan vises i et vindu inne på en annen side. Derfor bytter nettleseren over til Stripe når kjøperen betaler. Siden din finnes ikke lenger på det tidspunktet, og derfor er det ingen hendelse for et gjennomført kjøp. `kuvert:checkout` er det siste siden din selv rekker å se. Vil du måle faktiske salg, er det webhooks du skal bruke.

## Samtykke når butikken ligger på siden din

Har du satt en Google Tag Manager-container i butikken din, kjører den bare når kunden har sagt ja. Åpner kunden butikken direkte på shop.kuvert.dk, spør Kuvert selv én gang, og svaret huskes. Men ligger butikken innebygd på din egen side, har DITT cookiebanner allerede spurt, og da skal ikke Kuvert spørre igjen midt i en modal, rett før kunden betaler. Du gir svaret videre:

```html
<!-- server-side banner: set the attribute -->
<script src="https://shop.kuvert.dk/embed.js" data-slug="dit-butiksnavn"
        data-consent="analytics ads"></script>
<!-- statistics only: data-consent="analytics" -->
```

```javascript
// JavaScript banner: tell us when the customer answers
kuvert.consent(true) // or false, if they decline
// or each half on its own:
kuvert.consent({ analytics: true, ads: false })
```

> **Merk:** Sier du ingenting, kjører det ingen statistikk. Det gjelder også hvis du ikke har satt opp noen container i det hele tatt. Da setter butikken ingen cookies og viser heller ikke noe banner. Og uansett kjører den aldri på siden for et enkelt gavekort, en billett eller en kvittering: adressen der er selve koden, og den må ikke havne i statistikken din.

## Statistikk og markedsføring hver for seg

Banneret ditt spør sannsynligvis om statistikk og markedsføring hver for seg, og det kan du gi videre: `analytics` er statistikk, `ads` er markedsføring. Sa kunden bare ja til statistikk, måler din Google Analytics, mens annonsetaggene dine får nei gjennom Google Consent Mode. data-consent="granted" og `kuvert.consent(true)` betyr fortsatt ja til begge.

Svaret følger også med gjennom betalingen. Når kunden kommer tilbake fra Stripe, er de ikke lenger inne på siden din, men Kuvert spør ikke igjen: svaret banneret ditt ga da kunden trykket betal, gjelder også på siden etter betalingen, så kjøpet når containeren din. Trekker kunden tilbake sitt ja før de betaler, følger neiet med på samme måte.

Har du lagt inn en Meta-piksel-ID og et tilgangstoken under Integrasjoner, sender Kuvert kjøpet til Meta fra serveren, men bare for en kunde som har sagt ja til markedsføring. Med et ja sender nettstedet ditt også med sin egen Meta-informasjonskapsel (_fbp) og annonseklikkets (_fbc) inn i butikken, slik at Meta kan finne annonsen som førte til kjøpet.

## Billettsalget under deres egen side om kvelden

Viser deres egen side allerede plakaten, dørtider, aldersgrense, beskrivelse og line-up, trenger ikke billettsalget under å gjenta det. Sett data-compact ved siden av data-event, så viser rammen bare kveldens navn og dato og deretter det som skal til for å kjøpe: billetter og bord, priser, bordkartet og handlekurven. Åpnes kvelden i en ny fane, er alt med igjen.

```html
<div data-kuvert-inline data-event="nytaarsaften" data-compact></div>
```