Comment créer un widget

Présentation

Le widget de réservation TicketingHub est un outil JavaScript qui s’intègre aux sites web et permet aux clients de réserver directement des produits. Vous le créez dans le tableau de bord, le configurez section par section, puis collez un petit extrait de code sur votre site.

Navigateurs pris en charge

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

Dans votre tableau de bord, accédez à Widgets
Cliquez sur Nouveau widget
Donnez un nom au widget, sélectionnez les produits qu’il doit vendre, puis cliquez sur Créer le widget

Vous arrivez sur la page des paramètres du widget, où tout le reste est configuré. La partie gauche contient les paramètres, regroupés en sections ; la partie droite affiche un aperçu en direct du widget, qui s’actualise à mesure que vous effectuez des modifications.

Ce que vous vendez

Sélectionnez les produits, les forfaits et les cartes-cadeaux proposés par le widget, ajoutez des options supplémentaires (toutes ou une sélection personnalisée), puis choisissez si les clients peuvent acheter les produits sous forme de bons-cadeaux ou utiliser des bons-cadeaux dans le widget.

Processus de réservation

Choisissez la manière dont les clients avancent dans le widget : Billets d’abord (sélection des billets, puis de la date et de l’heure), Événement d’abord (consultation d’un calendrier, puis sélection de la réservation) ou Utilisation de bons-cadeaux uniquement. Vous pouvez également définir l’affichage par défaut du calendrier et demander aux clients de saisir leur adresse e-mail deux fois afin d’éviter les erreurs de saisie.

Règles de vente

Contrôlez quand et ce que le widget vend : la date et l’heure de début des ventes, la date sur laquelle le calendrier s’ouvre, le moment où afficher la capacité restante d’un créneau horaire et les devises dans lesquelles les clients peuvent payer. Lorsque la première semaine ou le premier mois affiché dans le calendrier ne contient aucune réservation possible, le calendrier avance jusqu’à la première date disponible.

Apparence

Ajoutez du CSS personnalisé pour ajuster l’apparence du widget afin qu’elle corresponde à votre image de marque.

Analyses

Connectez Google Analytics ou Google Tag Manager pour suivre la manière dont les visiteurs utilisent votre widget.

Options avancées

Redirigez les clients vers la page de votre choix après l’achat et définissez le paramètre d’URL utilisé par vos revendeurs afin que leurs réservations leur soient attribuées.

Prévisualiser, publier et déployer

Les modifications que vous effectuez sont préparées dans un aperçu en direct : cliquez sur Mettre à jour l’aperçu pour les voir à droite sans modifier votre widget en ligne. Lorsque tout vous convient, cliquez sur Publier pour les mettre en ligne ou sur Annuler pour supprimer le brouillon.

Pour intégrer le widget à votre site web, ouvrez Instructions d’installation : copiez la balise script dans votre page, puis choisissez entre le widget Intégré (qui apparaît directement dans le contenu de votre page) et le widget Fenêtre modale/Popup (qui s’ouvre dans une fenêtre superposée depuis un bouton), puis collez l’extrait de code correspondant.

Lorsqu’un client passe à l’étape suivante, le widget revient en haut du formulaire de réservation. Ainsi, un client qui a fait défiler une longue liste de billets n’arrive pas au milieu de l’étape suivante. Si vous avez placé le widget dans un panneau qui défile de votre côté, c’est ce panneau qui se déplace ; votre page ne se déplace également que lorsque le panneau lui-même a défilé hors de la zone visible. Le widget effectue ce défilement lorsque le haut du formulaire a quitté la zone visible et lorsque le formulaire dépasse le bas de l’écran alors qu’il reste suffisamment d’espace au-dessus. Si le formulaire tient déjà dans l’écran, il reste à sa position, et le widget laisse de l’espace pour un en-tête fixé en haut de votre page.

Si ce comportement ne convient pas à votre mise en page, empêchez votre page de se déplacer en ajoutant "scrollOnStepChange": false au code du widget que vous avez collé :

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

Si votre en-tête se masque lorsque les visiteurs font défiler la page vers le bas et réapparaît lorsqu’ils la font défiler vers le haut, le widget ne peut pas le mesurer et le haut du formulaire peut se retrouver derrière l’en-tête. Plutôt que de désactiver le défilement, indiquez au widget la hauteur de votre en-tête en pixels :

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

Si vous utilisez l’éditeur de widgets classique, vous pouvez dupliquer un widget au lieu de le recréer :

Accédez à Widgets
Sélectionnez un widget existant
Cliquez sur Cloner
Choisissez le canal cible et confirmez la sélection

Personnalisez le widget cloné, puis publiez-le et copiez le code sur votre site.