Den korte versjonen
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>Fire måter å gjøre det på
| Slik | Hva du skriver | Når |
|---|---|---|
| Flytende knapp | Bare <script>-linjen | Raskest. Sitter fast i hjørnet på alle sider. |
| Knapp hvor du vil | <span data-kuvert-buy></span> | Sett den ved et produkt, i menyen, i footeren. Så mange du vil. |
| Din egen knapp | data-kuvert-open på ditt eget element | Du har allerede en knapp eller et link som passer til siden din. |
| Hele butikken | <div data-kuvert-inline></div> | Gavekortssiden vises direkte på siden din — ingen knapp, intet vindu. |
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>Slik kommer den til å se ut
Prøv deg fram herunder. Det er de virkelige knappene — samme mål og former som dem dine kunder får å se.
Fylt
Standard. Din farge, hvit tekst.
data-variant="solid"Kant
For lyse sider og sekundære plasseringer.
data-variant="outline"Bare tekst
For en meny eller fotnote.
data-variant="text"
Det du velger her stemmer med attributtene under. I dashbordet er det samme oppsettet med en knapp som kopierer koden — du trenger ikke skrive den selv.
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>Bestem hva knappen åpner
En knapp kan peke på et bestemt produkt, et fast beløp, et antall — og starte kjøperen lengre inn i flowet. Slik blir «Kjøp gavekort · 500 kr.» 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>En knapp til deres neste arrangement
data-event peker normalt på ett bestemt arrangement. Skriver du next i stedet, åpner knappen det neste som er til salg — og du skal ikke redigere siden din hver gang dere setter en ny dato opp.
<a href="/arrangementer" data-kuvert-open data-event="next">Billetter</a>Alle muligheter
| Attributt | Hvor | Eksempel |
|---|---|---|
| data-slug | <script> | noen |
| 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 | Kjøp 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 |
Til utviklere
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()
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 betaling, med beløp og antall
Gjengi siden din knapper etter at skriptet har kjørt — som en React- eller Vue-side gjør — så kall kuvert.refresh() etterpå. Den samler nye knapper opp, og springer over dem den allerede kjenner.
Samtykke når butikken ligger på siden din
Har du satt en Google Tag Manager-container på gavekortssiden 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 DIN cookiebanner allerede spurt, og slik skal Kuvert ikke 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="granted"></script>// JavaScript banner: tell us when the customer answers
kuvert.consent(true) // or false, if they decline