Rezervasyon Motoru Plus - En Yaygın Özelleştirme Kodları

• Yazı tipi Google Fonts üzerinden ücretsiz olarak temin edilebilir olmalıdır: Google Fonts.
• Karla Yazı Tipi uygulama örneği > Bu CSS kodunu Özel Meta Etiketler alanına uygula: 

<!-- **BAŞLANGIÇ** Sadece CSS ile Yazı Tipi Ailesi Değiştir - KB içeriği **BAŞLANGIÇ** -->
<style>
    @import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700;800&display=swap');

    /* cb- ile başlayan tüm sınıflara uygula */
    [class^="cb-"],
    /* body ve yaygın metin öğelerine uygula */
    body,
    p,
    span,
    a,
    li,
    td,
    th,
    div,
    /* tüm başlık etiketlerine uygula */
    h1, h2, h3, h4, h5, h6,
    /* tutarlılık için form öğelerine uygula */
    input,
    textarea,
    select,
    button,
    label {
        font-family: 'Karla', sans-serif !important;
    }

    /* isteğe bağlı: başlıklar veya diğer öğeler için özel yazı tipi kalınlıkları */
    h1, h2, h3 {
        font-weight: 700 !important; /* Ana başlıklar için kalın */
    }

    h4, h5, h6 {
        font-weight: 600 !important; /* Alt başlıklar için yarı kalın */
    }
</style>
<!-- **BİTİŞ** Sadece CSS ile Yazı Tipi Ailesi Değiştir - KB içeriği **BİTİŞ** -->

• Bu özelleştirme, Misafir seçicisindeki "Adult" metnini hedefler.
• "Guests" metnini istediğin metinle değiştirebilir ve çevirilerini eklemek için Dil Sarmalayıcıları kullanabilirsin.
• Not: sadece Guests kelimesindeki harfleri değiştir, diğer karakterleri kaldırma.
• Bu CSS kodunu Özel Meta Etiketler alanına uygula:

<!-- **BAŞLANGIÇ** Misafir Seçicilerindeki 'Adults' metnini 'Guests' ile değiştir - KB içeriği **BAŞLANGIÇ** -->
<style>

.cb-guestselector-adults-text {
        visibility: hidden;
        font-size: 0;
}
.cb-guestselector-adults-text::after {
        content: "Guests";
        font-size: 14px;
        visibility: visible;
}
</style>
<!-- **BİTİŞ** Misafir Seçicilerindeki 'Adults' metnini değiştirme - KB içeriği **BİTİŞ** -->

• "Children (0 to 3 years old)" metnini istediğin metinle değiştirebilir ve çevirilerini eklemek için Dil Sarmalayıcıları kullanabilirsin.
• Not: Sadece Children (0 to 3 years old) ifadesindeki harfleri değiştir, diğer karakterleri kaldırma.
• Özel Meta Etiketler alanına bu CSS kodunu uygula:

<!-- **BAŞLANGIÇ** Misafir Seçicilerde 'Children' metnini 'Children (0 to 3 years old)' ile değiştirme - KB içeriği **BAŞLANGIÇ** -->
<style>
.cb-guestselector-popover .cb-guestselector-children-text {
  visibility: hidden;
  font-size: 0;
}

.cb-guestselector-popover .cb-guestselector-children-text::after {
  /* İstenen metni tırnak işaretleri arasına yaz: */
  content: 'Children (0 to 3 years old)';
  font-size: 14px;
  visibility: visible;
}
</style>
<!-- **BİTİŞ** Misafir Seçicilerde 'Children' metnini 'Children (0 to 3 years old)' ile değiştirme - KB içeriği **BİTİŞ** -->

• Özel Meta Etiketler alanına bu CSS kodunu uygula:

<!-- **BAŞLANGIÇ** 'Tesis Bilgileri bölümünü Gizle' - KB içeriği **BAŞLANGIÇ** --> 
<style> 
.cb-property-info {
      visibility: hidden;
       opacity: 0;
       color: transparent;
       width: 0;
       height: 270px;
 }

</style> 
<!-- **BİTİŞ** 'Tesis Bilgileri bölümünü Gizle' - KB içeriği **BİTİŞ** -->

• Metni tercih ettiğin mesajla değiştir. Çevirilerini eklemek için Dil Sarmalayıcılarını kullanabilirsin.
• Mesajı tırnak işaretleri içinde "" tut. Her \A karakteri bir satır sonunu temsil eder.
• Bu CSS kodunu Özel Meta Etiketler alanına uygula:

<!-- **BAŞLANGIÇ** Sadece CSS ile Arama Kartından Sonra Banner Ekle - KB içeriği **BAŞLANGIÇ** -->
<style>

/* Bu, üst kapsayıcının çocuklarını dikey olarak sıralamasını sağlar */
.cb-landing-page div:has(>.cb-search-card) {
display: flex;
flex-direction: column;
}

.cb-landing-page div:has(>.cb-search-card)::after {
content: "Haziran ayındaki tarihlere bak ve özel teklifler için kodu kullan: Yaz fırsatları. \A En az iki gece seçildiğinde daha fazla seçenek.";
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;
/* Bu yeni öğe ile arama kartı arasında biraz boşluk ekler */
margin-bottom: 15px;
}

</style>
<!-- **BİTİŞ** Sadece CSS ile Arama Kartından Sonra Banner Ekle - KB içeriği **BİTİŞ** -->

• Metni tercih ettiğin mesajla değiştir. Çevirilerini eklemek için Dil Sarmalayıcılarını kullanabilirsin.
• Mesajı tırnak işaretleri içinde "" tut. Her \A bir satır sonunu temsil eder.
• Bu CSS kodunu Özel Meta Etiketler alanına uygula:

<!-- **BAŞLANGIÇ** Sadece CSS ile Konaklamalar Listesinden Önce Banner Ekle - KB içeriği **BAŞLANGIÇ** -->
<style>
.cb-accommodations-page::before {
content: "İstediğin giriş tarihine tıkla, o tarihin müsaitliğini gör. \A En iyi fiyat garantisi! Fiyatları eşitliyoruz. \A Bizi 555-555 numaralı telefondan arayabilir veya contact@emailtest.com adresine e-posta gönderebilirsin.";
    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; /* \A'nın satır sonu oluşturmasına izin verir */
}
</style>
<!-- **BİTİŞ** Sadece CSS ile Konaklamalar Listesinden Önce Banner Ekle - KB içeriği **BİTİŞ** -->

Bu özelleştirme için aşağıdaki adım adım kılavuzu sunuyoruz: Rezervasyon Motorunda Fiyat Planı adının altında özel metin Ekle

• Bu özelleştirme, alışveriş sepeti butonundaki "Hemen rezervasyon yap" metnini hedefler
• Metin Rezervasyon yapmayı talep et ile değiştirebilir ve çevirilerinizi eklemek için Dil Sarmalayıcıları kullanabilirsiniz.
• Not: sadece Rezervasyon yapmayı talep et metnindeki harfleri değiştirin, diğer karakterleri kaldırmayın.
• Bu CSS kodunu Özel Meta Etiketleri alanına uygulayın:

<!-- **BAŞLANGIÇ** Alışveriş sepetindeki 'Hemen rezervasyon yap' metnini rezervasyon sürecinin tüm adımlarında 'Rezervasyon yapmayı talep et' olarak değiştir - KB içeriği **BAŞLANGIÇ** -->

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

   .cb-shopping-cart-confirm-button:after {
      font-size: 1rem;
      content: 'Rezervasyon yapmayı talep et';
      /* İçeriğin ortalanmasını ve butonun tam genişliğini kaplamasını sağlar */
      display: block;
      text-align: center;
      margin: auto;
   }
</style>

<!-- **BİTİŞ** Alışveriş sepetindeki 'Hemen rezervasyon yap' metnini rezervasyon sürecinin tüm adımlarında 'Rezervasyon yapmayı talep et' olarak değiştir - KB içeriği **BİTİŞ** -->

Etkinlik Sistemi, Rezervasyon Motorumuzun diğer uygulamalarla ve dış programlarla iletişim kurmasını sağlayan bir özelliğidir. Rezervasyon Motoru tarafından gönderilen etkinlikleri dinleyebilirsin.

Özel çözümlerin için Etkinlik Yayımcı Sistemimizi geliştirmek üzere tam rehberi incele: Booking Engine Plus Event Emitter System.

Banka Havalesi ödeme seçeneğini farklı bir amaçla kullanabilir ve metni tercih ettiğin çözüme göre değiştirebilirsin. Lütfen tam rehberimize bak: Booking Engine Plus özel ödeme ağ geçidi ve hediye kartı desteği

Favicon (favori simge kelimesinin kısaltması), web sitenizle ilişkilendirilen küçük, kare bir simgedir. Tesisinizin markalaşmasının önemli bir parçasıdır, boyutu küçük olsa da.

Özel favicon'unuzu hazırlama ve barındırma

• 32×32 px (veya 16×16 px) boyutlarında .ico veya .png formatında bir dosya oluştur.
• Dosyayı, .ico veya .png ile biten doğrudan dosya URL'si sağlayan bir görsel barındırma servisine yükle. Ücretsiz ve önerilen bir seçenek imgbb’dir.
• imgbb'de: Start Uploading seçeneğine tıkla → simgeni seç → Don’t autodelete seç → Upload butonuna bas.
• Embed codes bölümünde Viewer links seçeneğini seç ve .ico veya .png ile biten bağlantıyı kopyala.
• (İsteğe bağlı) Bu bağlantıyı gizli modda aç, görsele sağ tıkla ve Resim adresini kopyala seçeneğiyle doğrudan dosya yolunu doğrula.

Favicon'u güncellemek için JavaScript kodu

• Aşağıdaki kodu Booking Engine Özelleştir bölümündeki JavaScript alanına kopyala ve yapıştır.
• URL olarak https://www.google.com/favicon.ico adresini kendi doğrudan erişilen .ico veya .png favicon URL'inle değiştir.

<!-- **BAŞLANGIÇ** Favicon Güncelleme - KB içeriği **BAŞLANGIÇ** -->
<script> 
  // Favicon'u dinamik olarak günceller 
  (() => { 
      const url = "https://www.google.com/favicon.ico"; // İstediğin favicon URL'si ile değiştir 
    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>
<!-- **BİTİŞ** Favicon Güncelleme - KB içeriği **BİTİŞ** -->

• Rezervasyon Motoru Plus’ını tercih ettiğin platform(lar)la entegre etmek için bu kılavuzları incele:
  • Cloudbeds Rezervasyon Motoru bağlantını X (eski adıyla Twitter) profilinize ekle
  • Rezervasyon Motoru bağlantını Instagram profilinize ekle
  • Rezervasyon Motoruna Facebook Messenger ekle
  • Rezervasyon Motoruna WhatsApp Messenger ekle

• Çerez Yönetimi Onay Platformu çözümün, Sojern, Triptease, The Hotel Networks, Carstack, AskSuite, Xendit gibi üçüncü taraf kodlarını bağlamak için JavaScript alanına herhangi bir script ekleyebilirsin.
• Rezervasyon Motoru Plus için özel bir takip çözümü oluşturmak istiyorsan, kılavuzumuza bak: Event Emitter Sistemi.
• Analizler ve Takip Pikselleri: Rezervasyon Motoru Plus’ını Google Analytics GA4, Google Ads, Google Tag Manager ve Facebook Pixel ile Analizler sekmesinden doğrudan bağla. Bu mevcut entegrasyonlarla ilgili içeriğimizi incele:
  • Google Analytics’i Cloudbeds Rezervasyon Motoru ile bağla
  • Google Ads entegrasyonu Cloudbeds Rezervasyon Motoru ile
  • Rezervasyon Motoruna Facebook Pixel ekle

Özelleştirmeye gerek yok, Konaklama Doluluğu için Maksimum Çocuk sayısını sıfır olarak ayarlarsan, Rezervasyon Motoru o oda tipi için çocuk seçeneğini göstermez.