Buchungsmaschine Plus – Die häufigsten Anpassungscodes

• Die Schriftart sollte kostenlos verfügbar sein bei Google Fonts.
• Beispiel für die Anwendung der Schriftart Karla > Wende diesen CSS-Code im Feld Benutzerdefinierte Meta-Tags an: 

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

    /* Anwenden auf alle Elemente mit Klassen, die mit cb- beginnen */
    [class^="cb-"],
    /* Anwenden auf body und gängige Textelemente */
    body,
    p,
    span,
    a,
    li,
    td,
    th,
    div,
    /* Anwenden auf alle Überschriften-Tags */
    h1, h2, h3, h4, h5, h6,
    /* Anwenden auf Formularelemente für Konsistenz */
    input,
    textarea,
    select,
    button,
    label {
        font-family: 'Karla', sans-serif !important;
    }

    /* Optional: Spezifische Schriftstärken für Überschriften oder andere Elemente */
    h1, h2, h3 {
        font-weight: 700 !important; /* Fett für Hauptüberschriften */
    }

    h4, h5, h6 {
        font-weight: 600 !important; /* Halbfett für Unterüberschriften */
    }
</style>
<!-- **END** Nur CSS Schriftfamilie ersetzen - KB-Inhalt **END** -->

• Diese Anpassung zielt auf den Text "Adults" innerhalb des Gäste-Auswahlfelds ab.
• Du kannst den Text "Guests" durch deinen bevorzugten Text ersetzen und die Sprach-Wrapper verwenden, um deine Übersetzungen hinzuzufügen.
• Hinweis: Ersetze nur die Buchstaben für Guests, entferne keine anderen Zeichen.
• Wende diesen CSS-Code im Feld Benutzerdefinierte Meta-Tags an:

<!-- **START** Ersetze 'Adults' durch 'Guests' im Gäste-Auswahlfeld - KB-Inhalt **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** Ersetze 'Adults' im Gäste-Auswahlfeld - KB-Inhalt **END** -->

• Du kannst den Text „Children (0 bis 3 Jahre)“ durch deinen bevorzugten Text ersetzen und die Language Wrappers verwenden, um deine Übersetzungen hinzuzufügen.
• Notiz: Ersetze nur die Buchstaben für Children (0 bis 3 Jahre), entferne keine anderen Zeichen.
• Wende diesen CSS-Code im Feld Custom Meta Tags an:

<!-- **START** Ersetze 'Children' durch 'Children (0 bis 3 Jahre)' in den Gäste-Auswahlen - KB-Inhalt **START** -->
<style>
.cb-guestselector-popover .cb-guestselector-children-text {
  visibility: hidden;
  font-size: 0;
}

.cb-guestselector-popover .cb-guestselector-children-text::after {
  /* Schreibe den gewünschten Text zwischen die Anführungszeichen nach content: */
  content: 'Children (0 bis 3 Jahre)';
  font-size: 14px;
  visibility: visible;
}
</style>
<!-- **END** Ersetze 'Children' durch 'Children (0 bis 3 Jahre)' in den Gäste-Auswahlen - KB-Inhalt **END** -->

• Wende diesen CSS-Code im Feld Custom Meta Tags an:

<!-- **START** Abschnitt 'Unterkunftsinformationen ausblenden' - KB-Inhalt **START** --> 
<style> 
.cb-property-info {
      visibility: hidden;
       opacity: 0;
       color: transparent;
       width: 0;
       height: 270px;
 }

</style> 
<!-- **END** Abschnitt 'Unterkunftsinformationen ausblenden' - KB-Inhalt **END** -->

• Denke daran, den Text durch deine bevorzugte Nachricht zu ersetzen. Du kannst die Language Wrappers verwenden, um deine Übersetzungen hinzuzufügen.
• Halte die Nachricht in Anführungszeichen "" eingeschlossen. Jedes \A steht für einen Zeilenumbruch.
• Füge diesen CSS-Code im Feld Custom Meta Tags ein:

<!-- **START** Nur CSS: Banner nach Suchkarte hinzufügen - KB-Inhalt **START** -->
<style>

/* Stellt sicher, dass der übergeordnete Container seine Kinder vertikal anordnet */
.cb-landing-page div:has(>.cb-search-card) {
display: flex;
flex-direction: column;
}

.cb-landing-page div:has(>.cb-search-card)::after {
content: "Suche nach Terminen im Juni und nutze für Sonderangebote den Code: Summer deals. \A Mehr Optionen bei Auswahl von mindestens zwei Nächten.";
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;
/* Fügt etwas Abstand zwischen diesem neuen Element und der Suchkarte darunter hinzu */
margin-bottom: 15px;
}

</style>
<!-- **END** Nur CSS: Banner nach Suchkarte hinzufügen - KB-Inhalt **END** -->

• Denke daran, den Text durch deine bevorzugte Nachricht zu ersetzen. Du kannst die Language Wrappers verwenden, um deine Übersetzungen hinzuzufügen.
• Halte die Nachricht in Anführungszeichen "" eingeschlossen. Jedes \A steht für einen Zeilenumbruch.
• Füge diesen CSS-Code im Feld Custom Meta Tags ein:

<!-- **START** Nur CSS: Banner vor Zimmerliste hinzufügen - KB-Inhalt **START** -->
<style>
.cb-accommodations-page::before {
content: "Klicke auf das gewünschte Check-in-Datum, um die Verfügbarkeit für dieses Datum anzuzeigen. \A Bestpreisgarantie! Wir gleichen Preise an. \A Ruf uns an unter 555-555 oder sende eine E-Mail an 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; /* Ermöglicht, dass \A einen Zeilenumbruch erzeugt */
}
</style>
<!-- **END** Nur CSS: Banner vor Zimmerliste hinzufügen - KB-Inhalt **END** -->

Für diese Anpassung bieten wir die folgende Schritt-für-Schritt-Anleitung an: Benutzerdefinierten Text unter dem Namen des Ratenplans in der Buchungsmaschine hinzufügen

• Diese Anpassung richtet sich an den Text „Jetzt buchen“ im Button des Warenkorbs
• Du kannst den Text Anfrage zur Buchung durch deinen bevorzugten Text ersetzen und die Language Wrappers verwenden, um deine Übersetzungen hinzuzufügen.
• Hinweis: Ersetze nur die Buchstaben für Anfrage zur Buchung, entferne keine anderen Zeichen.
• Wende diesen CSS-Code im Feld für benutzerdefinierte Meta-Tags an:

<!-- **START** Ersetze den Text 'Jetzt buchen' im Warenkorb durch 'Anfrage zur Buchung' in allen Schritten des Buchungsprozesses - KB-Inhalt **START* -->

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

   .cb-shopping-cart-confirm-button:after {
      font-size: 1rem;
      content: 'Anfrage zur Buchung';
      /* Stelle sicher, dass der Inhalt zentriert ist und die volle Breite des Buttons einnimmt */
      display: block;
      text-align: center;
      margin: auto;
   }
</style>

<!-- **END** Ersetze den Text 'Jetzt buchen' im Warenkorb durch 'Anfrage zur Buchung' in allen Schritten des Buchungsprozesses - KB-Inhalt **END* -->

Das Event-System ist eine Funktion unserer Buchungsmaschine, die die Kommunikation mit anderen Anwendungen und externen Programmen ermöglicht. Du kannst auf von der Buchungsmaschine ausgelöste Events hören.

Sieh dir den vollständigen Leitfaden an, um unser Event-Emitter-System für deine individuellen Lösungen zu erweitern: Booking Engine Plus Event Emitter System.

Nutze die Zahlungsoption Banküberweisung um und ersetze den Text durch deine bevorzugte Lösung. Bitte beachte unseren vollständigen Leitfaden: Booking Engine Plus benutzerdefiniertes Zahlungs-Gateway und Geschenkkarten-Unterstützung

Ein Favicon (Kurzform für „Favoriten-Symbol“) ist ein kleines, quadratisches Symbol, das mit deiner Website verknüpft ist. Es ist ein wichtiger Bestandteil des Brandings deiner Unterkunft, auch wenn es winzig ist.

So bereitest du dein individuelles Favicon vor und hostest es

• Erstelle eine 32×32 px (oder 16×16 px) .ico- oder .png-Datei.
• Lade sie bei einem Bildhost hoch, der eine direkte Dateiadresse (Endung .ico oder .png) bereitstellt. Eine empfohlene kostenlose Option ist imgbb.
• Bei imgbb: Klicke auf Start Uploading → wähle dein Icon aus → wähle Don’t autodelete → Upload.
• Im Abschnitt Embed codes wähle Viewer links und kopiere den Link, der auf .ico oder .png endet.
• (Optional) Füge diesen Link in ein Inkognito-Fenster ein, klicke mit der rechten Maustaste auf das Bild und wähle Bildadresse kopieren, um zu bestätigen, dass es sich um einen direkten Dateipfad handelt.

JavaScript-Code zum Aktualisieren des Favicons

• Kopiere und füge den folgenden Code im JavaScript-Feld im Abschnitt Anpassen der Buchungsmaschine ein.
• Ersetze die URL https://www.google.com/favicon.ico durch deine eigene direkte .ico- oder .png-Favicon-URL.

<!-- **START** Update Favicon - KB content **START** -->
<script> 
  // Aktualisiert das Favicon dynamisch 
  (() => { 
      const url = "https://www.google.com/favicon.ico"; // Ersetze durch deine gewünschte 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** -->

• Entdecke diese Anleitungen, um deine Booking Engine Plus mit deiner bevorzugten Plattform zu verbinden:
  • Füge den Link deiner Cloudbeds Booking Engine zu deinem X-Profil (ehemals Twitter) hinzu
  • Füge den Link deiner Booking Engine zu deinem Instagram-Profil hinzu
  • Füge Facebook Messenger zu deiner Booking Engine hinzu
  • Füge WhatsApp Messenger zu deiner Booking Engine hinzu

• Du kannst jedes Skript im JavaScript-Feld hinzufügen, um Drittanbieter-Codes zu verbinden, wie deine Cookie-Management-Consent-Plattform, Sojern, Triptease, The Hotel Networks, Carstack, AskSuite, Xendit usw.
• Wenn du eine eigene Tracking-Lösung für die Booking Engine Plus erstellen möchtest, verweise auf unsere Event Emitter System-Anleitung.
• Analytics & Tracking-Pixel: Verbinde deine Booking Engine Plus direkt aus der Registerkarte Analytics mit Google Analytics GA4, Google Ads, Google Tag Manager und Facebook Pixel. Sieh dir unsere Inhalte zu diesen verfügbaren Integrationen an:
  • Google Analytics mit Cloudbeds Booking Engine verbinden
  • Google Ads-Integration mit Cloudbeds Booking Engine
  • Facebook Pixel zu deiner Booking Engine hinzufügen

Es sind keine Anpassungen erforderlich. Wenn Sie die Belegung für Maximalanzahl Kinder auf null setzen, zeigt die Buchungsmaschine die Kinderoption für diesen Zimmertyp nicht an.