Knapper på din egen side

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.

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

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.

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

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.

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

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.

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

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.

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

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

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.

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:

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

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.

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.

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