# Knapper på din egen side

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

Din gavekortsside kan stå for sig selv, men de fleste salg sker der hvor kunden allerede er. Én linje kode lægger en knap på din side — og du bestemmer selv hvor den står, hvad der sker når der klikkes, og hvordan den ser ud.

## Den korte version

Sæt denne linje ind lige før </body> på din side. Så er du i gang: der kommer en «Køb gavekort»-knap i hjørnet, og den åbner din butik i et vindue oven på siden.

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

> **Bemærk:** Du skal ikke skrive noget af det her i hånden. I dashboardet under Indstillinger vælger du hvordan knappen skal se ud, ser den med det samme, og kopierer den færdige kode.

## Fire måder at gøre det på

| Sådan | Hvad du skriver | Hvornår |
| --- | --- | --- |
| Flydende knap | Kun <script>-linjen | Hurtigst. Sidder fast i hjørnet på alle sider. |
| Knap hvor du vil | <span data-kuvert-buy></span> | Sæt den ved et produkt, i menuen, i footeren. Så mange du vil. |
| Din egen knap | data-kuvert-open på dit eget element | Du har allerede en knap eller et link, der passer til din side. |
| Hele butikken | <div data-kuvert-inline></div> | Gavekortssiden vises direkte på din side — ingen knap, intet vindue. |

Den flydende knap forsvinder af sig selv, så snart du har sat en af dine egne ind. Du ender aldrig med to knapper ved et uheld.

> **Bemærk:** Butikken på din egen side (data-kuvert-inline) måler sig selv og fortæller siden, hvor høj den er — rammen vokser og krymper med trinene, så der hverken står en halv produktlinje ved kanten eller en skærm tomt under betalingsknappen. data-height er højden, før butikken har svaret, og gulvet bagefter.

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

## Sådan kommer den til at se ud

Prøv dig frem herunder. Det er de rigtige knapper — samme mål og former som dem dine kunder får at se.

Har du allerede et design, du hellere vil bruge, så sæt data-class til dine egne klasser. Så holder vi fingrene fra udseendet helt og aldeles, og knappen arver din egen styling i stedet for at slås med den.

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

## Bestem hvad knappen åbner

En knap kan pege på et bestemt produkt, et fast beløb, et antal — og starte køberen længere inde i flowet. Det er sådan «Køb gavekort · 500 kr.» bliver til ét klik 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>
```

> **Bemærk:** Beløb skrives i kroner, som på din egen prisliste — data-amount="500" er 500 kr. Springer du et trin over med data-step, springes kun det over, du selv har udfyldt: mangler der noget, starter køberen præcis dér.

> **Vigtigt:** Attributter på <script>-linjen gælder ALLE knapper på siden. Skal én knap åbne et bestemt produkt, skal data-product stå på den knap — ikke på scriptet.

## En knap til jeres næste arrangement

data-event peger normalt på ét bestemt arrangement. Skriver du next i stedet, åbner knappen det næste, der er til salg — og du skal ikke redigere din side, hver gang I sætter en ny dato op.

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

> **Bemærk:** Næste vil sige: udgivet, endnu ikke afholdt, og med bestillingsfristen inden for rækkevidde. Er der ingen, svarer siden det samme som ved et ukendt arrangement. Et udsolgt arrangement springes ikke over — så længe det er jeres næste, er det dét, gæsten skal se.

## Alle muligheder

| Attribut | Hvor | Eksempel |
| --- | --- | --- |
| data-slug | <script> | `nogen` |
| 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 | `Køb 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 udviklere

Scriptet lægger window.kuvert på siden, så en single-page-app kan åbne butikken fra sin egen kode, og sender begivenheder på `window`, som dit eget analyseværktøj 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` — scriptet er indlæst og knapperne sat op
- `kuvert:open` — butikken blev åbnet
- `kuvert:close` — butikken blev lukket igen
- `kuvert:checkout` — køberen trykkede betal, med beløb, antal, valuta og hvad der blev købt: gavekort, billet, bord eller kurv — og for et arrangement dets id og prisernes id

Render din side knapper efter at scriptet er kørt — som en React- eller Vue-side gør — så kald kuvert.refresh() bagefter. Den samler nye knapper op og springer dem over, den allerede kender.

> **Bemærk:** Selve betalingen foregår hos Stripe, som ikke må vises i et vindue inde på en anden side. Derfor skifter browseren over til Stripe, når køberen betaler. Din side findes ikke længere på det tidspunkt, og derfor er der ingen begivenhed for et gennemført køb — `kuvert:checkout` er det sidste, din side selv kan nå at se. Vil du måle faktiske salg, er det webhooks, du skal bruge.

## Samtykke, når butikken ligger på din side

Har du sat en Google Tag Manager-container på din gavekortsside, kører den kun, når kunden har sagt ja. Åbner kunden butikken direkte på shop.kuvert.dk, spørger Kuvert selv — én gang, og svaret huskes. Men ligger butikken indlejret på din egen side, har DIN cookiebanner allerede spurgt, og så skal Kuvert ikke spørge igen midt i en modal, lige før kunden betaler. Du giver 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 })
```

> **Bemærk:** Siger du ingenting, kører der ingen statistik. Det gælder også, hvis du slet ikke har sat en container op — så sætter gavekortssiden ingen cookies og viser heller ingen banner. Og uanset hvad kører den aldrig på siden for et enkelt gavekort, en billet eller en kvittering: adressen dér er selve koden, og den må ikke ende i din statistik.

## Statistik og markedsføring hver for sig

Din banner spørger sikkert om statistik og markedsføring hver for sig, og det kan du give videre: `analytics` er statistik, `ads` er markedsføring. Sagde kunden kun ja til statistik, måler din Google Analytics med, mens dine annoncetags får nej gennem Google Consent Mode. data-consent="granted" og `kuvert.consent(true)` betyder stadig ja til begge.

Svaret følger også med gennem betalingen. Når kunden kommer tilbage fra Stripe, er de ikke længere inde på din side, men Kuvert spørger ikke igen: det svar, din banner gav, da kunden trykkede betal, gælder også på siden efter betalingen — så købet når din container. Trækker kunden sit ja tilbage, før de betaler, følger det nej med på samme måde.

Har du sat et Meta pixel-id og et adgangstoken op under Integrationer, sender Kuvert købet til Meta fra serveren, men kun for en kunde, der har sagt ja til markedsføring. Med et ja sender din side også sin egen Meta-cookie (_fbp) og annonceklikkets (_fbc) med ind i butikken, så Meta kan finde den annonce, der gav købet.

## Billetsalget under jeres egen side om aftenen

Viser jeres egen side allerede plakaten, dørtider, aldersgrænse, beskrivelse og line-up, behøver billetsalget nedenunder ikke at gentage det. Sæt data-compact ved siden af data-event, så viser rammen kun aftenens navn og dato og derefter det, der skal til for at købe: billetter og borde, priser, bordkortet og kurven. Åbnes aftenen i en ny fane, er det hele med igen.

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