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

Juss Reyes

Actualización 3 de diciembre de 2025 14:41

Descripción general

El nuevo Booking Engine Plus ofrece potentes herramientas de personalización, permitiéndote adaptar el aspecto y la experiencia del motor de reservas para que coincidan con la identidad única de tu propiedad y asegurar una experiencia fluida para tus huéspedes. Este artículo proporciona los códigos de personalización más utilizados para ayudarte a comenzar con ajustes simples.

Antes de comenzar

Los códigos personalizados solo afectan la apariencia visual del sitio web del Motor de Reservas. No modifican configuraciones del sistema ni las plantillas de correo electrónico. Puedes eliminar cualquier código personalizado en cualquier momento.
¿Necesitas ayuda? Puedes compartir este artículo y la siguiente guía con tu diseñador web o equipo de desarrollo: Personalizar el Motor de Reservas de Cloudbeds, donde también encontrarás información útil para insertar código personalizado.
Servicios profesionales de personalización: Nuestro equipo especializado en HTML, CSS y JavaScript ofrece asistencia práctica para implementar estos códigos o crear nuevos específicamente para ti. Más información aquí: Servicios de personalización de Booking Engine Plus
Para información sobre funciones y configuraciones del Motor de Reservas que no requieren código personalizado, consulta: Ajustes del Motor de Reservas de Cloudbeds.

‼️Consideraciones importantes

Los siguientes son códigos de auto-servicio cortesía. Úsalos a tu discreción.
Nota: A medida que los productos de Cloudbeds y el Motor de Reservas evolucionan, no podemos garantizar que estos códigos sigan funcionando con futuras actualizaciones. Pueden quedar obsoletos y requerir mantenimiento adicional. No brindamos soporte para la funcionalidad de código personalizado.
Cloudbeds no ofrece asistencia con diseño/desarrollo web de sitios hoteleros ni personalizaciones fuera de los Servicios de Personalización.
Responsabilidad del usuario y recomendaciones:
- Prueba el comportamiento del código en escritorio y móvil.
- Asegúrate de actualizar regularmente tus códigos y eliminar los que ya no funcionen.

Booking Engine Plus: aspectos destacados de personalización

USO DE CÓDIGOS Y COMPATIBILIDAD

CLASES ESTÁTICAS

WRAPPERS DE IDIOMA

Personalizar Booking Engine Plus requiere trabajar con códigos que modifican directamente tu plantilla HTML o front-end.

Los códigos del antiguo Motor de Reservas no son compatibles con el nuevo Booking Engine Plus. Los ejemplos en esta guía usan HTML, CSS y JavaScript para aplicar los cambios.

Hemos introducido clases estáticas, puntos de referencia confiables que permanecen constantes para aplicar estilos personalizados.

Cualquier elemento con el prefijo "cb-" es una clase estática que no cambiará.

Los códigos de este artículo reemplazan solo texto en inglés. Con CSS puedes agregar contenido traducido para otros idiomas.

Consulta nuestra guía completa: Wrappers de idioma para Booking Engine Plus.

Lista de los códigos de personalización más comunes

¿Dónde encontrar el campo Custom Meta Tags?

Los siguientes códigos deben añadirse en el campo Custom Meta Tags dentro de tu cuenta de Cloudbeds PMS.
Ruta de acceso: Account > Settings > Booking Engine > Customize > Embed Custom Code

Reemplazar la familia tipográfica del Booking Engine Plus

La fuente debe estar disponible de forma gratuita desde Google Fonts.
Ejemplo aplicando la fuente Karla en el campo Custom Meta Tags:

<!-- **START** Reemplazar familia tipográfica - KB **START** -->
<style>
    @import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700;800&display=swap');

    [class^="cb-"],
    body, p, span, a, li, td, th, div,
    h1, h2, h3, h4, h5, h6,
    input, textarea, select, button, label {
        font-family: 'Karla', sans-serif !important;
    }

    h1, h2, h3 { font-weight: 700 !important; }
    h4, h5, h6 { font-weight: 600 !important; }
</style>
<!-- **END** Reemplazar familia tipográfica - KB **END** -->

Reemplazar el texto "Adults" por "Guests" en todos los tipos de habitación

Este código modifica el texto “Adult”.
Puedes reemplazar “Guests” por el texto que desees y usar los Wrappers de idioma.
Nota: solo reemplaza las letras, no elimines otros caracteres.
Aplicar en Custom Meta Tags:

<!-- **START** Reemplazar 'Adults' por 'Guests' - KB **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** Reemplazar 'Adults' por 'Guests' - KB **END** -->

Reemplazar "Children" con "Children (0 to 3 years old)"

Puedes cambiar el texto y usar los Wrappers de idioma.
No elimines otros caracteres.
Aplicar en Custom Meta Tags:

<!-- **START** Reemplazar 'Children' - KB **START** -->
<style>
.cb-guestselector-popover .cb-guestselector-children-text {
  visibility: hidden;
  font-size: 0;
}

.cb-guestselector-popover .cb-guestselector-children-text::after {
  content: 'Children (0 to 3 years old)';
  font-size: 14px;
  visibility: visible;
}
</style>
<!-- **END** Reemplazar 'Children' - KB **END** -->

Ocultar la sección Información de la Propiedad

Insertar en Custom Meta Tags:

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

Añadir un mensaje debajo de la tarjeta de búsqueda

Reemplaza el texto según necesites.
Mantén el texto entre comillas. \A genera saltos de línea.
Insertar en Custom Meta Tags:

<!-- **START** Añadir banner debajo de Search Card - KB **START** -->
<style>
.cb-landing-page div:has(>.cb-search-card) {
  display: flex;
  flex-direction: column;
}

.cb-landing-page div:has(>.cb-search-card)::after {
  content: "Busca fechas en junio y para ofertas especiales usa el código: Summer deals. \A Más opciones al seleccionar mínimo dos noches.";
  white-space: pre-wrap;
  text-align: center;
  font-family: Poppins;
  background-color: #ECF0F1;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  color: #000;
  padding: 20px;
  border-radius: 40px;
  margin-bottom: 15px;
}
</style>
<!-- **END** Añadir banner debajo de Search Card - KB **END** -->

Añadir un mensaje sobre la lista de alojamientos

Reemplaza el texto según necesites.
Usa comillas y \A para saltos de línea.
Insertar en Custom Meta Tags:

<!-- **START** Añadir banner antes de lista de alojamientos - KB **START** -->
<style>
.cb-accommodations-page::before {
  content: "Haz clic en la fecha de check-in para ver disponibilidad. \A ¡Mejor precio garantizado! Igualamos tarifas. \A Contáctanos al 555-555 o a 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;
}
</style>
<!-- **END** Añadir banner antes de lista de alojamientos - KB **END** -->

Añadir texto personalizado bajo el nombre del plan de tarifas

Consulta la guía paso a paso aquí:
Añadir texto personalizado bajo el nombre del plan de tarifas

Reemplazar el texto "Book Now" en el carrito

Este código modifica el botón del carrito.
Puedes reemplazarlo y usar Wrappers.

<!-- **START** Reemplazar 'Book Now' - KB **START** -->
<style>
.cb-shopping-cart-confirm-button {
   font-size: 0 !important;
}
.cb-shopping-cart-confirm-button:after {
   font-size: 1rem;
   content: 'Request to Book';
   display: block;
   text-align: center;
   margin: auto;
}
</style>
<!-- **END** Reemplazar 'Book Now' - KB **END** -->

Personalizaciones avanzadas

Trabajar con el sistema Event Emitter

El sistema de eventos permite que el Motor de Reservas se comunique con aplicaciones externas.

Consulta la guía completa: Sistema Event Emitter de Booking Engine Plus.

Reemplazar el nombre e instrucciones de Transferencia Bancaria

Puedes reutilizar este método de pago y reemplazar su texto.
Guía completa: Pasarelas de pago personalizadas y gift cards

Reemplazar el favicon

El favicon es el ícono pequeño asociado a tu sitio web.
Copia este código en el campo JavaScript.

<!-- **START** Actualizar favicon - KB **START** -->
<script>
(() => {
    const url = "https://www.google.com/favicon.ico"; 
    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** Actualizar favicon - KB **END** -->

Opciones para reemplazar u ocultar el mapa de la propiedad

Consulta esta guía paso a paso: Ocultar o reemplazar el mapa de la propiedad

Redes sociales para tu Booking Engine Plus

Explora estas guías para integrar tu Motor de Reservas:

Códigos de terceros o soluciones de tracking

Puedes añadir cualquier script al campo JavaScript (cookies, Sojern, Triptease, etc.).
Para tracking avanzado, consulta el Sistema Event Emitter.
Analítica y píxeles de tracking: Desde la pestaña Analytics puedes conectar GA4, Google Ads, Google Tag Manager y Facebook Pixel:

FAQ

¿Cómo puedo ocultar el selector de niños en el Motor de Reservas?

No necesitas personalización. Si configuras la ocupación máxima de niños en cero, el Motor de Reservas no mostrará la opción de niños.

Ingresa el número máximo de adultos y establece el número de niños en 0 en Detalles del Alojamiento.

Establecer Max Children en 0 hará que se muestren solo adultos.

Relacionada con: