# Schaltflächen auf Ihrer Website

<https://kuvert.dk/de/dokumentation/indlejring>

Ihr Shop kann für sich allein stehen, aber die meisten Verkäufe finden dort statt, wo der Kunde schon ist. Eine Zeile Code setzt einen Button auf Ihre Website, und Sie bestimmen selbst, wo er steht, was beim Klick passiert und wie er aussieht.

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

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

> **Hinweis:** Sie müssen nichts davon von Hand schreiben. Im Dashboard unter Einstellungen wählen Sie, wie der Button aussehen soll, sehen ihn sofort und kopieren den fertigen Code.

## Vier Möglichkeiten, es zu tun

| So | Was Sie schreiben | Wann |
| --- | --- | --- |
| Schwebende Schaltfläche | Nur <script>-Zeile | Das schnellste. Sitzt fest in der Ecke auf allen Seiten. |
| Button wo Sie wollen | <span data-kuvert-buy></span> | Platzieren Sie ihn neben einem Produkt, im Menü, im Footer. So viele Sie wollen. |
| Ihr eigener Button | data-kuvert-open auf Ihrem eigenen Element | Sie haben bereits einen Button oder Link, der zu Ihrer Website passt. |
| Ganzer Shop | <div data-kuvert-inline></div> | Ihr Shop wird direkt auf Ihrer Website angezeigt, ohne Button und Fenster. |

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

> **Hinweis:** Der Shop auf Ihrer eigenen Website (data-kuvert-inline) misst sich selbst und teilt der Seite mit, wie hoch er ist. Der Rahmen wächst und schrumpft mit den Schritten, sodass weder eine halbe Produktzeile am Rand steht noch ein Bildschirm voll Leere unter dem Bezahl-Button. data-height ist die Höhe, bevor der Shop geantwortet hat, und danach die Mindesthöhe.

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

```html
<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 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.

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

> **Hinweis:** Beträge werden in Kronen angegeben, wie auf Ihrer eigenen Preisliste: data-amount="500" sind 500 DKK. Überspringen Sie mit data-step einen Schritt, wird nur übersprungen, was Sie selbst ausgefüllt haben: Fehlt etwas, beginnt der Käufer genau dort.

> **Wichtig:** Attribute in der <script>-Zeile gelten für ALLE Buttons auf der Seite. Soll ein einzelner Button ein bestimmtes Produkt öffnen, gehört data-product auf diesen Button und nicht auf das Script.

## Ein Button für Ihren nächsten Event

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.

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

> **Hinweis:** Die nächste heißt: veröffentlicht, noch nicht vorbei und mit der Bestellfrist in Reichweite. Gibt es keine, antwortet die Seite genauso wie bei einer unbekannten Veranstaltung. Eine ausverkaufte Veranstaltung wird nicht übersprungen. Solange sie Ihre nächste ist, soll der Gast genau sie sehen.

## Alle Möglichkeiten

| Attribut | Wo | Beispiel |
| --- | --- | --- |
| data-slug | <script> | `nogen` |
| data-origin | <script> | `https://shop.kuvert.dk` |
| data-locale | beide | `da` |
| data-button | <script> | `auto` |
| data-kuvert-buy | im Element | — |
| data-kuvert-open | im Element | — |
| data-kuvert-inline | im Element | — |
| data-label | beide | `Gutschein kaufen` |
| data-color | beide | `#b8935a` |
| data-text-color | beide | `#ffffff` |
| data-size | beide | `md` |
| data-shape | beide | `pill` |
| data-variant | beide | `solid` |
| data-block | beide | `true` |
| data-class | beide | `min-knap` |
| data-position | <script> | `br` |
| data-product | beide | `prod_open` |
| data-amount | beide | `500` |
| data-quantity | beide | `1` |
| data-step | beide | `personalize` |
| data-event | beide | `next` |
| data-campaign | beide | `cmp_jul` |
| data-height | beide | `640` |
| data-mode | beide | `modal` |
| data-consent | <script> | `granted` |
| data-scheme | beide | `dark` |
| data-booking | beide | `true` |
| data-date | beide | `2026-11-06` |
| data-tier | beide | `tier_loge6` |
| data-view | beide | `tables` |
| data-compact | beide | `true` |

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

```javascript
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.

> **Hinweis:** Die eigentliche Zahlung findet bei Stripe statt, und Stripe darf nicht in einem Fenster innerhalb einer anderen Seite angezeigt werden. Deshalb wechselt der Browser zu Stripe, wenn der Käufer bezahlt. Ihre Seite existiert zu diesem Zeitpunkt nicht mehr, und deshalb gibt es kein Ereignis für einen abgeschlossenen Kauf. `kuvert:checkout` ist das Letzte, was Ihre Seite selbst noch mitbekommt. Wenn Sie tatsächliche Verkäufe messen möchten, brauchen Sie Webhooks.

## Zustimmung, wenn sich der Shop auf Ihrer Seite befindet

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:

```html
<!-- 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
// 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 })
```

> **Hinweis:** Sagen Sie nichts, läuft keine Statistik. Das gilt auch, wenn Sie gar keinen Container eingerichtet haben. Dann setzt Ihr Shop keine Cookies und zeigt auch kein Banner. Und in keinem Fall läuft er auf der Seite für einen einzelnen Gutschein, ein Ticket oder eine Quittung: Die Adresse dort ist der Code selbst und darf nicht in Ihrer Statistik landen.

## Statistik und Marketing, jedes für sich

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.

## Der Ticketverkauf unter Ihrer eigenen Seite zum Abend

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.

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