Moteur de réservation Plus - Codes de personnalisation les plus courants

• La police doit être disponible gratuitement sur Google Fonts.
• Exemple d’application de la police Karla > Appliquez ce code CSS dans le champ Balises méta personnalisées : 

<!-- **DÉBUT** Remplacement CSS uniquement de la famille de polices - contenu KB **DÉBUT** -->
<style>
    @import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700;800&display=swap');

    /* Appliquer à tous les éléments dont la classe commence par cb- */
    [class^="cb-"],
    /* Appliquer au body et aux éléments de texte courants */
    body,
    p,
    span,
    a,
    li,
    td,
    th,
    div,
    /* Appliquer à toutes les balises de titre */
    h1, h2, h3, h4, h5, h6,
    /* Appliquer aux éléments de formulaire pour cohérence */
    input,
    textarea,
    select,
    button,
    label {
        font-family: 'Karla', sans-serif !important;
    }

    /* Optionnel : poids spécifiques pour les titres ou autres éléments */
    h1, h2, h3 {
        font-weight: 700 !important; /* Gras pour les titres principaux */
    }

    h4, h5, h6 {
        font-weight: 600 !important; /* Semi-gras pour les sous-titres */
    }
</style>
<!-- **FIN** Remplacement CSS uniquement de la famille de polices - contenu KB **FIN** -->

• Cette personnalisation cible le texte « Adult » dans le sélecteur de clients.
• Vous pouvez remplacer le texte « Guests » par celui de votre choix et utiliser les enveloppes linguistiques pour ajouter vos traductions.
• Note : ne remplacez que les lettres du mot Guests, ne supprimez aucun autre caractère.
• Appliquez ce code CSS dans le champ Balises méta personnalisées :

<!-- **DÉBUT** Remplacement du texte 'Adults' par 'Guests' dans les sélecteurs de clients - contenu KB **DÉBUT** -->
<style>

.cb-guestselector-adults-text {
        visibility: hidden;
        font-size: 0;
}
.cb-guestselector-adults-text::after {
        content: "Guests";
        font-size: 14px;
        visibility: visible;
}
</style>
<!-- **FIN** Remplacement du texte 'Adults' dans les sélecteurs de clients - contenu KB **FIN** -->

• Vous pouvez remplacer le texte « Children (0 to 3 years old) » par le texte de votre choix et utiliser les Language Wrappers pour ajouter vos traductions.
• Note : ne remplacez que les lettres pour Children (0 to 3 years old), ne supprimez aucun autre caractère.
• Appliquez ce code CSS dans le champ Balises méta personnalisées :

<!-- **START** Remplacer le texte 'Children' par 'Children (0 to 3 years old)' dans les sélecteurs de clients - contenu KB **START** -->
<style>
.cb-guestselector-popover .cb-guestselector-children-text {
  visibility: hidden;
  font-size: 0;
}

.cb-guestselector-popover .cb-guestselector-children-text::after {
  /* écrivez le texte souhaité entre les guillemets après content: */
  content: 'Children (0 to 3 years old)';
  font-size: 14px;
  visibility: visible;
}
</style>
<!-- **END** Remplacer le texte 'Children' par 'Children (0 to 3 years old)' dans les sélecteurs de clients - contenu KB **END** -->

• Appliquez ce code CSS dans le champ Balises méta personnalisées :

<!-- **START** Masquer la section Informations sur l’établissement - contenu KB **START** --> 
<style> 
.cb-property-info {
      visibility: hidden;
       opacity: 0;
       color: transparent;
       width: 0;
       height: 270px;
 }

</style> 
<!-- **END** Masquer la section Informations sur l’établissement - contenu KB **END** -->

• N'oubliez pas de remplacer le texte par votre message préféré. Vous pouvez utiliser les Language Wrappers pour ajouter vos traductions.
• Gardez le message entre guillemets "". Chaque caractère \A représente un saut de ligne.
• Appliquez ce code CSS dans le champ Balises méta personnalisées :

<!-- **START** CSS only Adds Banner after Search Card - KB content **START** -->
<style>

/* Cela garantit que le conteneur parent empile ses enfants verticalement */
.cb-landing-page div:has(>.cb-search-card) {
display: flex;
flex-direction: column;
}

.cb-landing-page div:has(>.cb-search-card)::after {
content: "Cherchez des dates en juin et pour des offres spéciales utilisez le code : Summer deals. \A Plus d'options en sélectionnant un minimum de deux nuits.";
white-space: pre-wrap;
text-align: center;
font-family: Poppins;
background-color: #ECF0F1;
font-size: 14px;
line-height: 1.4;
font-weight: 400;
color: #000000;
padding: 20px;
border-radius: 40px;
border-width: .5px;
/* Ajoute un peu d'espace entre ce nouvel élément et la carte de recherche en dessous */
margin-bottom: 15px;
}

</style>
<!-- **END** CSS only Adds Banner after Search Card - KB content **END** -->

• N'oubliez pas de remplacer le texte par votre message préféré. Vous pouvez utiliser les Language Wrappers pour ajouter vos traductions.
• Gardez le message entre guillemets "". Chaque \A représente un saut de ligne.
• Appliquez ce code CSS dans le champ Balises méta personnalisées :

<!-- **START** CSS only Adds Banner before Accommodations List - KB content **START** -->
<style>
.cb-accommodations-page::before {
content: "Cliquez sur la date d'arrivée souhaitée pour voir la disponibilité à cette date. \A Garantie du meilleur prix ! Nous égalons les prix. \A Appelez-nous au 555-555 ou envoyez-nous un e-mail à contact@emailtest.com";
    visibility: visible;
    text-align: center;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    color: #465560;
    background-color: #ECF0F1;
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 25px;
overflow: hidden;
display: flex;
flex-direction: column; 
justify-content: center; 
gap: 5;
white-space: pre-wrap; /* Permet au \A de créer un saut de ligne */
}
</style>
<!-- **END** CSS only Adds Banner before Accommodations List - KB content **END** -->

Pour cette personnalisation, nous proposons le guide pas à pas suivant : Ajouter un texte personnalisé sous le nom du plan tarifaire dans le moteur de réservation

• Cette personnalisation cible le texte « Réserver maintenant » dans le bouton du panier
• Vous pouvez remplacer le texte Demander à réserver par le texte de votre choix et utiliser les Language Wrappers pour ajouter vos traductions.
• Note : ne remplacez que les lettres du texte Demander à réserver, ne supprimez aucun autre caractère.
• Appliquez ce code CSS dans le champ Balises méta personnalisées :

<!-- **DÉBUT** Remplacer le texte 'Réserver maintenant' dans le panier par 'Demander à réserver' à toutes les étapes du processus de réservation - contenu KB **DÉBUT** -->

<style>
   .cb-shopping-cart-confirm-button {
      font-size: 0 !important;
   }

   .cb-shopping-cart-confirm-button:after {
      font-size: 1rem;
      content: 'Demander à réserver';
      /* Assurer que le contenu est centré et prend toute la largeur du bouton */
      display: block;
      text-align: center;
      margin: auto;
   }
</style>

<!-- **FIN** Remplacer le texte 'Réserver maintenant' dans le panier par 'Demander à réserver' à toutes les étapes du processus de réservation - contenu KB **FIN** -->

Le système d’événements est une fonctionnalité de notre moteur de réservation qui permet la communication avec d’autres applications et programmes externes. Vous pouvez écouter les événements émis par le moteur de réservation.

Consultez le guide complet pour développer votre propre solution avec notre système d’émetteur d’événements : Booking Engine Plus Event Emitter System.

Réutilisez l’option de paiement Virement bancaire et remplacez le texte par la solution de votre choix. Veuillez consulter notre guide complet : Booking Engine Plus custom payment gateway and gift card support

Un favicon (abréviation de « favorite icon ») est une petite icône carrée associée à ton site web. C’est un élément important de la marque de ton établissement, même s’il est minuscule.

Comment préparer et héberger ton favicon personnalisé

• Crée un fichier 32×32 px (ou 16×16 px) au format .ico ou .png.
• Téléverse-le sur un hébergeur d’images qui fournit une URL directe vers le fichier (se terminant par .ico ou .png). Une option gratuite recommandée est imgbb.
• Sur imgbb : clique sur Start Uploading → sélectionne ton icône → choisis Don’t autodelete → Upload.
• Dans la section Embed codes, sélectionne Viewer links et copie le lien qui se termine par .ico ou .png.
• (Facultatif) Colle ce lien dans une fenêtre de navigation privée, fais un clic droit sur l’image, puis sélectionne Copier l’adresse de l’image pour confirmer qu’il s’agit bien d’un chemin direct vers le fichier.

Code JavaScript pour mettre à jour le favicon

• Copie et insère le code suivant dans le champ JavaScript de la section Personnaliser du moteur de réservation.
• Remplace l’URL https://www.google.com/favicon.ico par l’URL directe de ton favicon au format .ico ou .png.

<!-- **DÉBUT** Mise à jour du favicon - contenu KB **DÉBUT** -->
<script> 
  // Met à jour le favicon dynamiquement 
  (() => { 
      const url = "https://www.google.com/favicon.ico"; // Remplace par l’URL de ton favicon 
    const ext = url.split(".").pop()?.toLowerCase() || ""; 
    const typeMap = { 
      svg: "image/svg+xml", 
      png: "image/png", 
      jpg: "image/jpeg", 
      jpeg: "image/jpeg", 
      ico: "image/x-icon", 
    }; 
    const type = typeMap[ext] || "image/x-icon"; 
    document 
      .querySelectorAll( 
        "link[rel='icon'], link[rel='apple-touch-icon'], link[rel='shortcut icon']" 
      ) 
      .forEach((el) => el.remove()); 
    document.head.insertAdjacentHTML( 
      "beforeend", 
      `<link rel="icon" href="${url}" type="${type}"> 
     ${ 
       ext === 'png' 
         ? `<link rel="apple-touch-icon" href="${url}" type="${type}">` 
         : "" 
     }` 
    ); 
  })(); 
</script>
<!-- **FIN** Mise à jour du favicon - contenu KB **FIN** -->

• Découvrez ces guides pour intégrer votre Booking Engine Plus à la ou aux plateformes de votre choix :
  • Ajouter le lien de votre Cloudbeds Booking Engine à votre profil X (anciennement Twitter)
  • Ajouter le lien de votre Booking Engine à votre profil Instagram
  • Ajouter Facebook Messenger à votre Booking Engine
  • Ajouter WhatsApp Messenger à votre Booking Engine

• Vous pouvez ajouter n’importe quel script dans le champ JavaScript pour connecter des codes tiers, tels que votre solution de gestion du consentement aux cookies, Sojern, Triptease, The Hotel Networks, Carstack, AskSuite, Xendit, etc.
• Si vous souhaitez créer une solution de suivi personnalisée pour le Booking Engine Plus, référez-vous à notre guide du système d’émission d’événements.
• Analytique & Pixels de suivi : Connectez votre Booking Engine Plus à Google Analytics GA4, Google Ads, Google Tag Manager et Facebook Pixel directement depuis l’onglet Analytique. Consultez nos contenus relatifs à ces intégrations disponibles :
  • Connecter Google Analytics avec Cloudbeds Booking Engine
  • Intégration Google Ads avec Cloudbeds Booking Engine
  • Ajouter un Pixel Facebook à votre Booking Engine

Pas besoin de personnalisations, si vous définissez l'Occupation de l’hébergement pour le nombre maximum d’enfants à zéro, le moteur de réservation n’affichera pas l’option enfants pour ce type de chambre.