La plupart des clients qui réservent directement auprès de vous commencent par se rendre sur votre propre site web, et non sur votre page de réservation. Le widget est ce qui relie les deux : un moteur de recherche par date, ou simplement un bouton, qui figure sur votre site et redirige le client vers votre page de réservation Prostay avec ses dates déjà renseignées. Cet écran vous permet de le créer et vous fournit la ligne de code nécessaire à son installation.
En quoi consiste exactement ce widget ?
Il s’agit d’une simple balise de script. Vous la collez une seule fois sur votre site web, et elle affiche le widget à l’endroit où vous l’avez placée. Tout ce que vous sélectionnez sur cet écran est intégré dans cette seule ligne, ce qui présente deux avantages : votre développeur web n’a pratiquement rien à faire, et modifier le widget ultérieurement se résume à copier une nouvelle ligne plutôt qu’à tout recréer.
Le widget ne gère pas lui-même les réservations. Il recueille les dates et redirige le client vers votre page de réservation, que vous personnalisez pour adapter l’apparence de votre Moteur de réservation . Les deux éléments sont configurés séparément et il est recommandé de leur donner un aspect harmonieux.
Organisation de l’écran
- Type de widget. La forme de l’élément. Cinq choix possibles, et la seule décision sur cet écran qui compte vraiment.
- Langage préféré du widget. Le langage dans lequel le widget est écrit.
- Aperçu du style. Le widget tel qu’il apparaîtra, actualisé à mesure que vous modifiez les paramètres.
- Le code d'intégration. Cliquez dessus pour le copier. C'est ce que vous devez insérer sur votre site web.
Les cinq types de widgets
Faites votre choix en fonction de l’espace disponible, et non de ce qui semble le plus esthétique sur cet écran. Un widget qui doit s’insérer de force dans une colonne étroite aura un rendu moins réussi qu’un widget choisi en fonction de l’espace dont il dispose.
| Type | De quoi s’agit-il, et où doit-il être placé ? |
|---|---|
| Horizontal | Les champs de date et le bouton sur une seule ligne. C’est la configuration par défaut, et la solution idéale pour un espace large : sous une image d’en-tête ou en haut d’une page d’accueil. |
| Stacked | Les mêmes champs disposés verticalement. Pour une barre latérale, une colonne étroite ou tout autre emplacement où la version horizontale serait compressée. |
| Floating bar | Une bande aux couleurs de votre marque comportant un message court à côté des dates. C’est le seul type doté de son propre message et de son propre arrière-plan, ce qui en fait le choix idéal pour une campagne : « Stationnement gratuit », « Réservez directement », « Troisième nuit à moitié prix ». |
| Large Button | Un bouton, et rien d’autre. Pas de dates : le client les choisit sur la page de réservation. Utilisez-le là où un sélecteur de dates risquerait d’encombrer l’affichage, comme sur une page de description de chambre. |
| Small Button | Le même, mais en plus petit. Conçu pour une barre de navigation, à côté de votre numéro de téléphone. |
Le choix de la langue
Preferred Widget Language définit la langue des textes du widget : les libellés des champs et le bouton. Sept langues sont disponibles : anglais, allemand, espagnol, français, italien, portugais et thaï, et le choix est indiqué dans le code d’intégration sous la forme d’un code à deux lettres.
Une seule langue est autorisée par widget ; veillez donc à l’adapter à la page sur laquelle il se trouve plutôt qu’ à vos visiteurs. Si votre site web comporte une page en anglais et une page en allemand, copiez le code deux fois, en choisissant une langue pour chaque copie, puis placez celle qui correspond sur chaque page.
Personnalisation du style pour l’adapter à votre site
| Champ | Ce qu’il modifie |
|---|---|
| Customize button text | Le texte du bouton. Disponible pour tous les types. « Check availability » (Réservez maintenant) est un choix par défaut plus sûr que « Book now » (Réservez votre chambre), car il est moins engageant et s’applique plus tôt dans le processus de décision. |
| Customize text | Barre flottante uniquement. Le message à côté des dates. Limitez-vous à quelques mots : il partage une seule bande avec deux champs de date et un bouton. |
| Brand Color | Barre flottante uniquement. L’arrière-plan de la bande. Se réinitialise sur « #1643E0 ». Les libellés de la barre étant blancs, une couleur pâle rendrait ici leur lecture impossible. |
| Button Color | Le bouton, quel que soit le type. Il revient à la valeur par déf#CD9744. C’est la seule couleur de votre site web qui ne doit pas se fondre dans le décor. |
Cliquez sur un champ de couleur pour ouvrir un sélecteur, ou saisissez une valeur hexadécimale. Le carré situé à côté affiche la couleur et le bouton bleu rétablit la valeur par défaut.
Nouvelle fenêtre ou la même
Open booking page in a new window? détermine si la page de réservation remplace votre site web dans l’onglet du client ou s’ouvre à côté de celui-ci.
Yes laisse votre site web ouvert derrière la page de réservation, ce qui est perçu comme moins contraignant et permet de retenir un client qui abandonne sa réservation sur votre site plutôt que de le perdre de vue. L’option «No » (Réserver et rester sur le site) conserve tout dans un seul onglet, ce qui est plus pratique sur un téléphone, où l’on perd facilement de vue un deuxième onglet. L'option « Oui » est le choix le plus courant pour un public utilisant principalement un ordinateur de bureau, et la différence est minime dans les deux cas.
Le code d’intégration
Cliquez sur la ligne pour la copier. Cela vaut la peine de la lire pendant trente secondes, car tout ce qu’elle contient correspond à vos choix :
demo-hotelest votre clé d’Établissement, qui permet au widget de savoir quelles chambres afficher.horizontalest le type de widget.lang=enest la langue.newWindow=1correspond à la réponse concernant l’ouverture dans une nouvelle fenêtre, où 1 signifie « Oui » et 0 « Non ».
Où le placer sur votre site web
Collez la ligne dans le code HTML de votre page, à l’endroit précis où vous souhaitez que le widget apparaisse. Dans la plupart des éditeurs de sites web, cela implique d’ajouter un bloc HTML ou un bloc d’intégration. Le widget s’affiche à l’emplacement de la balise ; ainsi, une balise placée dans le pied de page fera apparaître un widget dans le pied de page.
- Choisissez ici le type, la langue et les couleurs, puis cliquez sur «Save ».
- Cliquez sur le code pour le copier.
- Dans l’éditeur de votre site web, ajoutez un bloc HTML ou de code personnalisé à l’endroit où vous souhaitez placer le widget.
- Collez la ligne de code et publiez la page.
- Ouvrez la page comme le ferait un visiteur, aussi bien sur un téléphone que sur un ordinateur de bureau, et effectuez une véritable recherche.
Le seul élément qui mérite d’être testé minutieusement est le transfert. Sélectionnez des dates dans le widget, suivez le lien vers la page de réservation, puis vérifiez que les dates ont bien été reprises et que les chambres affichées correspondent bien à celles que vous attendiez. C’est là toute la fonction du widget, et c’est la seule partie dont un client remarquera le dysfonctionnement.