Embedding Ticket Sales in Your Own Website

For ticket sales DiKAS provides a lean guest view optimised for mobile devices. It shows only admission tickets, date, quantity, availability and cart. Purchase and payment then run through the same verified checkout as in the normal online shop.

Requirements

• Event ticketing is active under Admin → Settings → Operations. The online shop (online ordering) is not needed for this.
• At least one ticket article has a ticket configuration and a quota.
• Opening hours of the guest page and payment provider are set up and tested.
• The customer website runs on HTTPS.
• The exact origin of the customer website is known, for example https://www.my-venue.com. A path such as /tickets does not belong in the origin.

Allowing it in DiKAS

The settings page is labelled in German on every system.

1. Open Admin → Online-/QR-Einstellungen → Allgemein (online/QR settings → general) and switch on Expert mode at the top.
2. Switch on Einbettung als iFrame erlauben (allow embedding as iFrame).
3. Under Erlaubte Website-Adressen (allowed website addresses) enter one complete origin per line, for example:

https://www.my-venue.com
https://my-venue.com

1. Save.

The two addresses with and without www are technically different and must both be entered if needed. Wildcards and third-party sites are deliberately not allowed. Admin, POS, entry and customer portal remain blocked against embedding in principle.

Code for the customer website

Replace YOUR-DIKAS-ADDRESS with the public address of the business:

<iframe
  id="dikas-ticketshop"
  title="Buy tickets"
  src="https://YOUR-DIKAS-ADDRESS/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://YOUR-DIKAS-ADDRESS') 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>

The check of event.origin must not be removed. The height message contains no customer data; it only prevents a second scroll bar. Without the script, embedding also works with the fixed minimum height.

Mobile operation

On small screens the ticket cards automatically switch to a single column. Date, quantity, buy and cart have large touch targets. The embedding website should not squeeze the iframe into a container with a fixed pixel width or overflow:hidden. The following viewport entry must be present in the page header:

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

Acceptance

1. Open the customer website at iPhone/Android width and on desktop.
2. Check that no browser message "connection refused" appears.
3. Choose a date (if there is only one date, it is fixed); "N left" or "Sold out" must appear.
4. Put several tickets into the cart and open the checkout.
5. Pay a test purchase in full and check the PDF/QR.
6. Admit the same ticket once with the mobile entry screen; a double scan must fail.
7. In Admin → Tickets compare the sales figure, open tickets and quota.

Alternative to embedding

A normal link or button to the ticket shop is technically more robust if the website has very strict cookie, frame or consent rules.