Widgets sur votre propre site web

Ce qu'est un widget

Un widget affiche votre boutique Unitlify directement sur votre propre site web. Le client reste sur votre site, cherche une offre, choisit une date et des billets et paie, sans passer sur unitlify.de. Techniquement, le widget est votre boutique dans un cadre : toutes les offres, les prix, les moyens de paiement et les textes juridiques proviennent d'Unitlify, les couleurs et les polices du designer de boutique.

Vous gérez les widgets sous Système de réservation → Intégration site web. Vous avez besoin pour cela du droit « Intégration site web ».

Étape 1 : autoriser le domaine

Avant qu'un widget fonctionne sur votre site web, le domaine du site doit être saisi sous Domaines autorisés. Sans autorisation, le widget affiche un message d'erreur à la place des offres.

• Saisir sans https://, par exemple mon-entreprise.fr. Avec ou sans www., cela n'a pas d'importance.
• Si le widget fonctionne sur un sous-domaine comme shop.mon-entreprise.fr ou billets.mon-entreprise.fr, saisissez ce sous-domaine. mon-entreprise.fr seul ne suffit pas.
• Le site web doit fonctionner en https.
• Après la saisie, il peut s'écouler jusqu'à une minute avant que l'autorisation soit effective partout.

Étape 2 : créer le widget

Cliquez sur Nouveau widget. L'éditeur vous guide en cinq étapes : type de widget, paramètres, design, contenu visible, enregistrer.

Les quatre types de widgets

Paramètres

• Langue : allemand, anglais, français ou espagnol. C'est la langue de repli. Le widget suit d'abord la langue de votre site web (l'attribut lang de la page), puis la langue du navigateur du client, puis ce paramètre.
• SUB-ID : un identifiant libre de 60 caractères maximum, selon lequel vous analysez ensuite les réservations. Plus d'informations ci-dessous.
• Nom et description : pour vous uniquement, ils apparaissent dans la liste des widgets et dans la vue détaillée de la réservation.
• Bouton : texte du bouton (40 caractères maximum, sinon « Réserver »), cible (boîte de réservation, page produit, catalogue) et si le bouton flotte en bas à droite ou se trouve sur le côté droit.

Design

Largeur en pixels (vide = pleine largeur), alignement, hauteur (s'adapte au contenu ou fixe), cadre et rayon des coins. Pour le catalogue, en plus : vignettes ou liste, vignettes par ligne et mise en avant ou non de la première offre. Sur mobile, il y a toujours une vignette par ligne.

Une hauteur fixe ajoute une barre de défilement propre au widget. « S'adapte au contenu » est presque toujours le meilleur choix.

Les couleurs, la police et la forme des vignettes ne se règlent pas ici mais dans le Designer de boutique. Elles s'appliquent à la boutique et à tous les widgets ensemble.

Contenu visible

Pour le catalogue et le produit, vous déterminez ce qui est visible : image, prix, durée et lieu sur la vignette ; titre, barre de recherche, filtres, nombre de résultats, bons cadeaux et bandeau de confiance autour ; galerie, description et points forts sur la page produit. Dans le widget, les éléments d'habillage sont désactivés par défaut, sauf les bons cadeaux. Les filtres n'apparaissent que s'il y a quelque chose à filtrer (au moins deux sites, langues ou prix). Le widget n'affiche les bons cadeaux qu'avec « Toutes les offres ».

Pour le widget Booking, vous choisissez uniquement si le calendrier, les billets restants et les catégories épuisées sont affichés.

Étape 3 : insérer le code d'intégration

Après l'enregistrement, l'éditeur affiche le code d'intégration :

<unitlify-katalog widget-id="VOTRE-ID-DE-WIDGET"></unitlify-katalog>
<script src="https://unitlify.de/widget/v1/katalog.js" defer></script>

Insérez les deux lignes à l'endroit de votre site web où le widget doit apparaître.

• WordPress, Elementor, Wix, Squarespace : insérer le code dans un élément HTML (pas dans un bloc de texte).
• Plusieurs widgets sur une page : chaque widget reçoit son propre élément <unitlify-katalog>. Le script ne doit figurer qu'une seule fois sur la page, mais une seconde fois ne nuit pas.
• Plugins de performance comme WP Rocket, LiteSpeed Cache ou Autoptimize : excluez katalog.js de « Retarder l'exécution du JavaScript », sinon le widget n'apparaît qu'après un clic sur la page.

Remplacer des paramètres dans le code

Vous pouvez remplacer des paramètres de design directement sur l'élément, sans créer un second widget dans le tableau de bord :

<unitlify-katalog widget-id="…" max-width="640" align="center" frame="border" lang="en"></unitlify-katalog>

L'attribut lang="de" est le moyen le plus rapide si le widget apparaît dans la mauvaise langue, par exemple parce que votre site web a défini lang="en-US".

Ce qui se passe après la réservation

Le client reste sur sa confirmation dans le widget, votre site web n'est pas quitté. Avec le widget Bouton, la prochaine ouverture recommence de zéro.

Pour votre agence web : après une réservation terminée, le widget déclenche sur l'élément l'événement unitlify:booking, sans données personnelles. Cela permet par exemple de déclencher un objectif de conversion dans Analytics. L'événement signifie « réservation créée », pas « payée » : il est également émis pour le virement et le paiement sur place. Pour les moyens de paiement avec redirection vers le prestataire (Klarna, iDEAL), il n'est pas déclenché.

SUB-ID : analyser les réservations par origine

Chaque widget peut porter une SUB-ID, par exemple accueil, landingpage-ete ou partenaire-hotel-x. À chaque réservation et à chaque achat de bon cadeau via le widget, la SUB-ID est enregistrée sur la réservation. Plusieurs widgets peuvent porter la même SUB-ID, ils sont alors analysés ensemble.

Vous voyez les résultats à trois endroits :

• Intégration site web : par widget, les réservations, les participants et le chiffre d'affaires sur 30 jours, 90 jours, 12 mois ou au total, et en dessous le tableau « Par SUB-ID ». Le chiffre d'affaires comprend toutes les réservations non annulées, donc aussi celles non encore payées.
• Liste des réservations : filtres « Tous les widgets » et « Toutes les SUB-ID ». Les filtres n'apparaissent que lorsque des widgets ou des SUB-ID existent.
• Export : colonnes « Widget (intégration) » et « SUB-ID ».

La SUB-ID est copiée au moment de la réservation. Si vous la modifiez plus tard, les anciennes réservations conservent l'ancien identifiant. Si vous supprimez un widget, ses réservations perdent le lien avec le widget ; la SUB-ID reste sur la réservation mais ne figure plus dans le filtre tant qu'aucun autre widget ne la porte.

Moyens de paiement dans le widget

Dans le widget s'appliquent les mêmes moyens de paiement et les mêmes règles que dans la boutique, voir Configurer les moyens de paiement. Pour Apple Pay, vous devez en plus saisir le domaine de votre site web sous Moyens de paiement → Domaines enregistrés.

Aperçu

L'aperçu dans l'éditeur affiche l'état enregistré. Vous ne voyez les modifications non enregistrées ni dans l'aperçu ni sur votre site web. Après l'enregistrement, il peut s'écouler jusqu'à une minute sur votre site web avant que la nouvelle version apparaisse.

Liste de contrôle en cas de problème

• Message d'erreur à la place des offres : domaine non autorisé, ou seul le domaine principal a été saisi au lieu du sous-domaine. Le message indique le domaine manquant.
• Le widget reste vide : le site web fonctionne en http au lieu de https, ou un plugin de performance retarde le script.
• Mauvaise langue : vérifier l'attribut lang de votre site web ou définir lang="de" sur l'élément.
• Modification non visible : non enregistrée, ou encore dans la minute de cache.
• Pas de bons cadeaux dans le catalogue : les bons cadeaux n'apparaissent qu'avec « Toutes les offres ».
• Apple Pay absent dans le widget : ajouter le domaine sous Moyens de paiement → Domaines enregistrés.
• Réservations absentes des statistiques du widget : la réservation n'est pas passée par le widget mais par le lien de la boutique ou un autre canal.