Shop auf der eigenen Website einbetten

Statt Ihre Kunden auf die Verkaufsseite von HEXLE Ticket zu schicken, können Sie den Ticketshop direkt in Ihre eigene Website einbauen. Ihre Besucher sehen dort die Ticketauswahl mit Preisen und Warenkorb, ohne Ihre Seite zu verlassen. HEXLE Ticket erzeugt dafür einen Code-Schnipsel (Snippet), den Sie einmal an der gewünschten Stelle Ihrer Website einfügen. Tickets, Preise und Verfügbarkeit kommen danach immer aktuell aus HEXLE Ticket.

Als Beispiel dient der Shop „Yoga-Festival Sonnenschein“ des Studios „Studio Sonnenschein“.

Voraussetzungen

Voraussetzung	Warum
Der Shop hat eine Öffentliche URL	Der Schnipsel verweist über diese URL auf Ihren Shop. Ohne URL zeigt der Tab nur „Bitte vergeben Sie zuerst eine Shop-URL (Slug) für diesen Shop, um den Einbettungs-Code zu erhalten.“ Die URL legen Sie in der Shop-Konfiguration, Grunddaten fest.
Der Shop ist veröffentlicht	Wie die Verkaufsseite zeigt auch der eingebettete Shop seine Tickets nur, solange der Shop online ist. Sonst sehen Ihre Besucher „Fehler beim Ladevorgang“ mit „Der Shop konnte nicht gefunden werden.“ Siehe Basis-Einrichtung, Veröffentlichen.
Ihre Website erlaubt eigenen HTML-Code	Der Schnipsel enthält eine Skript-Zeile. Ihr Website-System muss sie unverändert übernehmen.

Öffentliche URL nicht mehr ändern

Der Schnipsel enthält die Öffentliche URL Ihres Shops. Ändern Sie die URL später, findet der eingebettete Shop Ihren Shop nicht mehr. Kopieren Sie den Schnipsel dann neu und ersetzen Sie ihn auf Ihrer Website.

Der Tab „Einbetten“

Sie finden den Konfigurator unter Shop-Einstellungen › Verkaufsseite, Tab Einbetten. Wie alle Shop-Einstellungen gilt er für den Shop, der unten in der Sidebar angezeigt wird.

Der Tab ist dreigeteilt (auf schmaleren Bildschirmen stehen die Teile untereinander):

• Links wählen Sie die Darstellung (siehe Darstellungsoptionen).
• Rechts sehen Sie die Vorschau: Ihr Shop auf einer nachgestellten Website mit gestreiftem Hintergrund und den Platzhaltern „Beispieltext Ihrer Website oberhalb des Shops.“ und „Beispieltext unterhalb des Shops.“ Jede Änderung links wirkt sofort in der Vorschau.
• Darunter steht der fertige Code-Schnipsel mit den Buttons Snippet kopieren und Vorschau öffnen.

Ihre Auswahl im Tab speichert HEXLE Ticket nicht. Sie steckt nur im Schnipsel. Öffnen Sie den Tab später erneut, stehen wieder die Standardwerte da.

Nicht in der App

Den Tab Einbetten gibt es nur in HEXLE Ticket im Browser. In der Android- und iOS-App fehlt er.

Shop einbetten in fünf Schritten

1. Öffnen Sie Shop-Einstellungen › Verkaufsseite und wählen Sie den Tab Einbetten. Prüfen Sie unten in der Sidebar, ob der richtige Shop gewählt ist.
2. Wählen Sie links die Darstellung, die zu Ihrer Website passt. Prüfen Sie das Ergebnis in der Vorschau, bei Bedarf mit Dunkle Seite simulieren (siehe Vorschau).
3. Klicken Sie auf Snippet kopieren. Es erscheint „Snippet kopiert.“, und der Schnipsel liegt in Ihrer Zwischenablage.
4. Optional: Vorschau öffnen zeigt den Shop mit Ihren Einstellungen in einem neuen Browser-Tab, ohne Ihre Website drumherum. Rahmen „Karte“ und schwebender Warenkorb-Button erscheinen dort nicht; bei „Automatisch“ richtet sich das Farbschema nach Ihrer eigenen Einstellung.
5. Fügen Sie den Schnipsel in Ihre Website ein (siehe Snippet in die Website einfügen).

Darstellungsoptionen

Option	Werte (Standard fett)	Wirkung
Farbschema	Automatisch, Hell, Dunkel	„Automatisch“ übernimmt Hell oder Dunkel von Ihrer Website, siehe unten. „Hell“ und „Dunkel“ legen das Farbschema fest.
Hintergrund	Transparent, Eigene Fläche	„Transparent“ lässt die Hintergrundfarbe Ihrer Website durchscheinen; nur die Karten des Shops (Textblöcke, Ticketauswahl, Warenkorb) sind weiß bzw. dunkel. „Eigene Fläche“ gibt dem Shop eine eigene Hintergrundfläche mit dezenten Farbakzenten in Ihrer Shop-Farbe.
Rahmen	Ohne, Karte	„Karte“ setzt den Shop als abgerundete Karte mit feinem Rand und Schatten von Ihrer Seite ab.
Breite	Lesebreite, Voll	„Lesebreite“ begrenzt den Inhalt auf eine angenehme Lesebreite und zentriert ihn. „Voll“ nutzt die gesamte Breite des Bereichs, in den Sie den Schnipsel setzen.
Hell/Dunkel-Schalter	Anzeigen, Ausblenden	Zeigt im eingebetteten Shop oben rechts einen Schalter, mit dem Besucher selbst zwischen Hell und Dunkel wechseln. Die Wahl gilt nur, bis der Besucher die Seite neu lädt.
Warenkorb-Button	Anzeigen, Ausblenden	Ein runder Button mit Warenkorb-Symbol und Anzahl, der unten rechts im Browserfenster schwebt, sobald Tickets im Warenkorb liegen und der Warenkorb gerade nicht zu sehen ist. Ein Klick scrollt Ihre Seite zum Warenkorb.

So erkennt „Automatisch“ das Farbschema Ihrer Website, in dieser Reihenfolge:

1. Kennzeichnet Ihre Website selbst, ob sie hell oder dunkel ist (wie es viele Website-Baukästen und Themes mit einem Dunkelmodus tun), übernimmt der Shop diese Angabe.
2. Sonst prüft der Shop die Hintergrundfarbe der Fläche, auf der er sitzt: dunkler Hintergrund ergibt „Dunkel“, heller „Hell“.
3. Lässt sich beides nicht erkennen, gilt die Einstellung im Browser bzw. Betriebssystem des Besuchers.

Schaltet Ihre Website zwischen Hell und Dunkel um, zieht der eingebettete Shop sofort nach.

Vorschau: hell und dunkel

Mit Dunkle Seite simulieren färbt sich der Hintergrund der Vorschau dunkel, mit Helle Seite simulieren wieder hell. So prüfen Sie, wie der Shop auf einer dunklen oder hellen Website wirkt. Bei Farbschema „Automatisch“ wechselt der Shop in der Vorschau dabei mit; bei „Hell“ oder „Dunkel“ bleibt er, wie gewählt.

Vorschau mit fester Höhe

Die Vorschau zeigt den Shop in einer festen Höhe mit eigenem Scrollbalken. Auf Ihrer Website wächst und schrumpft der Shop automatisch mit seinem Inhalt. Sie müssen keine Höhe einstellen.

Snippet in die Website einfügen

Der Schnipsel besteht aus drei Teilen: einem Platzhalter mit Ihrer Shop-URL und den gewählten Optionen, einer Ladeanimation in Ihrer Shop-Farbe mit ihren Stilangaben und einer Zeile, die das Skript von HEXLE Ticket lädt. Vereinfacht sieht er so aus:

<div id="hexle-shop" data-shop="yoga-festival-sonnenschein" data-theme="auto" … >
    <div class="hexle-shop-loader" data-hexle-loader> … Ticketshop wird geladen… </div>
</div>
<style> … </style>
<script src="https://ticket.hexle.cloud/embed.js" async></script>

Verwenden Sie immer den vollständigen Schnipsel aus Snippet kopieren, nicht dieses Beispiel.

1. Kopieren Sie den Schnipsel in HEXLE Ticket mit Snippet kopieren.
2. Öffnen Sie in Ihrem Website-System (z. B. WordPress) die Seite, auf der der Shop erscheinen soll, im Bearbeitungsmodus.
3. Fügen Sie an der gewünschten Stelle ein Element ein, das eigenen HTML-Code unverändert übernimmt. Wie dieses Element heißt, hängt von Ihrem Website-System ab.
4. Fügen Sie den Schnipsel vollständig ein, also inklusive der Zeile mit <script … embed.js …> am Ende.
5. Speichern bzw. veröffentlichen Sie die Seite und öffnen Sie sie im Browser. Zuerst erscheint die Ladeanimation „Ticketshop wird geladen…“, dann der Shop.

Der Shop fügt sich in den Textfluss Ihrer Seite ein und passt seine Höhe an den Inhalt an. Ihr eigener Text darunter rückt automatisch nach, wenn der Shop wächst, z. B. wenn Besucher Tickets in den Warenkorb legen oder einen Filter ändern.

Wenn nur die Ladeanimation erscheint

Der Shop lädt erst durch die <script>-Zeile. Entfernt Ihr Website-System diese Zeile beim Speichern, bleibt nur die Ladeanimation stehen. Prüfen Sie dann, ob das gewählte Element Skripte zulässt.

Schnipsel neu kopieren

Tickets, Preise, Texte und Verfügbarkeit aktualisieren sich im eingebetteten Shop von selbst. Neu kopieren und ersetzen müssen Sie den Schnipsel, wenn Sie eine Darstellungsoption ändern möchten, wenn Sie die Öffentliche URL geändert haben oder wenn Sie die Shop-Farbe geändert haben: Die Farbe der Ladeanimation steht fest im Schnipsel, der Shop selbst übernimmt die neue Farbe dagegen sofort.

Was Ihre Besucher im eingebetteten Shop sehen

Der eingebettete Shop ist eine schlanke Fassung Ihrer Verkaufsseite. Den Rahmen um den Shop liefert Ihre Website.

Bereich	Eingebettet	Auf der Verkaufsseite
Kopfbereich mit Eventname, Beschreibung, Termin, Ort, Titelbild, Logo und Hintergrundbild	fehlt – stellen Sie diese Angaben selbst auf Ihre Website (das Logo erscheint nur noch im Kasten „Im Auftrag des Veranstalters“)	ja
Info-Nachricht	fehlt	ja
Navigation oben und Fußzeile von HEXLE Ticket	fehlen	ja
Kleine Leiste oben rechts mit HEXLE-Ticket-Logo, Hell/Dunkel-Schalter (wenn eingeschaltet) und dem Symbol Shop in neuem Tab öffnen	ja	–
Textblock über Tickets, Ticketauswahl mit Filtern, Warenkorb	ja	ja
Textblock unter Tickets, Sponsoren, Kasten „Im Auftrag des Veranstalters“, AGB und Zusatzbedingungen	ja	ja
Hinweis „Ticketshop realisiert über HEXLE Ticket …“ am Ende	ja	–

Das Symbol Shop in neuem Tab öffnen öffnet Ihre normale Verkaufsseite in einem neuen Browser-Tab. Ist das Event vorbei (Event-Ende, ohne Ende der Beginn, liegt in der Vergangenheit), zeigt der eingebettete Shop statt der Tickets den Hinweis „Dieses Event ist leider vorbei.“

Welche Tickettypen erscheinen und was Käufer bei knappen oder ausverkauften Tickets sehen, ist dasselbe wie auf der Verkaufsseite: Tickettypen, Wann ein Tickettyp im Shop erscheint und Verfügbarkeit, Was Käufer im Shop sehen.

Zur Kasse: der Checkout öffnet als ganze Seite

Klickt ein Besucher im eingebetteten Shop auf Zur Kasse, öffnet sich der Checkout im ganzen Browserfenster anstelle Ihrer Website, nicht im eingebetteten Bereich. Bezahlseiten dürfen nicht innerhalb einer anderen Website laufen. Der Besucher verlässt Ihre Website also für den Kaufabschluss. Wie lange die Tickets dabei reserviert bleiben, steht unter Verfügbarkeit, Reservierung im Warenkorb. Die einzelnen Schritte des Checkouts beschreibt Für Ihre Kunden: Tickets online kaufen, Der Checkout.

Andere Wege zu Ihrem Shop

Nicht jede Website erlaubt eigenen Code. Diese Alternativen brauchen keinen Schnipsel:

Weg	Wo Sie ihn bekommen
Link auf die Verkaufsseite, z. B. als Button „Tickets kaufen“ auf Ihrer Website oder in einem Newsletter	URL kopieren im Feld Öffentliche URL der Shop-Konfiguration oder Shopseite öffnen auf der Verkaufsseite
QR-Code der Verkaufsseite, z. B. für Plakate und Flyer	QR-Code anzeigen im Feld Öffentliche URL der Shop-Konfiguration
Eventübersicht mit Ihren veröffentlichten Events auf einer Seite, als Link von Ihrer Website	Event-Organisation › Eventübersicht, Button Link kopieren, siehe Eventübersicht

Rechte und Nur-Lesen

• Den Tab Einbetten sieht jeder, der die Seite Verkaufsseite öffnen darf. Zum Kopieren des Schnipsels brauchen Sie kein Recht zum Bearbeiten, denn im Tab wird nichts gespeichert.
• Ist „Ticket Verkauf & Events“ nur lesbar, etwa nach Ablauf der Testphase, können Sie den Schnipsel weiterhin kopieren.

Mehr dazu: Lizenzen, Module und Rechte.

Weiterführende Seiten

• Verkaufsseite gestalten – Textblöcke, AGB, Sponsoren und Shop-Farbe, die auch im eingebetteten Shop erscheinen
• Shop-Konfiguration – Öffentliche URL, Link und QR-Code
• Basis-Einrichtung – Shop veröffentlichen
• Verfügbarkeit und Kontingente – Reservierung im Warenkorb, „n verfügbar“ und „Ausverkauft“
• Eventübersicht – alle veröffentlichten Shops auf einer Seite