# Knappar på din egen sida

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

Din butik kan stå för sig själv, men den mesta försäljningen sker där kunden redan är. En rad kod lägger en knapp på din sida, och du bestämmer själv var den står, vad som händer när man klickar och hur den ser ut.

## Den korta versionen

Sätt den här raden före </body> på din sida. Då är du igång: det kommer en «Köp presentkort»-knapp i hörnet och det öppnar din butik i ett fönster ovanpå sidan.

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

> **Anmärkning:** Du behöver inte skriva någonting av det här för hand. I kontrollpanelen under Inställningar väljer du hur knappen ska se ut ser den direkt och kopierar den färdiga koden.

## Fyra sätt att göra det på

| Så här | Vad du skriver | När |
| --- | --- | --- |
| Flytande knapp | Bara <script>-raden | Snabbast. Sitter fast i hörnet på alla sidor. |
| Knapp där du vill | <span data-kuvert-buy></span> | Lägg den vid en produkt i menyn i sidfoten. Så många du vill. |
| Din egen knapp | data-kuvert-open på ditt eget element | Du har redan en knapp eller en länk som passar din sida. |
| Hela butiken | <div data-kuvert-inline></div> | Din butik visas direkt på din sida utan knapp och fönster. |

Den flytande knappen försvinner av sig själv så snart du har satt in en av dina egna. Du slutar aldrig med två knappar av misstag.

> **Anmärkning:** Butiken på din egen sida (data-kuvert-inline) mäter sig själv och talar om för sidan hur hög den är. Ramen växer och krymper med stegen, så att det varken står en halv produktrad vid kanten eller en tom skärm under betalningsknappen. data-height är höjden innan butiken har svarat och golvet efteråt.

```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å här kommer det att se ut

Prova dig fram här nedanför. Det är de riktiga knapparna, med samma mått och former som dem dina kunder får se.

Har du redan en design du hellre vill använda sätter du data-class till dina egna klasser. Då håller vi fingrarna borta från utseendet helt och hållet och knappen ärver din egen styling istället för att slåss med den.

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

## Bestäm vad knappen öppnar

En knapp kan peka på en viss produkt, ett fast belopp eller ett antal och låta köparen börja längre in i flödet. Det är så «Köp presentkort · 500 Dkr» blir ett klick i stället för fyra.

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

> **Anmärkning:** Belopp skrivs i kronor, som på din egen prislista: data-amount="500" är 500 Dkr. Hoppar du över ett steg med data-step hoppas bara det över som du själv har fyllt i: saknas något börjar köparen precis där.

> **Viktigt:** Attribut på <script>-raden gäller ALLA knappar på sidan. Ska en knapp öppna en viss produkt ska data-product stå på den knappen och inte på skriptet.

## En knapp för ert nästa arrangemang

data-event pekar normalt på ett visst arrangemang. Skriver du next i stället öppnar knappen nästa arrangemang som är till salu, så att du inte behöver ändra din sida varje gång ni lägger upp ett nytt datum.

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

> **Anmärkning:** Nästa betyder: publicerat, ännu inte genomfört och med sista beställningsdag inom räckhåll. Finns det inget svarar sidan som vid ett okänt arrangemang. Ett slutsålt arrangemang hoppas inte över. Så länge det är ert nästa är det det gästen ska se.

## Alla alternativ

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

## Till utvecklare

Scriptet placerar window.kuvert på sidan, så en single-page-app kan öppna butiken från sin egen kod, och skickar händelser på `window` som ditt eget analysverktyg kan lyssna 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 är inläst och knapparna är uppsatta
- `kuvert:open`: butiken öppnades
- `kuvert:close`: butiken stängdes igen
- `kuvert:checkout`: köparen tryckte på betala. Med följer belopp, antal, valuta och vad som köptes (presentkort, biljett, bord eller varukorg), och för ett arrangemang dess id och prisernas id

Renderar din sida knappar efter att skriptet har körts, som en React- eller Vue-sida gör, så anropa kuvert.refresh() efteråt. Den plockar upp nya knappar och hoppar över dem den redan känner till.

> **Anmärkning:** Själva betalningen sker hos Stripe, som inte får visas i ett fönster inne på en annan sida. Därför går webbläsaren över till Stripe när köparen betalar. Din sida finns inte längre vid den tidpunkten, och därför finns det ingen händelse för ett genomfört köp. `kuvert:checkout` är det sista som din sida själv hinner se. Vill du mäta faktisk försäljning är det webhooks du ska använda.

## Samtycke när butiken ligger på din sida

Har du lagt en Google Tag Manager-container i din butik körs den bara när kunden har sagt ja. Öppnar kunden butiken direkt på shop.kuvert.dk frågar Kuvert själv en gång, och svaret sparas. Men ligger butiken inbäddad på din egen sida har DIN cookiebanner redan frågat, och då ska Kuvert inte fråga igen mitt i en modal, precis innan kunden betalar. Du skickar svaret vidare:

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

> **Anmärkning:** Säger du ingenting körs ingen statistik. Det gäller också om du inte har lagt upp någon container alls. Då sätter butiken inga cookies och visar heller ingen banner. Och oavsett vad körs den aldrig på sidan för ett enskilt presentkort, en biljett eller ett kvitto: adressen där är själva koden, och den får inte hamna i din statistik.

## Statistik och marknadsföring var för sig

Din banner frågar troligen om statistik och marknadsföring var för sig, och det kan du föra vidare: `analytics` är statistik, `ads` är marknadsföring. Sa kunden bara ja till statistik mäter din Google Analytics, medan dina annonstaggar får ett nej via Google Consent Mode. data-consent="granted" och `kuvert.consent(true)` betyder fortfarande ja till båda.

Svaret följer också med genom betalningen. När kunden kommer tillbaka från Stripe är hen inte längre inne på din sida, men Kuvert frågar inte igen: det svar som din banner gav när kunden tryckte på betala gäller också på sidan efter betalningen, så att köpet når din container. Drar kunden tillbaka sitt ja innan betalningen följer nejet med på samma sätt.

Har du lagt in ett Meta-pixel-id och en åtkomsttoken under Integrationer skickar Kuvert köpet till Meta från servern, men bara för en kund som har sagt ja till marknadsföring. Med ett ja skickar din webbplats också med sin egen Meta-cookie (_fbp) och annonsklickets (_fbc) in i butiken, så att Meta kan hitta annonsen som ledde till köpet.

## Biljettförsäljningen under er egen sida om kvällen

Visar er egen sida redan affischen, dörrtider, åldersgräns, beskrivning och line-up behöver biljettförsäljningen nedanför inte upprepa det. Sätt data-compact bredvid data-event, så visar ramen bara kvällens namn och datum och sedan det som behövs för att köpa: biljetter och bord, priser, bordskartan och varukorgen. Öppnas kvällen i en ny flik finns allt med igen.

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