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.
<script src="https://shop.kuvert.dk/embed.js" data-slug="dit-butiksnavn"></script>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> | Presentkortssidan visas direkt på din sida — ingen knapp inget 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.
<!-- 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 här. Det är de riktiga knapparna — samma storlek och former som dina kunder ser.
Fylld
Standard. Din färg, vit text.
data-variant="solid"Kant
För ljusa sidor och sekundära placeringar.
data-variant="outline"Endast text
För en meny eller en fotnot.
data-variant="text"
Det du väljer här motsvarar attributten nedan. I kontrollpanelen finns samma inställning med en knapp som kopierar koden — du behöver inte skriva den själv.
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>Bestäm vad knappen öppnar
En knapp kan peka på en viss produkt ett fast belopp ett antal — och starta köparen längre in i flödet. Det är så «Köp presentkort · 500 kr.» blir ett klick istä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>En knapp för ert nästa arrangemang
data-event pekar normalt på ett bestämt arrangemang. Skriver du next istället öppnar knappen det nästa som är till försäljning — och du behöver inte redigera din sida varje gång ni ställer in ett nytt datum.
<a href="/arrangementer" data-kuvert-open data-event="next">Billetter</a>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 |
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å.
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 — scriptet är inläst och knapparna är satta upp
- kuvert:open — butiken öppnades
- kuvert:close — butiken stängdes igen
- kuvert:checkout — köparen klickade betala, med belopp och antal
Rendera dina knappar efter att skriptet har körts — som en React- eller Vue-sida gör — så anropa kuvert.refresh() efteråt. Den samlar nya knappar och hoppar över de som redan är kända.
Samtycke när butiken ligger på din sida
Har du lagt en Google Tag Manager-container på din presentkortssida, 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 kommer ihåg. Men ligger butiken inbäddad på din egen sida, har DIN cookie-banner redan frågat, och så 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="granted"></script>// JavaScript banner: tell us when the customer answers
kuvert.consent(true) // or false, if they decline