Cloudbeds Rezervasyon Motoru web sitesi bileşenleri

Giriş ve çıkış tarihleri, az bilgi içeren yığılmış bir kutuda görünür.

Giriş ve çıkış tarihleri, az bilgi içeren yatay bir kutuda görünür.

Giriş ve çıkış tarihleri, müşterilerini rezervasyon yapmaya teşvik eden kısa bir mesajla birlikte koyu renkli bir bantta gösterilir.

Bu, tarih seçici olmadan sadece bir buton yerleştirir ve misafiri Rezervasyon Motoruna yönlendirir.

Bu, tarih seçici olmadan sadece bir buton yerleştirir ve misafiri Rezervasyon Motoruna yönlendirir.

Eklendikten sonra, Yer Paylaşımı bileşen kodu web sitende Hemen Rezervasyon Yap butonunu gösterir. Potansiyel misafirler buna tıkladığında, büyük bir Takvim web sitesinin üzerine yerleşir ve istedikleri tarihleri seçmelerine olanak tanır; böylece web sitesinden ayrılmaları gerekmez.

Immersive bileşeni, Cloudbeds Rezervasyon Motoru'nun temel navigasyon özelliklerini tesisinizin web sitesine entegre ederek deneyimi geliştirir.

Misafirler, tesisinizin web sitesinde "Hemen rezervasyon yap" butonuna tıkladıklarında (aşağıdaki görselin 1. adımında gösterildiği gibi), ekranlarında bir modal pencere açılır ve çeşitli rezervasyon seçeneklerine erişim sağlarlar (2., 3. ve 4. adımlar).

Misafirler, müsait konaklamaların detaylarını, fiyatlandırmasını ve görsellerini görüntüleyebilir. Tercih ettiklerini sepete ekleyip rezervasyonu doğrudan siteden tamamlayabilirler.

1. Hesap menünden Ayarlar bölümüne git ve Cloudbeds Rezervasyon Motoru üzerine tıkla
2. Web Sitesi Bileşenlerine tıkla
3. Tercih edilen bileşen dilini seç (İngilizce, Portekizce veya İspanyolca). Eğer bileşenin misafirin Tarayıcıda kullandığı dili algılamasını istersen, bu seçeneği Tarayıcı ile Algıla olarak ayarla. Bileşen desteklenen dili algılayamazsa, Varsayılan tesis dilinde yüklenecektir.
4. 7 önceden hazırlanmış bileşenden birini seçerek her seçeneğin görsel temsilini görebilirsin. Belirli bir bileşen türünü seçmek benzersiz kodunu sağlar
5. Rezervasyon sayfasının yeni bir pencerede açılmasını isteyip istemediğini onayla

1. Aşağıdaki "Kodu kopyala ve web sitene yapıştır" bölümünde görünen tüm kodu kopyala
2. Web sitene (Web Sitesi Oluşturucu Aracı/Sayfa) git. Seçtiğin bileşene bağlı olarak, bileşen kodunu bir div/div öğesine yapıştırmalısın. Eğer kayan bileşeni seçtiysen, kodu web sitenin kapanış body etiketi öncesine yapıştır.

• Geliştirme konusunda deneyimli olanlar için gelişmiş bir seçenek, kendi bileşenlerini oluşturmaktır. Aşağıdaki örnekler arasındaki fark tarih formatındadır.
• Bu formlar önceden hazırlanmış bileşenlerin yerini alabilir, ancak tasarımınıza bağlı olarak diğer yöntemleri tamamlayabilir. Web sitenizde her zaman Rezervasyon Yap veya Rezervasyonlar yazan bir bağlantı bulundurmanızı öneririz.

Uluslararası tarih formatları için:

form method="post" action="PASTE_YOUR_BOOKING_ENGINE_URL_HERE"
  input type="hidden" name="date_format" value="d/m/Y"
  input type="text" name="widget_date" value="24/08/2015" /
  input type="text" name="widget_date_to" value="25/08/2015" /
/form

ABD tarih formatları için:

form method="post" action="PASTE_YOUR_BOOKING_ENGINE_URL_HERE"
  input type="hidden" name="date_format" value="m/d/Y"
  input type="text" name="widget_date" value="08/24/2015" /
  input type="text" name="widget_date_to" value="08/25/2015" /
/form

ISO tarih formatları için:

form method="post" action="PASTE_YOUR_BOOKING_ENGINE_URL_HERE"
  input type="hidden" name="date_format" value="Y-m-d"
  input type="text" name="widget_date" value="08/24/2015" /
  input type="text" name="widget_date_to" value="08/25/2015" /
/form

Aşağıdaki kod tesis web sitesinde, web sitesinin stil dosyasının kaydedildiği yere kaydedilmelidir. Eğer bileşen bir iframe içine yapıştırılırsa, bileşen betiğinden hemen sonra aşağıdaki stil kodu kaydedilmelidir:

<style>
.widgetHotelsForm .horizontal-widget a {
background: #007d8a!important;
border-color: #007d8a!important;
top: 5px;
}
.CloudBedsDatePicker.pika-single .is-selected .pika-button {
background: #007D8A !important;
}
.CloudBedsDatePicker.pika-single .is-today .pika-button:hover {
background: #007D8A !important;
font-weight: bold;
}
.CloudBedsDatePicker .pika-button:hover {
background: #888;
}
</style>