Så skapar du en widget

Översikt

TicketingHubs bokningswidget är ett JavaScript-verktyg som integreras på webbplatser och gör det möjligt för kunder att boka produkter direkt. Du skapar den i instrumentpanelen, konfigurerar den avsnitt för avsnitt och klistrar sedan in ett kort kodavsnitt på din webbplats.

Webbläsare som stöds

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

Gå till Widgets i instrumentpanelen
Klicka på Ny widget
Ge widgeten ett namn, välj vilka produkter den ska sälja och klicka på Skapa widget

Du kommer till widgetens inställningssida, där allt annat konfigureras. På vänster sida finns inställningarna, grupperade i avsnitt. På höger sida visas en förhandsgranskning av widgeten som uppdateras när du gör ändringar.

Konfigurera widgeten

Vad du säljer

Välj vilka produkter, paket och presentkort widgeten ska erbjuda, inkludera tillval (alla eller ett manuellt valt urval) och ange om kunder ska kunna köpa produkterna som presentkort eller lösa in presentkort i widgeten.

Bokningsflöde

Välj hur kunderna ska navigera genom widgeten: Biljetter först (välj biljetter och sedan datum och tid), Evenemang först (bläddra i en kalender och välj sedan vad du vill boka) eller Endast inlösen av presentkort. Du kan också ange standardvyn för kalendern och be kunderna skriva sin e-postadress två gånger för att undvika stavfel.

Försäljningsregler

Styr när och vad widgeten säljer: datum och tid då försäljningen börjar, vilket datum kalendern ska öppnas på, när återstående kapacitet för en tidslucka ska visas och vilka valutor kunderna kan betala med. Om den första veckan eller månaden som kalendern visar inte innehåller något att boka, visar kalendern ett senare intervall och öppnas på det första datum där det finns något att boka.

Utseende

Lägg till anpassad CSS för att finjustera widgetens utseende så att det passar ditt varumärke.

Analys

Anslut Google Analytics eller Google Tag Manager för att följa hur besökare använder widgeten.

Avancerat

Skicka kunderna till en valfri sida efter köpet och ange den URL-parameter som dina återförsäljare använder, så att deras bokningar tillskrivs dem.

Förhandsgranska, publicera och installera

Ändringar du gör sparas som ett utkast mot en liveförhandsgranskning – klicka på Uppdatera förhandsgranskning för att se dem till höger utan att påverka din aktiva widget. När du är nöjd klickar du på Publicera för att göra ändringarna aktiva eller på Avbryt för att ta bort utkastet.

Om du vill lägga widgeten på din webbplats öppnar du Installationsanvisningar: kopiera skripttaggen till din sida, välj sedan mellan widgeten Inbäddad (visas direkt i sidans innehåll) och widgeten Modal/Popup (öppnas som ett överlägg från en knapp) och klistra in motsvarande kodavsnitt.

Så rullar widgeten på sidan

När en kund går vidare till nästa steg rullar widgeten tillbaka till början av bokningsformuläret. På så sätt hamnar en kund som har rullat ned genom en lång lista med biljetter inte mitt i nästa steg. Om du har placerat widgeten i en egen panel som går att rulla i, är det den panelen som flyttas, och sidan flyttas bara om panelen själv har rullats ut ur synfältet. Detta sker när formulärets övre del har rullats ut ur synfältet och när formuläret sträcker sig utanför skärmens nederkant samtidigt som det finns gott om utrymme ovanför det. Ett formulär som redan får plats på skärmen lämnas där det är, och widgeten lämnar utrymme för en sidhuvudrad som är fixerad högst upp på sidan.

Om detta inte passar din layout kan du hindra sidan från att flyttas genom att lägga till "scrollOnStepChange": false i widgetkoden du klistrade in:

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

Om sidhuvudet döljs när besökare rullar ned och visas igen när de rullar upp kan widgeten inte mäta det, och formulärets övre del kan hamna bakom sidhuvudet. I stället för att stänga av rullningen kan du ange sidhuvudets höjd i pixlar för widgeten:

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

Om du använder den klassiska widgetredigeraren kan du duplicera en widget i stället för att bygga upp den igen:

Gå till Widgets
Välj en befintlig widget
Klicka på Klona
Välj målkanal och bekräfta valet

Anpassa den klonade widgeten, publicera den och kopiera sedan koden till din webbplats.