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

Gabriela Garcia

Güncellenme 01 Mart 2026 16:51

<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 geçirmen gerekir. 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 tarihleri 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 tarihleri seçtikten sonra, onları o tesis için Kapsayıcı Deneyim Rezervasyon Motoru’na (veya özel URL’ye) yönlendirir.

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. Script, web sitesinin (küresel) <head> bölümüne sadece bir kez eklenmelidir.

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

<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ı 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, özel parametrelerle değiştirilmediği sürece varsayılan olarak dil İngilizce ve para birimi USD olarak seçilir.

Global 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üde tesislerin sıralaması. Noktalı virgülle ayrılmış kodlar, örn. `"CODE1;CODE2"`.
`data-property-url-{code}`	Hayır	—	`{code}` kodlu tesis için ö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ı 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).

Alt Alan Adınızı Bulma

Bu, organizasyonunuzun alt alan adıdır. CRM’inize veya grup rezervasyon motorunuza erişerek bulabilirsiniz. URL’de "cloudbeds.com"dan önce gelen organizasyon adınızdır.

Kullanıcı Akışı

Misafir, sayfanda tesis seçiciyi, tarih çubuğunu (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 URL’ne) yönlendirilir (aynı sekmede veya yeni sekmede), burada oda seçer ve rezervasyonunu 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 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 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ışı bırakılır ve “Veri bulunamadı.” ipucu gösterilir.

Kullanım Örnekleri

Temel (sadece organizasyon alt alan adı)

Bu senin Organizasyon alt alan adın. Bu ID'yi Organizasyon tesis sayfana kolay erişim için eklemek üzere 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ı. data-property-name-{code} özelliklerini kullan, burada {code} tesis kodudur. Açılır menüdeki varsayılan tesis adlarının üzerine yazar.

<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. data-property-url-{code} özelliklerini kullan, burada {code} tesis kodudur. 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>