Schaltflächen auf Ihrer Website

Die kurze Version

Fügen Sie diese Zeile direkt vor </body> auf Ihrer Website ein. Dann sind Sie los: Es erscheint ein «Gutschein kaufen»-Button in der Ecke und er öffnet Ihren Shop in einem Fenster über der Website.

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

Vier Möglichkeiten, es zu tun

Der schwebende Button verschwindet von selbst, sobald Sie einen Ihrer eigenen eingefügt haben. Sie landen nie versehentlich mit zwei Buttons.

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

So wird es aussehen

Probieren Sie unten aus. Dies sind die echten Buttons — die gleichen Größen und Formen wie die, die Ihre Kunden sehen.

Wenn Sie bereits ein Design haben, das Sie lieber verwenden möchten, setzen Sie data-class auf Ihre eigenen Klassen. Dann halten wir uns völlig aus dem Aussehen heraus, und der Button erbt Ihren eigenen Stil, anstatt sich damit zu bekämpfen.

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

Bestimmen Sie, was der Button öffnet

Ein Button kann auf ein bestimmtes Produkt, einen festen Betrag, eine Menge zeigen — und den Käufer weiter im Fluss starten. Damit wird «Gutschein kaufen · 500 kr.» zu einem Klick statt vier.

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

Ein Button für Ihren nächsten Event

data-event zeigt normalerweise auf einen bestimmten Event. Wenn Sie stattdessen next schreiben, öffnet der Button den nächsten, der zum Verkauf steht — und Sie müssen Ihre Website nicht jedes Mal bearbeiten, wenn Sie ein neues Datum einrichten.

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

Alle Möglichkeiten

Für Entwickler

Das Skript platziert window.kuvert auf der Seite, sodass eine Single-Page-App den Shop aus Ihrem eigenen Code öffnen kann, und sendet Ereignisse über window, die Ihr eigenes Analysetool empfangen kann.

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 — das Skript wurde geladen und die Schaltflächen eingerichtet
• kuvert:open — der Shop wurde geöffnet
• kuvert:close — der Shop wurde wieder geschlossen
• kuvert:checkout — der Käufer hat auf Bezahlen geklickt, mit Betrag und Menge

Rendern Sie Ihre Schaltflächen, nachdem das Skript ausgeführt wurde — wie eine React- oder Vue-Seite es tut — und rufen Sie dann kuvert.refresh() auf. Dies sammelt neue Schaltflächen und überspringt diejenigen, die bereits bekannt sind.

Zustimmung, wenn sich der Shop auf Ihrer Seite befindet

Wenn Sie einen Google Tag Manager-Container auf Ihrer Gutschein-Seite eingerichtet haben, wird dieser nur ausgeführt, wenn der Kunde zugestimmt hat. Öffnet der Kunde den Shop direkt auf shop.kuvert.dk, fragt Kuvert selbst — einmal, und die Antwort wird gespeichert. Liegt der Shop jedoch eingebettet auf Ihrer eigenen Seite, hat Ihr Cookie-Banner bereits gefragt, und so sollte Kuvert nicht erneut mitten in einem Modal fragen, kurz bevor der Kunde bezahlt. Sie geben die Antwort weiter:

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