Çoklu Tesis Takvim - Tarih Seçici Gömme

Gabriela Garcia

Güncellenme 06 Ağustos 2026 08:21

<cb-multi-property-date-picker>, aynı Cloudbeds Organizasyonuna ait tesisler için bir web bileşenidir. Bir tesis seçici açılır menüsü, tarih seçici alanları ve bir arama butonu gösterir. Misafirler bir tesis seçer, giriş ve çıkış tarihlerini belirler ve aramaya tıklayarak Rezervasyon Motoruna veya o tesise özel bir URL'ye yönlendirilir.

Bu bileşen sub-domain özniteliğini gerektirir. Değer, tesis web sitesi alan adınız veya bireysel bir tesis Rezervasyon Motoru URL'si değil, Cloudbeds Organizasyonunuzun alt alan adı olmalıdır.

Genel Bakış

Çoklu tesis modu, bir Cloudbeds Organizasyonu içindeki birden fazla tesis için tarih seçici göstermek gereken web siteleri içindir; örneğin bir marka, grup veya tesis koleksiyonu. Aşağıdaki sayfalarda iyi çalışır:

Organizasyon veya marka ana sayfaları
“Bir tesis seç” + tarih arama bölümleri
Birden fazla tesisi listeleyen ve misafirleri seçtikleri tesisin rezervasyon akışına yönlendiren açılış sayfaları
Misafirin önce bir tesis seçmesi, sonra tarihler belirlemesi gereken herhangi bir sayfa

Bileşen, organizasyonun tesis listesini yükler, aranabilir bir açılır menü gösterir ve misafir bir tesis ile tarihler seçtikten sonra onları o tesisin Immersive Experience Rezervasyon Motoruna (veya özel bir URL'ye) yönlendirir.

Başlamadan önce

Çoklu Tesis Tarih Seçiciyi kurmadan önce aşağıdakileri doğrula:

Tesislerin aynı Cloudbeds Organizasyonuna ait olmalı.
Grup Rezervasyon Motoru URL'n için Organizasyon alt alan adına sahip olmalısın.
Kullanıcı rolün, Rezervasyon Motoru ayarlarına erişim ve yönetim için Rezervasyon Motoru Yetkilerini içermeli.
Paketin Premium Embed'lere erişimi içermeli veya tesisinde zaten Premium Embed etkin olmalı.

Rezervasyon Motoru > Embed sekmesinin ekran görüntüsü; Premium seçili, Çoklu Tesis Tarih Seçici seçili ve Kurulum rehberi alanı görünür.

İpucu: Premium Embedler bölümünde Satışla İletişime Geç seçeneği görüyorsan, paketinde yalnızca Temel Embedler olabilir. Premium Embed erişimi için Cloudbeds'te Satışla İletişime Geç seçeneğini kullan.

Önemli: Tesislerinin sadece ayrı Rezervasyon Motoru bağlantıları varsa, örneğin hotels.cloudbeds.com/reservation/PROPERTYCODE, henüz Grup Rezervasyon Motoru kullanmıyorlar demektir.

Çoklu Tesis Tarih Seçici’yi kullanmak için, tesislerin önce bir Cloudbeds Organizasyonu altında bağlanması gerekir. Bir Organizasyon talep etmek için Cloudbeds destek ile iletişime geç.

Organizasyon talep ederken hazır olman gereken bilgiler:

İstenen Organizasyon adı ve alt alan adı, örneğin mygroup.cloudbeds.com
Organizasyon Sahibi’nin adı ve soyadı
Organizasyon Sahibi’nin e-posta adresi
Tesis adları ve bunların MFD kimlikleri

Tüm tesislerin kayıtlı tesis sahibi sen değilsen, Cloudbeds destek Organizasyonu oluşturmadan önce ek sahiplik kanıtı veya yazılı yetkilendirme talep edebilir.

Adım 1: Cloudbeds Script’ini Ekle

Web sitenin <head> bölümüne aşağıdaki script’i ekle:

Not: Birinci adımdaki tüm script etiketleri Kapsayıcı Deneyim 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 bir kez, web sitesinin (küresel) <head> bölümüne kurulması yeterlidir.

Script’i <head> içinde veya bileşen <body> içinde bileşen etiketi işlenmeden önce çalışacak şekilde yükle.

Önemli: Kapsayıcı Deneyim 2.0 web bileşen etiketlerini iframe içinde kullanma.

Iframe kurulumları görüntüleme, kaydırma ve performans sorunlarına yol açabilir. Bunun yerine web sitenin desteklediği özel kod veya script kurulum alanını kullan.

Kullanıcı bir CMP kullandığında en iyi uygulamalardan bazıları:

Kapsayıcı Deneyimi, CMP etiketinden önce head’in en başına ekle ve engellenmesini önleyen özniteliği dahil et. Dokümantasyonda hepsini belirtmektense platforma göre farklı olabilir
- 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>

Adım 2: Takvim Tarih Seçici Script’ini Ekle

Çoklu tesis modunda, organizasyonun alt alan adını elemente geçirmen gerekir:

<cb-multi-property-date-picker sub-domain="YOUR_SUB_DOMAIN"></cb-multi-property-date-picker>

Sadece bir alt alan adı ile, bileşen varsayılan “Ara” butonunu gösterir ve bir tesis seçildiğinde her tesisin varsayılan dilini ve para birimini kullanır.

Not: Çoklu tesis takvimi için, aşağıda belirtildiği gibi özel parametrelerle değiştirilmediği sürece varsayılan olarak dili İngilizce, para birimini ise USD olarak seçer.

Küresel bir custom-url özniteliği yoktur. Özel URL’ler her tesis için data-property-url-{code} ile ayarlanır. Bir tesisin özel URL’si yoksa, varsayılan barındırılan Rezervasyon Motoru URL’si kullanılır.

Öznitelikler

Özellik	Zorunlu	Varsayılan	Açıklama
`sub-domain`	Evet	—	Organizasyonun için alt alan adı. Tesislerini yükler ve listeler.
`button-label`	Hayır	"Ara"	Arama butonundaki metin (örn. "Müsaitliği Kontrol Et", "Oda Ara").
`layout`	Hayır	"yatay"	Düzen: `yatay` (tesis seçici, tarihler ve buton yan yana) veya `dikey` (üst üste).
`open-in-new-tab`	Hayır	"false"	Rezervasyon Motoru'nun yeni bir sekmede açılıp açılmayacağı. `"true"` veya `"false"` string olarak kullan.
`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ı.
`property-order`	Hayır	—	Açılır menüde tesislerin sıralaması. Noktalı virgülle ayrılmış kodlar, örn. `"CODE1;CODE2"`.
`data-property-url-{code}`	Hayır	—	`{code}` tesisine özel URL, örn. `data-property-url-O2YXd0="https://example.com/downtown"`.
`data-property-name-{code}`	Hayır	—	Tesis `{code}` için özel görüntüleme adı, örn. `data-property-name-O2YXd0="Downtown Hotel"`

Bileşenin Oluşturdukları

Yüklenirken: Bir tesis seçici (aramaya uygun açılır menü), giriş ve çıkış alanları ve bir arama butonu (düzen layout ile yatay veya dikey). Açılır menü, organizasyondaki tüm tesisleri listeler. Bir tarih alanına tıklamak/taplamak takvim açılır penceresini gösterir.
Bir tesis seçildikten sonra: Tarih seçici ve takvim, o tesisin ayarlarını kullanır (müsaitlik, kısıtlamalar, aynı gün kuralları vb.).
Arama yapıldığında (butona tıklama): Misafir, seçilen tesis, giriş, çıkış, dil ve diğer sorgu parametreleri (örn. promosyon, analizler) ile Rezervasyon Motoru’na (veya özel URL’ye) yönlendirilir (aynı sekmede veya yeni sekmede open-in-new-tab ile).

Organizasyon Alt Alan Adını Bulma

sub-domain değeri, Organizasyon alt alan adındır. Bunu Grup Rezervasyon Motoru URL’inde bulabilirsin. .cloudbeds.com öncesinde görünen metindir.

Aşağıdaki örnekte, Grup Rezervasyon Motoru URL’si alona.cloudbeds.com/manage. Organizasyon alt alan adı alonadır.

Bileşene şöyle eklenir:

<cb-multi-property-date-picker sub-domain="alona"></cb-multi-property-date-picker>

Organizasyon alt alan adı, www.examplehotel.com gibi genel web sitesi alan adın değil, ayrıca hotels.cloudbeds.com/reservation/PROPERTYCODE gibi tek bir tesisin Rezervasyon Motoru bağlantısı da değildir.

Kullanıcı Akışı

Misafir, sayfanda tesis seçici, tarih çubuğu (giriş, çıkış) ve arama butonunu görür.
Misafir açılır menüden bir tesis seçer (aramak/filtrelemek için yazabilir).
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 tarihler ve tesis için Rezervasyon Motoru’na (veya senin URL’ne) yönlendirilir (aynı sekmede veya yeni sekmede), burada oda seçer ve rezervasyonu tamamlar.

Çoklu Tesis Özellikleri

Aranabilir tesis açılır menüsü: Misafirler, tesisleri ada göre filtrelemek için yazabilir.
Özel sıralama: Açılır menüdeki tesislerin sırasını kontrol etmek için property-order kullan.
Özel isimler: Her tesis için dostça isimler göstermek amacıyla data-property-name-{code} kullan.
Özel URL'ler: Misafirleri her tesis için farklı URL'lere yönlendirmek için data-property-url-{code} kullan.
Düzen: Sayfa düzeninle eşleşmesi için horizontal (Varsayılan) veya vertical kullan.
Tesis yüklenmediğinde: Bileşen yine de render edilir; tesis açılır menüsü devre dışı bırakılır ve üzerine gelindiğinde “Veri bulunamadı.” ipucu gösterir.

Kullanım Örnekleri

Temel (sadece organizasyon alt alan adı)

Bu senin Organizasyon alt alan adın. Kolay erişim için bu kimliği Organizasyon tesis sayfana eklemek için aktif olarak çalışıyoruz. O zamana kadar, destek ile iletişime geç lütfen; sana organizasyon kimliğini hemen sağlayabilirler.

<cb-multi-property-date-picker sub-domain="dcmcu2"></cb-multi-property-date-picker>

İsteğe bağlı özniteliklerle

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

Rezervasyon Motorunu yeni sekmede aç

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 open-in-new-tab="true"
></cb-multi-property-date-picker>

Özel tesis sıralaması

Açılır menüdeki tesisler için özel sıralama. Noktalı virgülle ayrılmış tesis kodları. Bu listedeki tesisler belirtilen sırayla ilk olarak görünür. Kalan tesisler alfabetik olarak sıralanır.

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 property-order="2SI0CT;O2YXd0;PROP003"
></cb-multi-property-date-picker>

Özel tesis isimleri

Her tesis için özel görüntüleme ismi. Tesis kodu olan {code} yerine data-property-name-{code} özniteliklerini kullan. Açılır menüdeki varsayılan tesis isimlerini geçersiz kılar.

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 data-property-name-O2YXd0="Şehir Merkezi Oteli"  
 data-property-name-2SI0CT="Sahil Tatil Köyü"  
 data-property-name-PROP003="Dağ Evi"
></cb-multi-property-date-picker>

Özel yönlendirme URL'leri

Tesis başına özel yönlendirme URL'si. data-property-url-{code} özniteliklerini kullan, burada {code} tesis kodudur. Bir tesis seçildiğinde, eşleşen bir özniteliği varsa, yönlendirme için o URL kullanılır. Aksi takdirde, varsayılan barındırılan Rezervasyon Motoru URL'si kullanılır.

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 data-property-url-O2YXd0="https://example.com/downtown"  
 data-property-url-2SI0CT="https://example.com/beach"
></cb-multi-property-date-picker>

Sorun Giderme

Çoklu Tesis Tarih Seçici neden web sitemde görünmüyor?

Bileşen görünmüyorsa, aşağıdakileri kontrol et:

Cloudbeds betiğinin sayfada veya web sitenin global <head> bölümünde yüklü olduğundan emin ol.
Bileşenin bir iframe içinde yer almadığını kontrol et.
Web sitesi alan adının Embeds sekmesinde Beyaz Listeye eklendiğinden emin ol.
Tesislerinin aynı Cloudbeds Organizasyonuna ait olduğundan emin ol.
sub-domain değerinin Organizasyon alt alan adınla eşleştiğini kontrol et.

Web sitesi oluşturucun özel betiklere veya web bileşenlerine izin vermiyorsa, kodu desteklenen özel kod alanına yerleştirmek için web sitesi sağlayıcın veya geliştiricinle iletişime geç.

İlgili Makaleler