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

Gabriela Garcia

Güncellenme 02 Mart 2026 15:16

<cb-multi-property-date-picker>, bir organizasyon içindeki birden fazla tesis için kullanılan bir web bileşenidir. Zorunlu olan sub-domain (alt alan adı) özniteliğini iletmelisin. Bu bileşen, bir tesis seçici açılır menüsü, tarih seçici alanları ve bir arama butonu gösterir. Misafir, bir tesis seçer, giriş ve çıkış tarihlerini belirler, ardından aramaya tıklar ve seçilen tesis için Rezervasyon Motoru’na (veya özel URL’ne) yönlendirilir.

Genel Bakış

Çoklu tesis modu, tek bir organizasyon içindeki birden fazla tesisi (örneğin, bir marka veya grup) gösteren entegrasyonlar içindir. 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 tesis için Kapsayıcı Deneyim Rezervasyon Motoru’na (veya özel bir URL’ye) yönlendirir.

Adım 1: Cloudbeds Script’ini Ekle

Aşağıdaki script’i web sitenin <head> bölümüne 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 yapmana gerek yoktur. Script, web sitesinin (küresel) <head> bölümüne sadece bir kez eklenmelidir.

Script’i <head> içinde veya bileşenden önce <body> bölümünde yükle ki, bileşen etiketi işlenmeden önce çalışsın.

Önemli: Kapsayıcı Deneyim 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:

Kapsayıcı Deneyimi, CMP etiketinden önce <head> bölümünün 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 modu için, elemente organizasyonun alt alan adını iletmelisin:

<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 dil İngilizce ve para birimi USD seçilir.

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üsaitlik Kontrol Et", "Oda Ara").
`layout`	Hayır	"horizontal"	Düzen: `horizontal` (tesis seçici, tarihler ve buton yan yana) veya `vertical` (üst üste).
`open-in-new-tab`	Hayır	"false"	Rezervasyon Motoru'nun yeni bir sekmede açılıp açılmayacağı. `"true"` veya `"false"` olarak string 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	—	Özel stil için bileşene uygulanan bir CSS sınıf adı.
`property-order`	Hayır	—	Açılır menüdeki tesislerin sırası. 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 (arama yapılabilir 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 Takvim açılır penceresini gösterir.
Bir tesis seçildikten sonra: Tarih seçici ve takvim, o tesisin ayarlarını (müsaitlik, kısıtlamalar, aynı gün kuralları vb.) kullanır.
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).

Alt Alan Adını Bulma

Bu, organizasyonunun alt alan adıdır. CRM’ine veya grup rezervasyon motoruna erişerek bulabilirsin. URL’de "cloudbeds.com"dan önceki organizasyon adın olarak görünür.

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 tesisle Rezervasyon Motoru’na (veya 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 isimlerine 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 üzere 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 uyumlu olması 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ışı olur ve “Veri bulunamadı.” yazan bir 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 ID'yi Organizasyon tesis sayfana eklemek için aktif olarak çalışıyoruz. O zamana kadar, lütfen destek ile iletişime geç; onlar sana organizasyon ID'sini hemen sağlayabilir.

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

İsteğe bağlı özelliklerle

<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 adları

Her tesis için özel görüntüleme adı. Tesis kodu olan data-property-name-{code} özelliklerini kullan. Bu, açılır menüdeki varsayılan tesis adlarının üzerine yazılır.

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 data-property-name-O2YXd0="Downtown Hotel"  
 data-property-name-2SI0CT="Beach Resort"  
 data-property-name-PROP003="Mountain Lodge"
></cb-multi-property-date-picker>

Özel yönlendirme URL'leri

Her tesis için özel yönlendirme URL'si. Tesis kodu olan data-property-url-{code} özelliklerini kullan. Bir tesis seçildiğinde, eşleşen bir özellik varsa, o URL yönlendirme için 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>