Personnaliser la page de réservation Beds24, pas à pas

Où se règle la page de réservation dans Beds24

À l’heure où nous écrivons (octobre 2026), le wiki Beds24 place la page sous (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE, en plusieurs onglets, que nous citons en anglais comme le wiki :

Ne testez pas sur la page de vos clients. Beds24 gère jusqu’à six mises en page à la fois : enregistrez vos changements sous la mise en page 2 et prévisualisez-la en ajoutant &layout=2 à l’adresse de la page. Votre lien habituel garde la mise en page par défaut.

Choisir un modèle et organiser les modules

La page se compose de modules en lignes (diaporama, équipements, calendrier, grille de prix, descriptions, conditions, carte), pour l’établissement, chaque chambre et chaque offre. Il existe sept modèles tout prêts ; le modèle 7 est celui par défaut.

1. Dans LAYOUT, choisissez le modèle le plus proche et cliquez sur Restore default, qui efface aussi vos changements sur cette mise en page.
2. Réglez la Position des modules inutiles sur « not used » : une page courte se lit mieux sur mobile.
3. Réglez chaque module restant via Manage, affichage mobile compris.
4. Fixez les largeurs sur une ligne de 12 colonnes, pour ordinateur et pour mobile.

Couleurs, police et logo

STYLE regroupe couleurs et police. Par défaut, à l’heure où nous écrivons, la page affiche un fond gris clair (#f4f4f4), un texte gris foncé (#424242), des liens et boutons bleus (#008acc) et la police Arial en 14 px. Accorder fond, boutons et police à votre site, c’est le changement le plus visible. Pour l’accessibilité, le wiki recommande des couleurs bien contrastées.

Pour le logo, le wiki conseille de le charger dans PICTURES, de copier son adresse via Manage, puis de l’insérer comme image dans le texte « Property Description 1 » de CONTENT.

Photos, langues et messages d’indisponibilité

Chargez vos photos dans (SETTINGS) BOOKING ENGINE > PICTURES et affectez-les à l’établissement, à une chambre ou à une offre. Deux pièges :

• Photos de chambre invisibles ? Elles n’apparaissent que si la mise en page contient un module de photos de chambre. Beaucoup n’utilisent que les photos d’offre : affectez-les alors à l’offre 1, toujours affichée.
• Paysage et portrait mélangés dans un même diaporama, ce que le wiki déconseille.

Pour traduire la page, choisissez une langue par défaut, activez les autres et saisissez vos descriptions dans chacune. Le message affiché quand une chambre n’est pas disponible (« Pas de disponibilité » en français) se modifie dans CONTENT, mais corrigez d’abord la cause : voir pourquoi une chambre ne se vend pas sur Beds24. Relisez aussi vos noms de chambre, qui sont souvent, dans de vrais comptes, des codes internes comme « XGL » ou « DBLV ».

Textes fixes et CSS : l’onglet DEVELOPER

Dans DEVELOPER, vous remplacez n’importe quel texte fixe, ajoutez des scripts et votre propre CSS, dans (SETTINGS) BOOKING ENGINE > PROPERTY BOOKING PAGE DEVELOPERS > « Custom CSS ». Trois règles reprises telles quelles de la page Custom CSS du wiki :

/* Masquer les centimes dans les prix */
.bookingpagecents {display:none;}

/* Taille des noms de chambre : augmentez le chiffre pour agrandir */
.at_roomnametext{font-size: 14px;}

/* Retirer le choix 0 pour le nombre d’adultes */
#inputnumadult option[value="0"] {display:none !important;}

Ajoutez une règle à la fois et vérifiez la page après chacune.

Vérifier sur mobile avant de publier

Dans LAYOUT, via Manage, chaque module s’affiche sur mobile directement, derrière un lien, ou pas du tout. Gardez la version mobile courte, puis testez-la sur un vrai téléphone :

• Pour 2 nuits et 2 adultes, dates, personnes et prix sont-ils visibles sans faire défiler de longs textes ?
• Les photos sont-elles nettes, les textes lisibles et les boutons faciles à toucher ?
• Le nombre de nuits s’affiche-t-il ? Sinon, le wiki propose .b24-selector-numnight { display: inline-block !important; }.
• Chaque langue est-elle complète, jusqu’au dernier écran ?
• En allant jusqu’au paiement sans payer, retrouvez-vous le total du premier écran ?

Si le total grimpe à la fin, regardez la taxe de séjour, un « upsell item » obligatoire dans Beds24. Pour l’inclure dès le premier écran, la page Upsell Items du wiki indique Total Price Style = « Total including obligatory », incompatible avec des frais « Per Booking » sur les réservations de plusieurs chambres.

« Powered by Beds24 » et votre propre domaine

Aucun réglage de ce guide ne change l’adresse en beds24.com ni le petit lien « powered by Beds24.com ». Pour cela, Beds24 propose Private Label : d’après le wiki, l’option met la page sur votre propre domaine (par exemple reserver.votre-hotel.ch), retire le lien Beds24 et utilise votre domaine dans le lien de paiement.

• Coût : 19,00 € par mois selon la page de tarifs Beds24, à l’heure où nous écrivons.
• Mise en place : un sous-domaine distinct de votre site, un enregistrement CNAME vers admin.beds24.com, un certificat SSL (Beds24 recommande Cloudflare) et jusqu’à 24 heures d’attente.
• Limites : un seul domaine par compte, et la présentation de la page ne change pas.

Quand le faire vous-même ne vaut plus la peine

L’argent est rarement l’obstacle : la même page de tarifs inclut sans supplément un « mobile friendly and fully customizable booking engine ». Le vrai coût, c’est votre temps, qui grandit avec chaque type de chambre, chaque langue et chaque règle CSS à revérifier.

Quand vos chambres arrivent encore chez le client sous forme de codes, que des textes manquent dans certaines langues ou que vos clients doivent réserver sur votre propre site, notre moteur de réservation Beds24 prend le relais, sans quitter Beds24 : vrais noms de chambre, lits, descriptions et photos en français, anglais, allemand, italien et espagnol ; vos couleurs, polices et logo, en module sur votre site ou en page hébergée ; la taxe de séjour par personne et par nuit, affichée dès le départ ; aucun lien « powered by Beds24 ». Tarifs et canaux restent dans Beds24, et si vous préférez, nous l’installons pour vous.

Questions fréquentes