So erstellen Sie ein Widget

Übersicht

Das TicketingHub-Buchungs-Widget ist ein JavaScript-Tool, das in Websites integriert wird und Kunden ermöglicht, Produkte direkt zu buchen. Sie erstellen es im Dashboard, konfigurieren es Abschnitt für Abschnitt und fügen ein kleines Code-Snippet auf Ihrer Website ein.

Unterstützte Browser

Safari 16.4+, Chrome 111+, Firefox 128+.

Navigieren Sie in Ihrem Dashboard zu Widgets
Klicken Sie auf Neues Widget
Geben Sie dem Widget einen Namen, wählen Sie die Produkte aus, die es verkaufen soll, und klicken Sie auf Widget erstellen

Sie gelangen zur Einstellungsseite des Widgets, auf der alles Weitere konfiguriert wird. Auf der linken Seite befinden sich die nach Abschnitten gruppierten Einstellungen. Auf der rechten Seite wird eine Live-Vorschau des Widgets angezeigt, die bei jeder Änderung aktualisiert wird.

Was Sie verkaufen

Wählen Sie die Produkte, Pakete und Geschenkkarten aus, die das Widget anbietet, fügen Sie Extras hinzu (alle oder eine von Ihnen ausgewählte Zusammenstellung) und legen Sie fest, ob Kunden die Produkte als Geschenkgutscheine kaufen oder Geschenkgutscheine im Widget einlösen können.

Buchungsablauf

Legen Sie fest, wie sich Kunden durch das Widget bewegen: Zuerst Tickets (Tickets auswählen, dann Datum und Uhrzeit), Zuerst Veranstaltung (einen Kalender durchsuchen, dann auswählen, was gebucht werden soll) oder Nur Gutscheineinlösung. Sie können außerdem die standardmäßige Kalenderansicht festlegen und Kunden auffordern, ihre E-Mail-Adresse zweimal einzugeben, um Tippfehler zu vermeiden.

Verkaufsregeln

Steuern Sie, wann und was das Widget verkauft: den Beginn des Verkaufs, das Datum, mit dem der Kalender geöffnet wird, wann die verbleibende Kapazität eines Zeitfensters angezeigt wird und in welchen Währungen Kunden bezahlen können. Wenn die erste im Kalender angezeigte Woche oder der erste angezeigte Monat keine buchbaren Angebote enthält, schaut der Kalender weiter voraus und wird beim ersten verfügbaren Datum geöffnet.

Erscheinungsbild

Fügen Sie benutzerdefiniertes CSS hinzu, um das Erscheinungsbild des Widgets weiter anzupassen und an Ihre Marke anzugleichen.

Analytics

Verbinden Sie Google Analytics oder Google Tag Manager, um zu verfolgen, wie Besucher Ihr Widget nutzen.

Erweitert

Leiten Sie Kunden nach dem Kauf auf eine Seite Ihrer Wahl weiter und legen Sie den URL-Parameter fest, den Ihre Wiederverkäufer verwenden, damit ihre Buchungen ihnen zugeordnet werden können.

Vorschau, Veröffentlichen und Einbinden

Änderungen, die Sie vornehmen, werden als Entwurf anhand einer Live-Vorschau gespeichert. Klicken Sie auf Vorschau aktualisieren, um sie rechts anzuzeigen, ohne Ihr Live-Widget zu beeinflussen. Wenn Sie zufrieden sind, klicken Sie auf Veröffentlichen, um die Änderungen live zu schalten, oder auf Abbrechen, um den Entwurf zu verwerfen.

Um das Widget auf Ihrer Website einzubinden, öffnen Sie die Installationsanweisungen: Kopieren Sie das Script-Tag in Ihre Seite, wählen Sie anschließend zwischen dem eingebetteten Widget (wird direkt in Ihrem Seiteninhalt angezeigt) und dem Modal/Popup-Widget (wird über eine Schaltfläche als Overlay geöffnet) und fügen Sie das passende Snippet ein.

Wenn ein Kunde zum nächsten Schritt wechselt, scrollt das Widget zurück zum Anfang des Buchungsformulars. So landet ein Kunde, der in einer langen Ticketliste nach unten gescrollt hat, nicht in der Mitte des nächsten Schritts. Wenn Sie das Widget in einem eigenen scrollbaren Bereich platziert haben, wird dieser Bereich bewegt. Ihre Seite bewegt sich nur dann ebenfalls, wenn der Bereich selbst aus dem sichtbaren Bereich gescrollt wurde. Das Widget scrollt, wenn der Anfang des Formulars aus dem sichtbaren Bereich verschoben wurde oder wenn das Formular am unteren Bildschirmrand über den sichtbaren Bereich hinausgeht, während darüber noch ausreichend Platz vorhanden ist. Ein Formular, das bereits vollständig auf den Bildschirm passt, bleibt an seiner Position. Außerdem lässt das Widget Platz für einen am oberen Seitenrand fixierten Header.

Wenn dieses Verhalten nicht zu Ihrem Layout passt, verhindern Sie das Scrollen Ihrer Seite, indem Sie "scrollOnStepChange": false in den eingefügten Widget-Code aufnehmen:

<div id="embed_widget" data-th-embed data-th-config='{"widgetId":"YOUR-WIDGET-ID","scrollOnStepChange":false}'></div>

Wenn Ihr Header beim Herunterscrollen ausgeblendet wird und beim Hochscrollen wieder erscheint, kann das Widget seine Höhe nicht messen. Dadurch kann der Anfang des Formulars hinter dem Header verborgen werden. Anstatt das Scrollen zu deaktivieren, geben Sie dem Widget die Höhe Ihres Headers in Pixeln an:

<div id="embed_widget" data-th-embed data-th-config='{"widgetId":"YOUR-WIDGET-ID","scrollOffset":80}'></div>

Wenn Sie den klassischen Widget-Editor verwenden, können Sie ein Widget duplizieren, anstatt es erneut zu erstellen:

Navigieren Sie zu Widgets
Wählen Sie ein vorhandenes Widget aus
Klicken Sie auf Klonen
Wählen Sie den Zielkanal aus und bestätigen Sie die Auswahl

Passen Sie das geklonte Widget an, veröffentlichen Sie es und kopieren Sie den Code auf Ihre Website.