Booking Engine Plus: Códigos de personalización más utilizados

• La fuente debe estar disponible de forma gratuita en Google Fonts.
• Ejemplo aplicando la fuente Karla > Aplica este código CSS en el campo Custom Meta Tags: 

<!-- **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** -->

• Esta personalización apunta al texto "Adult" dentro del selector de huéspedes.
• Puedes reemplazar el texto "Guests" por el texto que prefieras y usar Language Wrappers para añadir tus traducciones.
• Nota: reemplaza únicamente las letras de Guests, no elimines ningún otro carácter.
• Aplica este código CSS en el campo Custom Meta Tags:

<!-- **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** -->

• Puedes reemplazar el texto "Children (0 to 3 years old)" por el texto que prefieras y usar Language Wrappers para añadir tus traducciones.
• Nota: reemplaza únicamente las letras de Children (0 to 3 years old), no elimines ningún otro carácter.
• Aplica este código CSS en el campo Custom Meta Tags:

<!-- **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** -->

• Aplica este código CSS en el campo Custom Meta Tags:

<!-- **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** -->

• Recuerda reemplazar el texto por el mensaje que prefieras. Puedes usar Language Wrappers para añadir tus traducciones.
• Mantén el mensaje dentro de comillas dobles "". Cada carácter \A representa un salto de línea.
• Aplica este código CSS en el campo Custom Meta Tags :

<!-- **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** -->

• Recuerda reemplazar el texto por el mensaje que prefieras. Puedes usar Language Wrappers para añadir tus traducciones.
• Mantén el mensaje dentro de comillas dobles "". Cada \A representa un salto de línea.
• Aplica este código CSS en el campo Custom Meta Tags :

<!-- **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** -->

Para esta personalización, ofrecemos la siguiente guía paso a paso: Agregar texto personalizado debajo del nombre del plan de tarifas en el Booking Engine

• Esta personalización modifica el texto "Book Now" dentro del botón del carrito de compras.
• Puedes reemplazar el texto Request to Book por el texto que prefieras y usar Language Wrappers para añadir tus traducciones.
• Nota: reemplaza únicamente las letras de Request to Book, no elimines ningún otro carácter.
• Aplica este código CSS en el campo Custom Meta Tags:

<!-- **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* -->

El Event System es una funcionalidad de nuestro Booking Engine que permite la comunicación con otras aplicaciones y programas externos. Puedes escuchar los eventos que el Booking Engine emite.

Revisa la guía completa para ampliar tu implementación sobre nuestro Event Emitter System y crear soluciones personalizadas: Booking Engine Plus Event Emitter System.

Reutiliza la opción de pago Bank Transfer y reemplaza el texto por tu solución preferida. Consulta nuestra guía completa: Soporte para pasarela de pago personalizada y tarjetas de regalo en Booking Engine Plus

Un favicon (icono de favoritos) es un pequeño icono cuadrado asociado a tu sitio web. Es una parte importante de la identidad de tu propiedad, aunque sea muy pequeño.

Cómo preparar y alojar tu favicon personalizado

• Crea un archivo 32×32 px (o 16×16 px) en formato .ico o .png.
• Súbelo a un servicio de alojamiento de imágenes que proporcione una URL directa al archivo (que termine en .ico o .png). Una opción gratuita recomendada es imgbb.
• En imgbb: haz clic en Start Uploading → selecciona tu icono → elige Don’t autodelete → Upload.
• En la sección Embed codes, selecciona Viewer links y copia el enlace que termina en .ico o .png.
• (Opcional) Pega ese enlace en una ventana de incógnito, haz clic derecho sobre la imagen y selecciona Copy image address para confirmar que se trata de una ruta directa al archivo.

Código JavaScript para actualizar el favicon

• Copia e inserta el siguiente código en el campo JavaScript de la sección Customize del Booking Engine.
• Reemplaza la URL https://www.google.com/favicon.ico con la URL directa de tu favicon en formato .ico o .png.

<!-- **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** -->

• Explora estas guías para integrar tu Booking Engine Plus con tus plataformas preferidas:
  • Agregar el enlace de Cloudbeds Booking Engine a tu perfil de X (antes Twitter)
  • Agregar el enlace de Booking Engine a tu perfil de Instagram
  • Agregar Facebook Messenger a tu Booking Engine
  • Agregar WhatsApp Messenger a tu Booking Engine

• Puedes añadir cualquier script en el campo JavaScript para conectar códigos de terceros, como tu plataforma de gestión de consentimiento de cookies, Sojern, Triptease, The Hotel Networks, Carstack, AskSuite, Xendit, etc.
• Si buscas crear una solución de tracking personalizada para Booking Engine Plus, consulta nuestra guía del Event Emitter System.
• Analytics y píxeles de seguimiento: Conecta tu Booking Engine Plus con Google Analytics GA4, Google Ads, Google Tag Manager y Facebook Pixel directamente desde la pestaña Analytics. Revisa nuestro contenido relacionado con estas integraciones disponibles:
  • Conectar Google Analytics con Cloudbeds Booking Engine
  • Integración de Google Ads con Cloudbeds Booking Engine
  • Agregar un Facebook Pixel a tu Booking Engine

No necesitas personalizaciones; si configuras la ocupación del alojamiento con el valor máximo de niños en cero, el Booking Engine no mostrará la opción de niños para ese tipo de habitación.