Ticketverkauf in die eigene Website einbetten

DiKAS stellt für den Ticketverkauf eine schlanke, mobil optimierte Gastansicht bereit. Sie zeigt nur Eintrittskarten, Datum, Anzahl, Verfügbarkeit und Warenkorb. Kauf und Zahlung laufen danach über denselben geprüften Checkout wie im normalen Online-Shop.

Voraussetzungen

• Event-Ticketing ist unter Admin → Einstellungen → Betrieb aktiv. Der Online-Shop (Online-Bestellung) ist dafür nicht nötig.
• Mindestens ein Ticketartikel besitzt eine Ticket-Konfiguration und ein Kontingent.
• Öffnungszeiten der Gästeseite und Zahlungsanbieter sind eingerichtet und getestet.
• Die Kundenwebsite läuft per HTTPS.
• Die genaue Herkunft der Kundenwebsite ist bekannt, zum Beispiel https://www.mein-lokal.de. Ein Pfad wie /tickets gehört nicht in die Herkunft.

In DiKAS freigeben

1. Admin → Online-/QR-Einstellungen → Allgemein öffnen und oben den Modus Experte einschalten.
2. Einbettung als iFrame erlauben einschalten.
3. Unter Erlaubte Website-Adressen je Zeile eine vollständige Herkunft eintragen, zum Beispiel:

https://www.mein-lokal.de
https://mein-lokal.de

1. Speichern.

Die beiden Adressen mit und ohne www sind technisch verschieden und müssen bei Bedarf beide eingetragen werden. Platzhalter und fremde Seiten sind bewusst nicht erlaubt. Admin, Kasse, Einlass und Kundenportal bleiben grundsätzlich gegen Einbettung gesperrt.

Code für die Kundenwebsite

IHRE-DIKAS-ADRESSE durch die öffentliche Adresse des Betriebs ersetzen:

<iframe
  id="dikas-ticketshop"
  title="Eintrittskarten kaufen"
  src="https://IHRE-DIKAS-ADRESSE/shop/tickets"
  loading="lazy"
  referrerpolicy="no-referrer"
  style="width:100%;min-height:680px;border:0;border-radius:16px"
></iframe>

<script>
  window.addEventListener('message', function (event) {
    if (event.origin !== 'https://IHRE-DIKAS-ADRESSE') return;
    if (event.data?.type !== 'dikas:ticket-shop:height') return;
    const frame = document.getElementById('dikas-ticketshop');
    frame.style.height = Math.max(480, Number(event.data.height) || 0) + 'px';
  });
</script>

Die Prüfung von event.origin darf nicht entfernt werden. Die Höhenmeldung enthält keine Kundendaten; sie verhindert lediglich einen zweiten Scrollbalken. Ohne das Skript funktioniert die Einbettung mit der festen Mindesthöhe ebenfalls.

Mobiler Betrieb

Die Ticketkarten wechseln auf kleinen Bildschirmen automatisch auf eine Spalte. Datum, Anzahl, Kaufen und Warenkorb besitzen große Touch-Ziele. Die einbettende Website sollte das iframe nicht in einen Container mit fester Pixelbreite oder overflow:hidden zwängen. Im Seitenkopf muss folgender Viewport-Eintrag vorhanden sein:

<meta name="viewport" content="width=device-width, initial-scale=1">

Abnahme

1. Kundenwebsite auf iPhone-/Android-Breite und Desktop öffnen.
2. Prüfen, dass kein Browserhinweis „Verbindung abgelehnt“ erscheint.
3. Termin wählen (bei nur einem Termin steht er fest da); „Noch N verfügbar" bzw. „Ausverkauft" muss erscheinen.
4. Mehrere Karten in den Warenkorb legen und Checkout öffnen.
5. Einen Testkauf vollständig bezahlen und PDF/QR prüfen.
6. Dasselbe Ticket einmal mit der mobilen Eingangsmaske einlassen; Doppel-Scan muss scheitern.
7. In Admin → Tickets Verkaufszahl, offene Karten und Kontingent vergleichen.

Alternative zur Einbettung

Ein normaler Link oder Button zum Ticketshop ist technisch robuster, wenn die Website sehr enge Cookie-, Frame- oder Consent-Regeln hat.