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 und Online-Bestellung sind unter Admin → Einstellungen → Betrieb aktiv.
Mindestens ein Ticketartikel besitzt eine Ticket-Konfiguration und ein Kontingent.
Online-Shop, Öffnungszeiten 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¶

Admin → Online-Shop → Allgemein öffnen und den Expertenmodus aktivieren.
Einbettung als iFrame erlauben einschalten.
Unter Erlaubte Website-Adressen je Zeile eine vollständige Herkunft eintragen, zum Beispiel:

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

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¶

Kundenwebsite auf iPhone-/Android-Breite und Desktop öffnen.
Prüfen, dass kein Browserhinweis „Verbindung abgelehnt“ erscheint.
Veranstaltungstag wählen; verkauft/verfügbar muss erscheinen.
Mehrere Karten in den Warenkorb legen und Checkout öffnen.
Einen Testkauf vollständig bezahlen und PDF/QR prüfen.
Dasselbe Ticket einmal mit der mobilen Eingangsmaske einlassen; Doppel-Scan muss scheitern.
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. Eine spätere JavaScript-/Web-Component-Integration könnte optisch tiefer integriert werden, benötigt aber eine versionierte öffentliche Widget-API und ist für den ersten Piloten nicht die risikoärmere Lösung.

Eigene Folgepunkte¶

Tischreservierung einbetten: kompakte Reservierungsansicht, automatische Höhe, mobiler Datums-/Zeitslot-Test und dokumentierter Rücksprung zur Website.
Allgemeine Online-Bestellung einbetten: schlanke Speisekarte/Warenkorb-Ansicht, Checkout im Frame, Consent-/Zahlungsanbieter-Test und Mobile-E2E.

Die sichere Herkunftsfreigabe gilt technisch bereits für die öffentliche Gaststrecke. Die beiden gezielten Oberflächen und ihre Abnahmetests werden dennoch als eigene Aufgaben behandelt, damit nicht nur „einbettbar“, sondern auch inhaltlich passend und mobil belastbar geliefert wird.