Cloudbeds Rezervasyon Motoru Kapsayıcı Deneyim 2.0'ı Ayarlama ve Özelleştirme

Giriş

Cloudbeds Rezervasyon Motoru Kapsayıcı Deneyim 2.0, rezervasyon sürecini iframe tabanlı maskeleme kullanmadan doğrudan tesis web sitene yerleştirir. Web sitenin Beyaz Liste alan adlarıyla yetkilendirilmiş olması ve web bileşeninin render edilebilmesi için desteklenen yükleyici betiğin web sitesi HTML'sine kurulmuş olması gerekir.

Bu kılavuzu, uygulamanın kendisi ve Rezervasyon akışını etkileyebilecek teknik hususlar için kullan; bunlar arasında Onay Yönetim Platformları (CMP'ler), site oluşturucular, izleme, arama parametreleri ve özel stil yer alır. Rezervasyon Motoru hakkında genel bir bakış için Cloudbeds Rezervasyon Motoru: Bilmeniz Gereken Her Şey sayfasına bakabilirsin.

İçindekiler

• Kapsayıcı Deneyim 2.0 hakkında
• Kapsayıcı Deneyim 2.0'ı kur
• Çerez onayı ve CMP kurulumu
• Kurulum hususları ve sorun giderme
• Arama parametreleri ve izleme
• Kapsayıcı Deneyim 2.0'ı özelleştir

Kapsayıcı Deneyim 2.0 hakkında

Cloudbeds Rezervasyon Motoru Kapsayıcı Deneyim 2.0, misafirlerin müsaitliği aramasına, odaları ve fiyatları seçmesine, misafir bilgilerini girmesine ve ödeme işlemini doğrudan tesisinin web sitesinden tamamlamasına olanak tanıyan web tabanlı bir bileşendir. Tam sayfa deneyimi olarak uygulanabilir veya Hemen Rezervasyon yap butonundan açılabilir.

Temel faydalar

Kapsayıcı Deneyim 2.0, misafirlerinin kendi web sitende rezervasyon deneyimini yükseltmek için tasarlanmış benzersiz özellikler sunar:

• Daha yüksek dönüşüm oranları: Daha az tıklama, daha hızlı yükleme süreleri ve tutarlı bir marka deneyimi daha fazla rezervasyon sağlar.
• Daha fazla özelleştirme: Standart bir iframe'in kısıtlamaları olmadan benzersiz ve akılda kalıcı bir misafir deneyimi oluştur.
• Veri odaklı büyüme: Rezervasyon sürecini optimize etmek ve doğrudan rezervasyonları artırmak için önemli metriklere ve içgörülere eriş.
• Artan güven: Güvenli ve kesintisiz rezervasyon akışı, misafirlerin rezervasyon sürecini tamamlaması için güven oluşturur.

Web tabanlı ve iframe tabanlı bileşenler arasındaki fark

Iframe tabanlı sistemlerin aksine, bu entegre web tabanlı bileşen şunları sunar:

• Daha hızlı web sitesi yükleme süreleri
• Gelişmiş marka özelleştirmesi
• Birleşik rezervasyon akışı ile misafirlerin ilk aramadan ödeme tamamlanana kadar sitede kalmasını sağlar

Görünümü

Kapsayıcı Deneyim 2.0, tesisinin web sitesi tasarımına ve kullanıcı akışına uyacak şekilde iki esnek yerleştirme seçeneği sunar. Tam sayfa bir Kapsayıcı Deneyim yerleştirebilir veya açılır bir Kapsayıcı Deneyim oluşturup yerleştirebilirsin.

• Tam sayfa gömme tam da adından anlaşıldığı gibi çalışır: Rezervasyon Motorunu web sitenizdeki bir sayfanın içine tamamen yerleştirir, misafirlere kesintisiz ve tamamen içine çekici bir rezervasyon deneyimi sunar.

Tam sayfa gömme, misafirin müsait konaklamaları ararken, fiyatları incelerken ve rezervasyonunu oluştururken tesisin web sitesinde kalmasını sağlar.

Çıkış sırasında, misafirler iletişim bilgilerini, isteğe bağlı ek bilgileri, ek misafirleri ve iletişim tercihlerini gömülü rezervasyon akışından ayrılmadan girerler.

Rezervasyonu tamamlamadan önce, misafirler tesisin giriş, çıkış, iptal ve diğer şartlar ve koşullarını inceleyebilirler.

• Pop-up gömme seçeneği şık ve modern bir alternatiftir. Misafir “Hemen Rezervasyon Yap” butonuna tıkladığında, ekranın kenarından yan panel yumuşak bir şekilde kayarak açılır ve mevcut sayfadan ayrılmadan kompakt ama tam işlevsel bir rezervasyon deneyimi sunar.

Pop-up uygulamasında, misafir tesisin Hemen Rezervasyon Yap butonundan Immersive Experience’ı açar ve orijinal web sitesi rezervasyon panelinin arkasında görünür kalır.

Rezervasyon akışı şunları içerir:

• Müsaitlik araması
• Oda seçimi
• Fiyat gösterimi
• Ek Satış fırsatları
• Misafir bilgi girişi
• Güvenli ödeme işlemi

Fiyatlandırma ve müsaitlik

Immersive Experience 2.0 erişimi Cloudbeds aboneliğine bağlıdır. Paketinde Premium Bileşenler varsa, Bileşenler sekmesinin Premium bölümünden Immersive Experience 2.0’a erişebilirsin.

Premium Bileşenler pakette yoksa, Premium bölümünde Satışla iletişime geç seçeneği görünebilir. Premium Bileşenler içeren bir pakete yükseltme hakkında bilgi almak için Satışla iletişime geç seçeneğine tıkla.

Özel ödeme yöntemleri ve ağ geçidi desteği

• Ağ geçidi destek önerileri: Kapsayıcı Deneyim içinde desteklenmeyen ödeme ağ geçitlerinin kullanılmasını önermiyoruz. Ağ geçitleri Cloudbeds alan adından çıkarıldığında, güvenlik veya PCI uyumluluğu üzerinde kontrolümüz kalmaz.
• Mevcut kısıtlamalar: Özel ödeme yöntemleri şu anda yalnızca barındırılan ortamlarda kullanılmalıdır.
• Gelecekteki destek: Cloudbeds Payments ekibi, PMS arayüzü içinde özel bağlantılar aracılığıyla bu ağ geçitleri için resmi destek sağlamaya çalışıyor. Bu özellik 2026 yılında yayınlanması planlanıyor. Müşteriler, teslimat tarihine yaklaştıkça zamanlama hakkında daha spesifik bilgiler alabilir.
• Destek yolu: Özel ödeme yöntemleriyle ilgili uygulamaya özel rehberlik veya sorular için lütfen doğrudan Cloudbeds Payments ekibi ile iletişime geç. Ödeme SDK’sının tamamını onlar yönetir ve en iyi şekilde yardımcı olabilirler.

Kapsayıcı Deneyim 2.0 Kurulumu

Aşağıdaki kurulum adımlarını tamamlayarak web sitesi alan adını yetkilendir, desteklenen Kapsayıcı Deneyim betiğini yükle ve Rezervasyon Motoru bileşenini web sitene ekle. Bu adımlar hem tam sayfa hem de Hemen Rezervasyon Yap butonu uygulamaları için geçerlidir.

Adım 1: Premium Gömme erişimini doğrula

Adım 2: Alan adını Beyaz Listeye ekle

Kapsayıcı Deneyim 2.0'ı kuracağın alan adını seçili Premium Gömülü İçeriklerin Beyaz Liste alanları bölümüne ekle. En fazla 5 alan adı ekleyebilirsin.

1. Hesap Menüsünden Ayarlar seçeneğini seç
2. Rezervasyon Motoru seçeneğine tıkla
3. Gömülü İçerikler sekmesine tıkla.
4. Premium bölümünde kurmak istediğin Kapsayıcı Deneyim seçeneğini seç.
5. Beyaz Liste alanları kartında Alan adı ekle seçeneğine tıkla.
6. Kapsayıcı Deneyim'in kurulacağı alan adını gir ve değişikliklerini kaydet.

Adım 3: Immersive Experience betiğini ekle

Web sitenin HTML belgesindeki <head> öğesine aşağıdaki betiği ekle:

<script
  data-entry="immersive"
  src="https://static1.cloudbeds.com/booking-engine/latest/loader.js"
  nonce="+imGC13HmyB6zTZ1eTnZMw=="
  integrity="sha384-hd98w88pqnDT+lRLwyII/mRmbacols+VWYZF3HKdxnIlTYO+cF38GA1/I/+V8U4a"
  crossorigin="anonymous"
  type="text/plain"
  data-categories="essential"
></script>

Adım 4: Rezervasyon Motorunu yerleştir

Immersive Experience'i iki şekilde gösterebilirsin:

• Standart Mod (Tam sayfa yerleştirme): “Tam sayfa yerleştirme” olarak da bilinen bu varsayılan modda, Rezervasyon Motoru uygulaması ev sahibi web sitesine tamamen entegre edilir. Yerleştirmek için, HTML'de gösterilmesi gereken yere aşağıdaki kodu ekle:

<cb-immersive-experience mode="standard" property-code="{PROPERTY_CODE}" />

• Açılır Pencere Modu (Hemen Rezervasyon Yap düğmesi): Bu modda, Rezervasyon Motoru uygulaması sabit konumlu ve yer paylaşımı olan bir açılır pencere olarak gösterilir. Immersive Experience'i açan bir Hemen Rezervasyon Yap düğmesi eklemek için:

<cb-book-now-button property-code="{PROPERTY_CODE}" />

Çerez onayı ve CMP kurulumu

Eğer web siten bir Onay Yönetim Platformu (CMP) kullanıyorsa, Rezervasyon akışının yüklenebilmesi için gerekli Cloudbeds kaynaklarının temel olarak kabul edilip engellenmemesi için Immersive Experience’ı yapılandır. Web sitesi değişikliklerini yayınlamadan önce aşağıdaki sağlayıcıya özel kurulumu uygula.

Kullandığın CMP’ye uygun sağlayıcıya özel ayarı kullan:

• Cookiebot: data-cookieconsent="ignore"
• OneTrust: data-ignore-consent="true"
• Quantcast: data-quantcast-ignore="true"
• Termly: Termly betiğinden önce, tercihen HTML’nin başına yakın, aşağıdaki özel engelleme haritasını ekle.

<script data-termly-config>
 window.TERMLY_CUSTOM_BLOCKING_MAP = {
  "cloudbeds.com": "essential",
  "clientstream.launchdarkly.com": "essential",
  "clientsdk.launchdarkly.com": "essential",
  "tile.openstreetmap.org": "essential",
  "tokenex.com": "essential",
  "stripe.com": "essential",
  "stripe.network": "essential",
  "braintreegateway.com": "essential",
  "dlocal.com": "essential",
  "authorize.net": "essential",
  "pagosonline.net": "essential",
  "paypal.com": "essential",
  "adyen.com": "essential"
 };
</script>

Immersive Experience yükleyicisini CMP yapılandırmanda gerekli veya temel olarak sınıflandır. Aşağıdaki mevcut yükleyici giriş noktasını kullan. cb-immersive-experience.js dosyasının doğrudan kullanımı artık önerilmemektedir.

<script
  data-entry="immersive"
  src="https://static1.cloudbeds.com/booking-engine/latest/loader.js"
  nonce="+imGC13HmyB6zTZ1eTnZMw=="
  integrity="sha384-hd98w88pqnDT+lRLwyII/mRmbacols+VWYZF3HKdxnIlTYO+cF38GA1/I/+V8U4a"
  crossorigin="anonymous"
  type="text/plain"
  data-categories="essential"
></script>

Kurulum ile ilgili hususlar ve sorun giderme

Aşağıdaki bölümler, yayına geçmeden önce bilmen gereken davranış ve uygulama detaylarını vurgular.

<style>
/* Geçersiz kılma işlemi Booking Motoru köküne kapsamlı */
.cb-bookingengine-root {
  --booking-engine-zIndices-sticky: 1100;
  --booking-engine-zIndices-modal: 1400;
  --booking-engine-zIndices-popover: 1500;
  --booking-engine-zIndices-tooltip: 1800;
}
</style>

Arama parametreleri ve izleme

Immersive Experience, uygulama ilk yüklendiğinde desteklenen arama parametrelerini okuyabilir ve web sitesi tabanlı analizler ile reklam araçlarıyla çalışabilir. Arama değerlerini iletmen, izlemeyi yapılandırman veya Google Otel Reklamları parametrelerini anlaman gerektiğinde aşağıdaki referans bölümlerini kullan.

Kapsayıcı Deneyim 2.0'ı Özelleştir

Kapsayıcı Deneyimi, bileşen özellikleri ve Web Sitesi'nde kendi CSS/JS kodlarınla kişiselleştir.

<cb-book-now-button
  property-code="{PROPERTY_CODE}"
  class-name="cb-book-now-button"
  label="Hemen Rezervasyon yap"
  height="90vh"
  width="90vw"
/>

<style data-cb-immersive-experience-root>
  :is(#cb-bookingengine, .cb-bookingengine-root) {
    h1 {
      font-family: serif;
      font-size: 24px;
    }
  }
</style>

Sonraki adım

Yetkili alan adınızda Kapsayıcı Deneyim 2.0’ı kurup test ettikten sonra, diğer gömme seçeneklerini karşılaştırman veya yapılandırman gerektiğinde Cloudbeds Rezervasyon Motoru Gömme sekmesi kılavuzunu incele.