Tek Tesis Takvimi - Tarih Seçici Gömme

Gabriela Garcia

Güncellenme 01 Mart 2026 16:48

Genel Bakış

Bu bileşen, web sitende tesis düzeyinde tarih araması yapman gereken entegrasyonlar için tasarlanmıştır. Aşağıdaki alanlarda iyi çalışır:

Sitenin ana sayfası veya kahraman bölümü
Rezervasyon veya “Müsaitlik Kontrolü” bölümleri
Kullanıcıları tam rezervasyon akışına yönlendiren açılış sayfaları
Misafirin Rezervasyon Motoruna ulaşmadan önce tarih seçmesini istediğin herhangi bir sayfa

Bileşen, belirli bir oda değil, tesis düzeyinde müsaitliği (tüm oda tipleri genelinde) gösterir. Tarih seçildikten sonra misafir, oda seçip rezervasyonu tamamlayabileceği Rezervasyon Motoruna yönlendirilir.

Kurulum

Dış bir web sitesine Rezervasyon Motoru Web Bileşenleri eklemek için önce HTML belgesinin head bölümüne Immersive Experience scriptini eklememiz gerekir:

<cb-property-date-picker>, tesisin için tarih seçimi çubuğu sağlayan bir web bileşenidir. Giriş ve çıkış alanlarını, bir takvim açılır penceresini ve bir arama butonunu gösterir. Misafir tarihler seçip Arama’ya tıkladığında, bu tarihlerle birlikte Rezervasyon Motoruna yönlendirilir; burada oda seçip rezervasyonu tamamlayabilir.

Not: Birinci adımda yer alan tüm script etiketleri, Immersive Experience 2.0 ve tüm bileşenler için aynıdır. Daha önce başka bir gömme için kurduysan, tekrar kurmana gerek yoktur. Sadece web sitesinin (global) <head> bölümüne bir kez kurulması yeterlidir.

Önemli: Immersive Experience 2.0 web bileşen etiketlerini iframe içinde kullanma.

Bu kurulum kaydırma sorunlarına yol açabilir ve iframe zincirindeki her öğenin beyaz listeye alınmasını gerektirir — bu yapılandırma önerilmez.

Kullanıcı bir CMP kullandığında dikkat edilmesi gereken en iyi uygulamalar listesi:

Immersive Experience’ı, CMP etiketinden önce head’in en başına ekle ve engellenmesini önleyen özelliği dahil et. Dokümantasyonda hepsini belirtmektense, platforma göre farklılık gösterebilir
- Cookiebot: data-cookieconsent="ignore"
- OneTrust: data-ignore-consent="true"
- Quantcast: data-quantcast-ignore="true"
Aşağıdaki script’i CMP yönetici panelinde Gerekli olarak sınıflandır; bu da platforma göre değişebilir

<script src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js" type="text/javascript"></script>

Kurulum

Cloudbeds web bileşenleri betiğini HTML’in <head> bölümüne (veya bileşenden önce <body> içinde) ekle. Betik, herhangi bir <cb-property-date-picker> etiketi yüklenmeden önce çalışmalı ki bileşen kayıt edilsin.

Temel Kullanım

<script  
src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js">
</script>

Kurulumun yaptığı şey

Bu betiğin yüklenmesi, sayfada <cb-property-date-picker> bileşeninin kayıt edilmesini sağlar.
Betik yüklendikten sonra, bir veya daha fazla <cb-property-date-picker> etiketi istediğin yere yerleştirebilirsin. Her örnek, tarih seçici çubuğunu (giriş, çıkış ve arama butonu) gösterir ve misafir tarihler seçip arama butonuna tıkladığında, aşağıda açıklandığı gibi seçilen tarihlerle birlikte Rezervasyon Motoru’na (veya özel URL’ne) yönlendirir.

Bileşen Kullanımı

Minimum gerekli örnek

Bileşeni sadece betiğin data-property-code özelliği ile (bileşen üzerinde herhangi bir öznitelik olmadan) kullanabilir veya tesis kodunu bileşenin kendisine verebilirsin:

<cb-property-date-picker  
property-code="TESIS_KODUN"
></cb-property-date-picker>

Sadece tesis kodu (betikte veya bileşende) varsa, bileşen varsayılan “Ara” butonunu gösterir ve tesisinin varsayılan dilini ve para birimini kullanır.

Öznitelikler

Özellik	Gerekli	Varsayılan	Açıklama
`property-code`	Evet	—	Cloudbeds tesis kodun. Atlanırsa, bileşen script’in `data-property-code` değerini kullanır (sadece tek tesis için).
`button-label`	Hayır	"Ara"	Arama butonunda gösterilen metin (örn. “Müsaitliği Kontrol Et”, “Oda Ara”).
`layout`	Hayır	"yatay"	Tarih çubuğunun düzeni: `yatay` (tarihler ve buton yan yana) veya `dikey` (üst üste).
`open-in-new-tab`	Hayır	"false"	Rezervasyon Motoru’nun yeni sekmede açılıp açılmayacağı. `"true"` veya `"false"` string olarak kullanılır.
`lang`	Hayır	Tesis varsayılanı	Arayüz için dil kodu (örn. en, es).
`currency`	Hayır	Tesis varsayılanı	Gösterilen fiyatlar için para birimi kodu (örn. `usd`, `eur`).
`class-name`	Hayır	—	Bileşene özel stil vermek için uygulanan bir CSS sınıf adı.
`custom-url`	Hayır	—	Tarih seçimi sonrası Rezervasyon Motoru yerine yönlendirme yapılacak URL. `checkin`, `checkout`, `widget_source`, `promo` ve analiz parametrelerini sorgu parametreleri olarak alır.

Bileşenin Oluşturdukları

Sayfa yüklendiğinde: Giriş ve çıkış alanları ile bir arama butonundan oluşan bir tarih çubuğu (düzen layout özelliğine bağlı olarak yatay veya dikey). Bir tarih alanına dokunmak/tıklamak takvim açılır penceresini gösterir.
Açılır pencerede, misafir giriş ve çıkış tarihlerini seçer. Takvim, tesis düzeyindeki müsaitliği ve tesisinizin etkinleştirdiği kısıtlamalar veya fiyatları gösterir.
Arama yapıldığında (butona tıklama): Misafir, seçilen tarihlerle birlikte (aynı sekmede veya yeni sekmede, open-in-new-tab özelliğine bağlı olarak) Rezervasyon Motoruna yönlendirilir:
- Seçilen giriş tarihi
- Seçilen çıkış tarihi
- Dil ve diğer sorgu parametreleri (örn. promosyon, analizler)

custom-url ayarlarsan, aynı sorgu parametreleri (checkin, checkout, widget_source, promo, analizler) o URL’ye eklenir, böylece sayfan akışı devam ettirebilir.

Tesis Kodunu Bulma

Tesis kodun, Rezervasyon Motoru URL’ndeki benzersiz tanımlayıcıdır. Bunu PMS ayarlarında, Rezervasyon Motoru Özet Sekmesi altında bulabilirsin:

Kullanıcı Akışı

Misafir, sayfanda tarih çubuğunu (giriş, çıkış, arama butonu) görür.
Misafir bir tarih alanına tıklar → Takvim açılır penceresi açılır.
Misafir giriş tarihini seçer → Takvim müsait çıkış tarihlerini vurgular.
Misafir çıkış tarihini seçer → Arama butonu aktif olur.
Misafir arama butonuna tıklar → Seçilen tarihlerle birlikte Rezervasyon Motoruna (Belirtilen URL’ye, Örneğin Immersive Experience veya barındırılan URL) yönlendirilir, burada oda seçer ve rezervasyonu tamamlar.

Tarih Seçici Özellikleri

Takvim açılır penceresi şunları içerir:

Müsaitlik gösterimi: Tesis düzeyinde müsaitlik (tüm oda tipleri toplamı).
Kısıtlama göstergeleri: Minimum konaklama süresi, girişe kapalı günler ve diğer kısıtlamalar (tesis ayarlarında etkinleştirildiğinde).
En düşük fiyat gösterimi: Günlük en düşük müsait fiyat (tesis ayarlarında etkinleştirildiğinde).
Aynı gün rezervasyonları: Bugünün tarihi için rezervasyon (tesis ayarlarında etkinleştirildiğinde).
Yerelleştirilmiş arayüz: Etiketler ve mesajlar, ayarladığın lang özelliğine göre gösterilir.

Tesis Yapılandırması

Bazı davranışlar Cloudbeds’teki tesis ayarlarına bağlıdır. Bunlar, bileşen özellikleriyle değil, Cloudbeds Kontrol Panelinde yapılandırılır:

Ayar	Etki
`allowSameDayReservation`	Misafirlerin bugün tarihini giriş tarihi olarak seçmesine izin verir.
`showRestrictionsOnCalendar`	Kısıtlama göstergelerini (minimum konaklama, girişe kapalı vb.) gösterir.
`showLowestRatesOnCalendar`	Her gün için en düşük müsait fiyatı gösterir.

Kullanım Örnekleri

Temel (öğe üzerinde tesis kodu)

<cb-property-date-picker  
property-code="O2YXd0"
></cb-property-date-picker>

İsteğe bağlı özelliklerle

<cb-property-date-picker  
property-code="O2YXd0"  
button-label="Müsaitliği Kontrol Et"  
layout="vertical"  
lang="es"  
currency="eur"  
class-name="my-date-picker"
></cb-property-date-picker>

Rezervasyon Motorunu yeni sekmede aç

<cb-property-date-picker  
property-code="O2YXd0"  
open-in-new-tab="true"
></cb-property-date-picker>

Özel yönlendirme URL'si ile

custom-url kullandığında, misafir tarihler seçtikten sonra URL'ine yönlendirilir. URL, rezervasyon akışına devam edebilmeniz için checkin, checkout, widget_source, promo ve analiz parametrelerini alır.

<cb-property-date-picker  
property-code="O2YXd0"  
custom-url="https://example.com/booking"
></cb-property-date-picker>

Sıkça Sorulan Sorular

Arama Bileşeni (Widget) misafir filtrelerini (Yetişkin/Çocuk) destekliyor mu?

Hayır. Mevcut Bileşen (Widget) yetişkin veya çocuk misafir filtrelerini içermemektedir. Sadece giriş, çıkış, promosyon kodu ve Arama butonunu destekler.