Knapper på din egen side

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.

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

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.

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

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

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.

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

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.

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

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

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.

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:

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

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.

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.

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