Knappar på din egen sida

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.

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

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.

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

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.

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

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.

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

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.

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

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

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.

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:

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

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.

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