Booking Engine Plus - Most Common Customization Codes

• The font should be available for free from Google Fonts.
• Example applying Karla Font > Apply this CSS code in the Custom Meta Tags field: 

<!-- **START** CSS only Replace Font-Family - KB content **START** -->
<style>
    @import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700;800&display=swap');

    /* Apply to all elements starting with cb- class */
    [class^="cb-"],
    /* Apply to body and common text elements */
    body,
    p,
    span,
    a,
    li,
    td,
    th,
    div,
    /* Apply to all heading tags */
    h1, h2, h3, h4, h5, h6,
    /* Apply to form elements for consistency */
    input,
    textarea,
    select,
    button,
    label {
        font-family: 'Karla', sans-serif !important;
    }

    /* Optional: Specific font weights for headings or other elements */
    h1, h2, h3 {
        font-weight: 700 !important; /* Bold for main headings */
    }

    h4, h5, h6 {
        font-weight: 600 !important; /* Semi-bold for sub-headings */
    }
</style>
<!-- **END** CSS only Replace Font-Family - KB content **END** -->

• This customization targets the text "Adult" within the Guest selector.
• You can replace the text "Guests" with your preferred text and use the Language Wrappers to add your translations.
• Note: only replace the letters for Guests, do not remove any other characters.
• Apply this CSS code in the Custom Meta Tags field:

<!-- **START** Replace 'Adults' text with 'Guests' within Guest Selectors - KB content **START** -->
<style>

.cb-guestselector-adults-text {
        visibility: hidden;
        font-size: 0;
}
.cb-guestselector-adults-text::after {
        content: "Guests";
        font-size: 14px;
        visibility: visible;
}
</style>
<!-- **END** Replace 'Adults' text within Guest Selectors - KB content **END** -->

• You can replace the text "Children (0 to 3 years old)" with your preferred text and use the Language Wrappers to add your translations.
• Note: only replace the letters for Children (0 to 3 years old), do not remove any other characters.
• Apply this CSS code in the Custom Meta Tags field:

<!-- **START** Replace 'Children' text with 'Children (0 to 3 years old)' within Guest Selectors - KB content **START** -->
<style>
.cb-guestselector-popover .cb-guestselector-children-text {
  visibility: hidden;
  font-size: 0;
}

.cb-guestselector-popover .cb-guestselector-children-text::after {
  /* write the desired text between the quotation marks after content: */
  content: 'Children (0 to 3 years old)';
  font-size: 14px;
  visibility: visible;
}
</style>
<!-- **END** Replace 'Children' text with "Children (0 to 3 years old)" within Guest Selectors - KB content **END** -->

• Apply this CSS code in the Custom Meta Tags field:

<!-- **START** 'Hide Property Information section ' - KB content **START** --> 
<style> 
.cb-property-info {
      visibility: hidden;
       opacity: 0;
       color: transparent;
       width: 0;
       height: 270px;
 }

</style> 
<!-- **END** 'Hide Property Information section ' - KB content **END** -->

• Remember to replace the text with your preferred message. You can use the Language Wrappers to add your translations.
• Keep the message wrapped within quotation marks "". Each \A character represents a line break.
• Apply this CSS code in the Custom Meta Tags field:

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

/* This ensures the parent container stacks its children vertically */
.cb-landing-page div:has(>.cb-search-card) {
display: flex;
flex-direction: column;
}

.cb-landing-page div:has(>.cb-search-card)::after {
content: "Look for dates in June and for special offers use code: Summer deals. \A More options when selecting two nights minimun.";
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;
/* Adds some space between this new element and the search card below it */
margin-bottom: 15px;
}

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

• Remember to replace the text with your preferred message. You can use the Language Wrappers to add your translations.
• Keep the message wrapped within quotation marks "". Each \A represents a line break.
• Apply this CSS code in the Custom Meta Tags field:

<!-- **START** CSS only Adds Banner before Accommodations List - KB content **START** -->
<style>
.cb-accommodations-page::before {
content: "Click on the desired check-in date, to view availability for that date. \A Best price guarantee! We match prices. \A Call us to 555-555 or emails us to 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; /* Allows the \A to create a line break */
}
</style>
<!-- **END** CSS only Adds Banner before Accommodations List - KB content **END** -->

For this customization, we offer the following step-by-step guide: Add custom text below the Rate Plan name in the Booking Engine

• This customization targets the "Book Now" text within the shopping cart button
• You can replace the text Request to Book with your preferred text and use the Language Wrappers to add your translations.
• Note: only replace the letters for Request to Book, do not remove any other characters.
• Apply this CSS code in the Custom Meta Tags field:

<!-- **START** Replace the text 'Book Now' in the shopping cart to 'Request to Book' in all steps of the booking process - KB content **START* -->

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

   .cb-shopping-cart-confirm-button:after {
      font-size: 1rem;
      content: 'Request to Book';
      /* Ensure the content is centered and takes full width of the button */
      display: block;
      text-align: center;
      margin: auto;
   }
</style>

<!-- **END** Replace the text 'Book Now' in the shopping cart to 'Request to Book' in all steps of the booking process - KB content **END* -->

The Event System is a feature of our Booking Engine that enables communication with other applications and external programs. You can listen to events dispatched by the Booking Engine.

Review the complete guide to build upon our Event Emitter System for your custom solutions: Booking Engine Plus Event Emitter System.

Repurpose the Bank Transfer payment option and replace the text with your preferred solution. Please refer to our complete guide: Booking Engine Plus custom payment gateway and gift card support

A favicon (short for "favorite icon") is a small, square icon associated with your website. It's an important part of your property's branding, even though it's tiny.

How to prepare and host your custom favicon

• Create a 32×32 px (or 16×16 px) .ico or .png file.
• Upload it to an image host that provides a direct file URL (ending in .ico or .png). A recommended free option is  imgbb.
• On imgbb: click Start Uploading → select your icon → choose Don’t autodelete → Upload.
• In the Embed codes section, select Viewer links and copy the link that ends with .ico or .png.
• (Optional) Paste that link in an incognito window, right-click the image, and select Copy image address to confirm it is a direct file path.

JavaScript code to update the favicon

• Copy and insert the following code into the JavaScript field of the Booking Engine Customize section.
• Replace the URL https://www.google.com/favicon.ico with your own direct .ico or .png favicon URL.

<!-- **START** Update Favicon - KB content **START** -->
<script> 
  // Updates favicon dynamically 
  (() => { 
      const url = "https://www.google.com/favicon.ico"; // Replace with your desired favicon URL 
    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>
<!-- **END** Update Favicon - KB content **END** -->

• Explore these guides to integrate your Booking Engine Plus with your preferred platform(s):
  • Add your Cloudbeds Booking Engine link to your X (formerly Twitter) profile
  • Add your Booking Engine link to your Instagram profile
  • Add Facebook Messenger to your Booking Engine
  • Add WhatsApp Messenger to your Booking Engine

• You can add any script to the JavaScript field to connect third-party codes, such as your Cookie Management Consent Platform solution, Sojern, Triptease, The Hotel Networks, Carstack, AskSuite, Xendit, etc.
• If you are looking to build a custom tracking solution for the Booking Engine Plus, refer to our Event Emitter System guide.
• Analytics & Tracking Pixels: Connect your Booking Engine Plus with Google Analytics GA4, Google Ads, Google Tag Manager, and Facebook Pixel directly from the Analytics tab. Review our content related to these available integrations:
  • Connect Google Analytics with Cloudbeds Booking Engine
  • Google Ads integration with Cloudbeds Booking Engine
  • Add a Facebook Pixel to your Booking Engine

No need for customizations, if you set the Accommodation Occupancy for the Max Children to zero, the Booking Engine will not display the children option for that room type.