Come creare un widget

Panoramica

Il widget di prenotazione TicketingHub è uno strumento JavaScript che si integra nei siti web e consente ai clienti di prenotare direttamente i prodotti. Viene creato nella dashboard, configurato sezione per sezione e integrato nel sito incollando un breve frammento di codice.

Browser supportati

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

Nella dashboard, accedere a Widget
Fare clic su Nuovo widget
Assegnare un nome al widget, scegliere i prodotti che deve vendere e fare clic su Crea widget

Si accederà alla pagina delle impostazioni del widget, dove è possibile configurare tutto il resto. Sul lato sinistro si trovano le impostazioni, raggruppate in sezioni; sul lato destro viene mostrata un’anteprima in tempo reale del widget, che si aggiorna man mano che si apportano modifiche.

Cosa si vende

Scegliere i prodotti, i pacchetti e le carte regalo offerti dal widget, includere gli extra (tutti oppure solo una selezione specifica) e decidere se i clienti possono acquistare i prodotti come buoni regalo o riscattare buoni regalo nel widget.

Processo di prenotazione

Scegliere come si muovono i clienti all’interno del widget: Prima i biglietti (scelgono i biglietti, quindi una data e un’ora), Prima l’evento (consultano un calendario, quindi scelgono cosa prenotare) oppure Solo riscatto dei voucher. È inoltre possibile impostare la visualizzazione predefinita del calendario e chiedere ai clienti di inserire due volte il proprio indirizzo e-mail per evitare errori di digitazione.

Regole di vendita

Controllare quando e cosa vende il widget: la data e l’ora di inizio della vendita, la data di apertura del calendario, quando mostrare la capacità residua di una fascia oraria e le valute con cui i clienti possono effettuare i pagamenti. Se la prima settimana o il primo mese mostrato dal calendario non contiene nulla da prenotare, il calendario procede in avanti e si apre sulla prima data disponibile.

Aspetto

Aggiungere CSS personalizzato per perfezionare l’aspetto del widget e adattarlo al proprio brand.

Analisi

Collegare Google Analytics o Google Tag Manager per monitorare il modo in cui i visitatori utilizzano il widget.

Avanzate

Indirizzare i clienti a una pagina a propria scelta dopo l’acquisto e impostare il parametro URL utilizzato dai rivenditori, in modo che le relative prenotazioni vengano attribuite a loro.

Anteprima, pubblicazione e integrazione

Le modifiche vengono salvate come bozza rispetto a un’anteprima in tempo reale: fare clic su Aggiorna anteprima per visualizzarle sulla destra senza modificare il widget attivo. Quando si è soddisfatti del risultato, fare clic su Pubblica per renderle effettive oppure su Annulla per eliminare la bozza.

Per inserire il widget nel proprio sito web, aprire Istruzioni di installazione: copiare il tag script nella propria pagina, quindi scegliere tra il widget Incorporato (visualizzato direttamente nel contenuto della pagina) e il widget Modale/Popup (che si apre in una sovrapposizione facendo clic su un pulsante), quindi incollare il frammento corrispondente.

Quando un cliente passa alla fase successiva, il widget torna all’inizio del modulo di prenotazione, così chi ha fatto scorrere una lunga lista di biglietti non si ritrova a metà della fase successiva. Se il widget è stato inserito in un pannello personalizzato che scorre, sarà quel pannello a muoversi e la pagina si sposterà a sua volta solo quando il pannello sarà uscito dalla visualizzazione. Il widget esegue questa operazione quando la parte superiore del modulo è uscita dalla visualizzazione e quando il modulo supera il bordo inferiore dello schermo, lasciando comunque spazio sufficiente sopra di esso. Un modulo che entra già interamente nello schermo rimane nella posizione in cui si trova; inoltre, il widget lascia spazio per un’intestazione fissata nella parte superiore della pagina.

Se questo comportamento non è adatto al layout, impedire lo scorrimento della pagina aggiungendo "scrollOnStepChange": false al codice del widget incollato:

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

Se l’intestazione si nasconde quando i visitatori scorrono verso il basso e ricompare quando scorrono verso l’alto, il widget non può misurarla e la parte superiore del modulo potrebbe finire dietro di essa. Invece di disattivare lo scorrimento, indicare al widget l’altezza dell’intestazione in pixel:

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

Se si utilizza l’editor dei widget classici, è possibile duplicare un widget invece di ricrearlo:

Accedere a Widget
Selezionare un widget esistente
Fare clic su Clona
Scegliere il canale di destinazione e confermare la selezione

Personalizzare il widget clonato, quindi pubblicarlo e copiare il codice nel proprio sito.