Une fois que vous avez configuré BookDirect, ajouté votre contenu et ajusté l'image de marque et le design, la dernière pièce du puzzle qui reste est l'intégration de BookDirect sur votre site web
Clock PMS+ vous offre plusieurs options d'intégration, telles que les intégrations externes ou internes, et l'utilisation d'autres éléments comme un formulaire de réservation sur la page d'accueil, un bouton de rappel et des scripts de suivi.
Veuillez lire ci-dessous pour plus d'informations sur toutes ces options à votre disposition.
Important: Bien que toutes les options d'intégration soient assez simples et conviviales, nous vous recommandons de consulter un développeur web et de lui fournir les informations ci-dessous, au cas où vous n'auriez pas d'expérience et d'expertise en matière de développement web.
Toutes les informations nécessaires pour les deux approches d'intégration - Externe ou Interne - peuvent être trouvées dans le menu Web-> Paramètres de BookDirect-> section Intégration du site Web.
Important: Si vous souhaitez intégrer plusieurs BookDirects (pour plusieurs hôtels) sur un même site web, ils doivent être intégrés sur des pages différentes de ce site.
Intégration externe
Cette option d'intégration est la plus simple à utiliser.
Si vous choisissez cette option d'intégration, il vous suffit d'ajouter un lien sur votre site Web. Lorsque les clients cliquent sur le lien, BookDirect s'ouvre dans une nouvelle fenêtre.
Note: BookDirect s'ouvrira dans une nouvelle fenêtre (onglet du navigateur) et les clients verront l'URL du service Clock PMS+ de votre WRS - https://sky-eu1.clock-software...
Pour obtenir le lien, cliquez sur Direct WRS URL (1) et copiez le lien qui vous sera présenté. Vous pouvez, à partir de ce moment, utiliser le lien comme vous le souhaitez - fournissez-le à votre développeur web pour qu'il l'ajoute à votre site web derrière un bouton "Réservez maintenant" par exemple ; utilisez-le dans vos emails pour diriger vos clients vers votre BookDirect ; utilisez-le dans vos campagnes de réseaux sociaux et plus encore.
Intégration interne
Cette option d'intégration garantit que les clients ne pourront pas faire la distinction entre le WRS et votre site Web et vous permet d'utiliser davantage d'outils d'intégration. Cependant, elle peut nécessiter une expertise en développement web un peu plus avancée.
Important: votre site Web doit fonctionner avec le protocole HTTPS pour utiliser l'intégration en ligne.
Note: s'ouvrira dans votre site Web et en fera partie intégrante. Les clients verront votre URL, par exemple - e.g. https://myclockhotel.com/book-now
Configuration
Pour activer l'intégration interne, vous devez d'abord entrer votre ou vos domaines sur lesquels vous intégrerez BookDirect dans le domaine hôtelier (intégration) (3).
Important: ajoutez tous les domaines que vous prenez en charge un par un - ceux avec et/ou sans 'www' et tous les sous-domaines.
BookDirect ne fonctionnera pas et produira un message d'erreur si vous l'intégrez à un site dont le domaine n'a pas été ajouté ici.
Une fois vos domaines ajoutés, cliquez sur Script d’intégration (2)
Important: le script ci-dessus contient à la fois du CSS et du JavaScript. Veuillez noter que certaines plateformes de création de sites web (par exemple Wordpress) peuvent vous demander de séparer les parties CSS et JavaScript et de les ajouter dans des sections différentes sur leur plateforme.
Choisissez parmi les options Mode par défaut et Coins arrondis
- Mode (5) - à partir d'ici, sélectionnez la façon dont BookDirect doit s'affichersur votre site Web. Vous avez le choix entre 3 options:
- Plein écran - s'affiche en plein écran et couvre votre page (de site Web).
- Par défaut - BookDirect ne couvre pas toute la page et votre site est visible en arrière-plan. La largeur de BookDirect permet de voir le contenu en deux colonnes.
- Mobile - BookDirect s'affiche à la largeur minimale et votre site est visible en arrière-plan. Le contenu se trouve sur une seule colonne.
- Coins arrondis (6) - Choisissez si les coins de BookDirect doivent être arrondis ou non..
- Langue du site (7) - sélectionnez la langue par défaut de BookDirect.
Note: quel que soit le mode sélectionné, BookDirect est très réactif aux tailles d'écran et, pour les appareils mobiles, il est toujours en plein écran.
Une fois que vous avez sélectionné le mode et les paramètres d'angle, il suffit de copier le script (8) et de l'envoyer à votre développeur web pour qu'il l'intègre à votre site web.
Important: le script doit être placé dans la balise <head> de toutes les pages où vous souhaitez intégrer BookDirect..
Outils d'intégration
Outre le simple fait d'ajouter BookDirect à une page de votre site Web, vous pouvez également utiliser plusieurs outils d'intégration lorsque vous utilisez l'intégration interne.
Bouton Réserver
Vous pouvez ajouter un bouton "Réserver/Réserver maintenant" à de nombreux endroits sur votre site web, qui, lorsqu'il est cliqué, ouvre BookDirect.
La conception, la taille et le libellé du bouton lui-même sont configurés par vous et votre développeur web.
La seule condition pour que le WRS s'ouvre est que le bouton ait un attribut de données spécifique:
- data-clock-pms-wbe-button
Exеmple:
<button type = "button" data-clock-pms-wbe-button> Book now </button>
Formulaire de réservation
Une approche très courante adoptée par de nombreux hôtels consiste à ajouter un formulaire de réservation directement sur la page d'accueil. Cela permet aux clients de saisir les dates d'arrivée et de départ et, éventuellement, tout autre code pendant qu'ils se trouvent sur votre page d'accueil (ou sur toute autre page à laquelle vous ajoutez le formulaire).
Lorsque les clients entrent leurs critères et effectuent leur recherche, le WRS s'ouvre directement à l'étape 2, présentant les types de chambres et les tarifs disponibles.
Comme pour le bouton Réserver, la conception du formulaire de réservation dépend entièrement de vous et de votre développeur Web. Toutefois, pour que le formulaire fonctionne correctement, certaines conditions doivent être remplies:
1. Le formulaire doit avoir l'attribut de données suivant:
- data-clock-pms-wbe-form
Exеmple:
<form data-clock-pms-wbe-form>
2. Les entrées du formulaire (date d'arrivée, date de départ, code Bonus, code société, code de bloc) doivent avoir une certaine valeur pour l'attribut du nom.
- arrival
- departure
- bonusCode
- companyCode
- blockCode
Exemple:
<input type = "date" name = "arrival" />
<input type = "date" name = "departure" />
<input type = "text" name = "bonusCode" />
<input type = "text" name = "companyCode" />
<input type = "text" name = "blockCode" />
3. Le bouton qui lance la recherche doit être de type:
- submit
Exemple:
<button type = "submit"> Book </button>
Bouton Rappel/Compléter votre réservation
Le troisième outil d'intégration que vous pouvez utiliser concerne la conversion.
Il s'agit essentiellement d'un bouton pop-up qui s'affiche si le client a lancé une recherche sur BookDirect, mais n'a pas effectué de réservation. Ce bouton pop-up agira comme un rappel pour compléter la réservation.
Quelques spécificités concernant le rappel:
- le script d'intégration (visible ci-dessous) se charge du positionnement, de l'affichage et du masquage du bouton.
- votre développeur web peut passer outre la configuration CSS définie et concevoir le rappel en fonction de vos besoins ou modifier sa position.
- si vous utilisez une architecture à page unique sur votre site Web, lorsque les clients cliquent sur le rappel, BookDirect s'ouvre à l'étape à laquelle les clients l'ont laissé.
- si vous n'utilisez pas l'architecture à page unique, BookDirect s'ouvrira à la page du calendrier (étape 1), mais tous les types de chambres/ tarifs sélectionnés avant que le client ne quitte BookDirect initialement, seront disponibles dans le panier.
Plusieurs conditions doivent être remplies pour que le bouton de rappel fonctionne correctement:
1. Le bouton de rappel doit avoir l'attribut de données suivant:
- data-clock-pms-wbe-reminder
2. Le bouton ou l'élément de la boîte qui ouvrira effectivement BookDirect doit avoir l'attribut de données suivant:
- data-clock-pms-wbe-button
Exemple complet:
<div data-clock-pms-wbe-reminder>
<button type = "button" data-clock-pms-wbe-button> Complete your booking </button>
</div>