Schaltflächen auf Ihrer Website

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>

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>

Probieren Sie es unten aus. Das sind die echten Buttons, mit denselben Maß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>

Ein Button kann auf ein bestimmtes Produkt, einen festen Betrag oder eine Anzahl zeigen und den Käufer weiter hinten im Ablauf beginnen lassen. So wird «Gutschein kaufen · 500 DKK» 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>

data-event zeigt normalerweise auf eine bestimmte Veranstaltung. Schreiben Sie stattdessen next, öffnet der Button die nächste, die im Verkauf ist, sodass Sie Ihre Seite nicht jedes Mal bearbeiten müssen, wenn Sie ein neues Datum anlegen.

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

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()

// 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: Das Script ist geladen und die Buttons sind eingerichtet
• kuvert:open: Der Shop wurde geöffnet
• kuvert:close: Der Shop wurde wieder geschlossen
• kuvert:checkout: Der Käufer hat auf Bezahlen gedrückt. Mitgeliefert werden Betrag, Anzahl, Währung und was gekauft wurde (Gutschein, Ticket, Tisch oder Warenkorb), bei einer Veranstaltung außerdem deren ID und die IDs der Preise

Rendert Ihre Seite Buttons erst, nachdem das Script gelaufen ist, wie es eine React- oder Vue-Seite tut, rufen Sie danach kuvert.refresh() auf. Die Funktion nimmt neue Buttons auf und überspringt die, die sie schon kennt.

Haben Sie einen Google Tag Manager-Container in Ihrem Shop eingerichtet, läuft er nur, wenn der Kunde zugestimmt hat. Öffnet der Kunde den Shop direkt auf shop.kuvert.dk, fragt Kuvert selbst einmal nach, und die Antwort wird gespeichert. Ist der Shop aber in Ihre eigene Seite eingebettet, hat IHR Cookie-Banner bereits gefragt, und dann soll Kuvert nicht mitten in einem Modal kurz vor dem Bezahlen noch einmal fragen. 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="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 })

Ihr Banner fragt vermutlich getrennt nach Statistik und Marketing, und genau das können Sie weitergeben: analytics ist Statistik, ads ist Marketing. Hat der Kunde nur der Statistik zugestimmt, misst Ihr Google Analytics mit, während Ihre Werbe-Tags über Google Consent Mode ein Nein bekommen. data-consent="granted" und kuvert.consent(true) bedeuten weiterhin Ja zu beidem.

Die Antwort geht auch durch die Zahlung mit. Wenn der Kunde von Stripe zurückkommt, ist er nicht mehr auf Ihrer Seite, aber Kuvert fragt nicht erneut: Die Antwort, die Ihr Banner gegeben hat, als der Kunde auf Bezahlen gedrückt hat, gilt auch auf der Seite nach der Zahlung, sodass der Kauf Ihren Container erreicht. Zieht der Kunde sein Ja vor dem Bezahlen zurück, geht das Nein auf dieselbe Weise mit.

Haben Sie unter Integrationen eine Meta-Pixel-ID und ein Zugriffstoken eingerichtet, sendet Kuvert den Kauf vom Server an Meta, aber nur für einen Kunden, der dem Marketing zugestimmt hat. Mit einem Ja gibt Ihre Website auch ihr eigenes Meta-Cookie (_fbp) und das des Anzeigenklicks (_fbc) in den Shop weiter, damit Meta die Anzeige finden kann, die zum Kauf geführt hat.

Zeigt Ihre eigene Seite bereits das Plakat, Einlasszeiten, Altersgrenze, Beschreibung und Line-up, muss der Ticketverkauf darunter nichts davon wiederholen. Setzen Sie data-compact neben data-event, dann zeigt der Rahmen nur Namen und Datum des Abends und danach, was man zum Kaufen braucht: Tickets und Tische, Preise, den Tischplan und den Warenkorb. In einem neuen Tab geöffnet, ist wieder alles dabei.

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