Een widget maken

Overzicht

De TicketingHub-boekingswidget is een JavaScript-tool die in websites wordt geïntegreerd, zodat klanten producten rechtstreeks kunnen boeken. U maakt de widget in het dashboard, configureert deze per sectie en plakt een klein codefragment op uw website.

Ondersteunde browsers

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

Ga in uw dashboard naar Widgets
Klik op Nieuwe widget
Geef de widget een naam, selecteer de producten die deze moet verkopen en klik op Widget maken

U komt op de instellingenpagina van de widget terecht, waar u de overige instellingen configureert. Aan de linkerkant staan de instellingen, gegroepeerd in secties. Aan de rechterkant ziet u een livevoorbeeld van de widget dat wordt bijgewerkt wanneer u wijzigingen aanbrengt.

Wat u verkoopt

Kies de producten, pakketten en cadeaubonnen die de widget aanbiedt, voeg extra’s toe (alle extra’s of een handmatig geselecteerde selectie) en bepaal of klanten de producten als cadeaubonnen kunnen kopen of cadeaubonnen in de widget kunnen inwisselen.

Boekingsproces

Bepaal hoe klanten door de widget gaan: Eerst tickets (kies tickets en vervolgens een datum en tijd), Eerst evenement (blader door een kalender en kies vervolgens wat u wilt boeken) of Alleen cadeaubonnen inwisselen. U kunt ook de standaardkalenderweergave instellen en klanten vragen hun e-mailadres twee keer in te voeren om typefouten te voorkomen.

Verkoopregels

Bepaal wanneer en wat de widget verkoopt: de datum en tijd waarop de verkoop begint, de datum waarop de kalender opent, wanneer de resterende capaciteit van een tijdslot wordt weergegeven en in welke valuta’s klanten kunnen betalen. Als de eerste week of maand die de kalender toont geen boekingen bevat, kijkt de kalender vooruit en opent deze op de eerste datum waarvoor dat wel het geval is.

Uiterlijk

Voeg aangepaste CSS toe om het uiterlijk van de widget verder aan te passen, zodat deze bij uw huisstijl past.

Analyse

Koppel Google Analytics of Google Tag Manager om bij te houden hoe bezoekers uw widget gebruiken.

Geavanceerd

Stuur klanten na hun aankoop naar een pagina naar keuze en stel de URL-parameter in die uw resellers gebruiken, zodat hun boekingen aan hen worden toegeschreven.

Voorbeeld bekijken, publiceren en implementeren

Wijzigingen die u aanbrengt, worden als concept toegepast op een livevoorbeeld. Klik op Voorbeeld bijwerken om ze rechts te bekijken zonder uw livewidget te beïnvloeden. Wanneer u tevreden bent, klikt u op Publiceren om de wijzigingen live te zetten of op Annuleren om het concept te verwijderen.

Om de widget op uw website te plaatsen, opent u Installatie-instructies. Kopieer de scripttag naar uw pagina, kies vervolgens tussen de Ingebouwde widget (verschijnt rechtstreeks in de inhoud van uw pagina) en de Modale/pop-upwidget (opent als overlay via een knop) en plak het bijbehorende codefragment.

Wanneer een klant naar de volgende stap gaat, scrolt de widget terug naar de bovenkant van het boekingsformulier. Zo komt een klant die door een lange lijst met tickets heeft gescrold niet halverwege de volgende stap terecht. Als u de widget in een eigen paneel hebt geplaatst dat kan scrollen, beweegt dat paneel en beweegt uw pagina alleen mee wanneer het paneel zelf uit beeld is gescrold. Dit gebeurt wanneer de bovenkant van het formulier uit beeld is gescrold en wanneer het formulier onder de onderkant van het scherm doorloopt terwijl er boven het formulier nog voldoende ruimte is. Een formulier dat al volledig op het scherm past, blijft op zijn plaats. De widget houdt bovendien ruimte vrij voor een koptekst die aan de bovenkant van uw pagina is vastgezet.

Als dit niet bij uw lay-out past, kunt u voorkomen dat uw pagina beweegt door "scrollOnStepChange": false toe te voegen aan de widgetcode die u hebt geplakt:

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

Als uw koptekst verborgen wordt wanneer bezoekers omlaag scrollen en weer verschijnt wanneer ze omhoog scrollen, kan de widget de hoogte ervan niet meten en kan de bovenkant van het formulier erachter terechtkomen. Schakel het scrollen dan niet uit, maar geef de hoogte van uw koptekst op in pixels:

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

Als u de klassieke widgeteditor gebruikt, kunt u een widget dupliceren in plaats van deze opnieuw op te bouwen:

Ga naar Widgets
Selecteer een bestaande widget
Klik op Klonen
Kies het doelkanaal en bevestig de selectie

Pas de gekloonde widget aan, publiceer deze en kopieer de code naar uw website.