Cloudbeds Rezervasyon Motoru Kapsayıcı Deneyim 2.0 - Bilmeniz Gereken Her Şey

Gabriela Garcia

Güncellenme 01 Mart 2026 16:20

Genel Bakış

Cloudbeds Rezervasyon Motoru Kapsayıcı Deneyim 2.0, tesisinizin web sitesinde doğrudan misafir dostu, kesintisiz bir rezervasyon deneyimi sunan modern, tamamen web tabanlı bir rezervasyon çözümüdür. Güvenli, PCI uyumlu ödemeleri kolaylaştırır ve sayfa görüntülemeden satın almaya kadar içgörüler için Google uyumluluk veri takibini içerir.

Web tabanlı bir bileşen olarak, Kapsayıcı Deneyim 2.0 beyaz listeye alma veya karmaşık maskeleme süreçlerine ihtiyaç duymaz. Bunun yerine, tesisinizin web sitesine sorunsuzca entegre olan basit bir gömme yöntemiyle entegrasyonu kolaylaştırır — hem tasarım tutarlılığını hem de uygulama kolaylığını korur.

Geliştirilmiş bir rezervasyon deneyimi

Kapsayıcı Deneyim 2.0, kendi web sitende misafirlerinin 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 farklar

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

Nasıl görünüyor

Kapsayıcı Deneyim 2.0, tesisinizin web sitesi tasarımına ve kullanıcı akışına uyacak şekilde iki esnek gömme seçeneği sunar. Tam sayfa bir Kapsayıcı Deneyim’i gömebilir veya açılır pencere şeklinde bir Kapsayıcı Deneyim oluşturup gömebilirsin.

Tam sayfa gömme adından da anlaşılacağı gibi çalışır — rezervasyon motorunun tamamını web sitendeki bir sayfaya doğrudan yerleştirir, misafirlere baştan sona kesintisiz, tamamen kapsayıcı bir rezervasyon yolculuğu sunar.

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

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

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

Fiyatlandırma ve müsaitlik

Cloudbeds Rezervasyon Motoru Plus, tüm Cloudbeds aboneliklerine ilk aşama yayılımımıza dahil olan tesisler için ek bir ücret olmadan dahildir. Kapsayıcı Deneyim 2.0 aynı rezervasyon akışını kullanır ancak bunu web sitene doğrudan gömmek için geliştirilmiş bir yol sunar.

Kapsayıcı Deneyim 2.0’ın ek bir ücrete tabi olup olmadığı, aboneliğine ve mevcut geçiş programına bağlıdır:

Eski sürüm iframe’lerden ve Kapsayıcı 1.0’dan geçiş sırasında, birçok tesis Kapsayıcı Deneyim 2.0’ı ekstra ücret olmadan yükseltmenin bir parçası olarak kullanabilir.
Bu programların dışında, Kapsayıcı Deneyim 2.0 ücretli bir eklenti olarak sunulabilir ve tesisin normal Cloudbeds faturasına yansıtılır.

Cloudbeds, gelecekteki fiyat güncellemeleri hakkında değişiklikler yürürlüğe girmeden önce açık ve önceden bilgilendirme yapacaktır.

Not: Bu makalede {PARAMETER} olarak gösterilen herhangi bir değer yer tutucudur. Gerçek değerinle değiştir ve küme parantezlerini ({ }) kaldır.

Önemli:

Kapsayıcı Deneyim, özel olarak oluşturulmuş web siteleriyle test edilmiştir. Site oluşturucu platformları kullanılarak oluşturulan şablon tabanlı veya kodsuz web siteleri, özel betikleri farklı şekilde işleyebilir ve bu da işlevselliği etkileyebilir.
Kapsayıcı Deneyim 2.0 web bileşeni 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.
Bir kullanıcı 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 belirtmemek daha iyidir, çünkü platforma göre farklılık gösterebilir
  - Cookiebot: data-cookieconsent="ignore"
  - OneTrust: data-ignore-consent="true"
  - Quantcast: data-quantcast-ignore="true"
- Aşağıdaki betiği CMP Yönetici panelinde Gerekli olarak sınıflandır; yine, platforma göre farklılık gösterebilir:
```
<script src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js" type="text/javascript"></script>
```

Kapsayıcı Deneyim 2.0 nasıl kurulur

Tesisinizin web sitesinde Kapsayıcı Deneyim 2.0’ı etkinleştirmek için lütfen aşağıdaki adımları takip et.

Adım 1 – İzin Verilen Alan Adlarını Etkinleştir

Kapsayıcı Deneyim 2.0 kurulumuna başlamak ve rezervasyon deneyimini en üst düzeye çıkarmak için, Web Sitesi Bileşeni ayarlarında İzin Verilen Alan Adları bölümüne git. Eğer bu seçenek görünmüyorsa, etkinleştirilmesi için Destek Ekibi ile iletişime geç.
Eğer bir Cloudbeds Websites müşterisiysen, uygulama ve etkinleştirme talepleri için Cloudbeds Websites ekibi ile iletişime geçebilirsin.

Adım 2 – Etki alanını beyaz listeye ekle

Destek ekibimiz gerekli yapılandırmaları etkinleştirdikten sonra, PMS’inde İzin Verilen Etki Alanları bölümünü göreceksin.

Hesap Menüsü 'nden Ayarlar seçeneğini seç.
Rezervasyon Motoru seçeneğine tıkla.
Web Sitesi Bileşenleri bölümüne git ve İzin Verilen Etki Alanları kısmına, Immersive Experience’ı kuracağın etki alan(lar)ını ekle. En fazla 5 etki alanı ekleyebilirsin.

Hem ana etki alanları hem de alt etki alanları desteklenir (örn., my-hotel.com ve booking.my-hotel.com).

İzin Verilen Etki Alanları Beyaz Listesi: Doğru Etki Alanı Formatı Nasıl Kontrol Edilir

Bazı durumlarda, bir web sitesinin etki alanı www içerecek şekilde ayarlanmış olabilir. Her iki ihtimali de kapsamak için basit bir test yapmanı öneririz.

URL çubuğunu kontrol et: Web siteni aç ve tarayıcıdaki URL’ye bak.
www içeriyor mu? Örneğin, https://www.seninetki.com mi yoksa sadece https://seninetki.com mi görünüyor?

Site formatını öğrendikten sonra, doğru etki alanını Cloudbeds beyaz liste alanına girebilirsin. Örneğin, siten www ile görünüyorsa, etki alanını www.seninetki.com olarak beyaz listeye eklemelisin.

Etki Alanlarının Beyaz Listeye Alınmasının Nedeni

Immersive Experience bir web bileşenidir (iframe değil). Siten üzerinde çalışır ve Cloudbeds servislerine etki alanından API istekleri gönderir. Beyaz listeye almak, Cloudbeds’e hangi kaynakların yetkili olduğunu bildirir ve böylece bu etki alanları arası istekler kabul edilir.

Adım 3 – Immersive Experience script’ini Ekle

Web sitenizin HTML belgesindeki <head> öğesine aşağıdaki script’i ekle:

<script 
  type="text/javascript"
  data-cookieconsent="ignore"
  src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js" 
>
</script>

Not: data-cookieconsent değeri değişkenlik gösterir ve yalnızca web sitende CMP (çerez uyumluluk entegrasyonu) kullanıyorsan gereklidir. CMP kullanıyorsan, bu özniteliğin (örneğin "data-cookieconsent=ignore") kendi CMP ayarlarına uygun şekilde düzenlendiğinden emin olmalısın.

Adım 4 – Rezervasyon Motorunu Göm

Immersive Experience’i iki şekilde gösterebilirsin:

Standart Mod (Tam sayfa gömme): “Tam sayfa gömme” olarak da bilinen bu varsayılan modda Rezervasyon Motoru uygulaması ev sahibi web sitesine tamamen entegre edilir. Gömmek için, aşağıdaki kod parçasını HTML’de gösterilmesini istediğin yere ekle:

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

Açılır Pencere Modu (Hemen Rezervasyon Yap butonu): Bu modda Rezervasyon Motoru uygulaması sabit konumlu ve yer paylaşımı (overlay) içeren bir açılır pencere olarak gösterilir. Immersive Experience’i açılır pencerede açan bir Hemen Rezervasyon Yap butonu eklemek için:

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

Eğer mode özniteliğini atlayacak olursan, bileşen varsayılan olarak standard modda çalışır.

Tesis Kodunu Bul

Hesap Menüsü > Ayarlar > Rezervasyon Motoru > Özet sekmesine git. Kodun, Rezervasyon Motoru bağlantının sonunda yer alan 6 karakterli alfasayısal değerdir:

https://hotels.cloudbeds.com/reservation/{PROPERTY_CODE}

Aşağıdaki örnekte, vurgulanan bölüm gömmede kullanman gereken Tesis Kodudur (parantezleri ve içindeki değeri kendi kodunla değiştir).

Kurulum Dikkat Edilmesi Gerekenler ve Davranış

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

Site oluşturucularla uyumluluk

Immersive Experience, özel olarak oluşturulmuş web siteleriyle test edilmiştir. Şablon veya kodsuz site oluşturucular, özel betikleri farklı şekilde işleyebilir; bu da işlevselliği etkileyebilir.

✔️ Head ekleme: Immersive Experience <script> etiketini sayfanın <head> bölümüne ekleyebildiğinden emin ol.

✔️ Beyaz listeye alma: Canlı ve varsa önizleme/staging alanlarındaki alan adlarının İzin Verilen Alan Adları listesine eklendiğinden emin ol, böylece API istekleri kabul edilir (en fazla 5 alan adı).

✔️ Özel CSS/JS: Rezervasyon Motoru özelleştirme bölümüne eklenen stil veya betikler, Immersive Experience için otomatik olarak uygulanmaz; bunları sitenin HTML’sine eklemen gerekir.

✔️ Ödeme Sayfası: Ödeme adımı, seçilen ödeme yöntemine bağlı olarak değişebilir.

⮕ Misafir Apple Pay, Google Pay veya başka bir Üçüncü Taraf ödeme seçeneği seçerse, ödemeyi tamamlamak için ilgili üçüncü taraf sayfasına yönlendirilir.

⮕ İşlem başarılı olunca, Immersive Experience onay sayfasına geri yönlendirilir.

✔️ Derin bağlantılar/parametreler: Arama parametreleri sadece ilk yüklemede okunur. Uygulama yüklendikten sonra URL’yi değiştirirsen, parametrelerin uygulanması için sayfayı yeniden yükle.

Portallar

Rezervasyon Motoru, ekranda sabit konumda birkaç öğe render eder, örneğin:

Modal pencereler
İpuçları
Takvim
Fiyat kontrolü
Alışveriş sepeti bannerı (mobilde)
Dil ve para birimi seçicileri

Bu öğeler, Portal içinde render edilir; bu da DOM ağacının yapısını takip etmek yerine, .cb-portal statik sınıfına sahip bir öğe tarafından sarıldıkları ve body'nin sonuna eklendikleri anlamına gelir. Portallar, yığılma bağlamımızdaki ilgili katmana göre farklı z-index değerlerine sahiptir.

Çoğu web sitesinin kendine ait yığılma bağlamları vardır ve hayali z-ekseninde nasıl tanımlandıklarına bağlı olarak, Immersive Experience yığılma bağlamlarıyla çakışabilir veya çakışmayabilirler.

Örneğin, doğru tanımlanmadılarsa, Immersive Experience’ın Fiyat Kontrolü, tesisin web sitesine ait mobil navigasyon menüsünün üstünde görüntülenebilir veya tesisin web sitesindeki kayan bir öğe, mobildeki Alışveriş Sepeti bannerındaki “Hemen rezervasyon yap” butonunun üstünde görünebilir, bu da butonu engeller ve kullanıcının rezervasyon sürecine devam etmesini engeller.

Şu anda 4 tür portalımız var: modal, popover, sticky ve tooltip. Her durumda kullanılan portal türü, portalın ait olduğu öğe türüne bağlıdır. Bu nedenle, tüm modal pencereler modal portal kullanır, Takvim popover’ı ile Dil ve Para Birimi seçicileri popover portal kullanırken, mobildeki Alışveriş Sepeti Bannerı ve Fiyat Kontrolü sticky portal kullanır, örnek olarak.

Portal türüne bağlı olarak, Immersive Experience’ın z-index CSS özelliği için kullandığı değerler şunlardır:

Modal:1400
Popover:1500
Sticky:1100
Tooltip:1800

Çakışma sorunlarını giderme

Immersive Experience tarafından oluşturulan ve ana web sitesindeki diğer öğelerin üzerine binen öğelerle ilgili sorun yaşadığında, içeren Portalı ( .cb-portal statik sınıfına sahip öğe) bulup z-index değerini buna göre ayarlamanı veya ana web sitesindeki öğenin z-index değerini düzenlemeni öneririz.

Immersive Experience tarafından oluşturulan farklı portal türleri için z-index değerleri, bu amaçla kullanılan CSS değişkenlerini yeniden tanımlayarak özelleştirilebilir; aşağıdaki örnekte gösterildiği gibi:

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

Fiyat Kontrol Aracı, tüm Cloudbeds Rezervasyon Motoru paketlerine dahildir, eski sürüm planlar hariç. Aktif paketlerdeki tesisler, ek ücret ödemeden bunu etkinleştirebilir.

Arama Parametreleri

Immersive Experience, barındırılan sürümle aynı arama parametrelerini destekler. Parametreler yalnızca ilk yüklemede okunur ve dinamik olarak güncellenmez.

Ad	Tür	Açıklama	Örnek
adults	Sayı	Rezervasyon için yetişkin sayısı, müsait Konaklamaları ararken kullanılır.	adults=2
allotment_block_code	Metin	Seçilen tarihler için Konaklamaları getirirken kullanılacak kontenjan bloğu kodu.	allotment_block_code=b123456
checkin	YYYY-AA-GG	Seçilen giriş tarihi.	checkin=2025-12-01
checkout	YYYY-AA-GG	Seçilen çıkış tarihi. Eğer checkin verilmiş ama checkout verilmemişse, varsayılan olarak bir sonraki gün alınır.	checkout=2025-12-01
currency	3 harfli ISO-4217 para birimi kodu	Seçilen para birimi. Eğer belirtilmezse, Rezervasyon Motoru tesisin Varsayılan para birimini kullanır.	currency=brl
kids	Sayı	Rezervasyon için çocuk sayısı, müsait Konaklamaları ararken kullanılır.	kids=1
promo	Dize	Seçili tarihler için konaklamaları getirirken kullanılacak promosyon kodu.	promo=superpromo
rate_plan	Noktalı virgülle ayrılmış dize	Konaklama sonuçlarını fiyat planlarına göre filtrelemek için kullanılır, PMS'deki “Özel Fiyat Planı Adı” ile eşleşir.	rate_plan=3DAYSTAY;LOWSEASON
rid	Noktalı virgülle ayrılmış sayısal dize	Konaklama sonuçlarını filtrelemek için Oda ID'lerinin listesi.	rid=27434;23421
room_type	Noktalı virgülle ayrılmış 3 harfli dize	PMS'deki “Konaklama Kısaltması” ile eşleşir ve konaklama sonuçlarını filtrelemek için kullanılır. Eğer giriş ve çıkış belirtilmezse, Rezervasyon Motoru yarını ve sonraki günü otomatik olarak seçer.	room_type=PRI;SHA
utm_source	Dize	Pazarlama kampanyasının kaynağını bilmek için kullanılır (örneğin: Google, TripAdvisor, Trivago)	utm_source=Google

Takip ve Analizler

Immersive Experience, barındırılan sürümle aynı arama parametrelerini destekler. Parametreler, uygulamanın ilk yüklenmesinde yalnızca pencere konumundan okunur; bu da arama parametrelerindeki dinamik değişikliklerin Immersive Experience yüklendikten sonra herhangi bir etkisi olmayacağı anlamına gelir.

Ayrıca, Immersive Experience, barındırılan sürümün yaptığı gibi belirli kullanıcı işlemlerinden sonra (örneğin, giriş ve çıkış tarihlerini seçmek) pencere URL’sini güncellemez.

Google Analytics 4 / GTM: Google Etiket Kimliği veya GTM Konteyner Kimliği, otelin Web Sitesi üzerinde başlatılmalıdır.
Google Ads: Dönüşüm takibi, Tesisin Web Sitesi üzerinde manuel olarak yapılandırılmalıdır.
Meta Pixel: Meta Pixel betiği, başlatma için HTML <head> bölümüne eklenmelidir.

Ek yapılandırma detayları için, her takip platformunun dokümantasyonuna başvur.

Takibi etkinleştirmek için Google Tag Manager (GTM) veya Google Analytics 4 (GA4) betiklerini HTML <head> bölümüne manuel olarak ekle.

Google Hotel Ads arama parametreleri

Bu parametreler Google Hotel Ads tarafından eklenir ve Rezervasyon Motoru, rezervasyon yapılırken istekte sunucuya gönderir:

Parametre

gha_advance_booking_window

gha_campaign_id

gha_google_site

gha_is_ad_click

gha_is_click_type_hotel

gha_is_click_type_room

gha_is_hotel_campaign

gha_is_promoted

gha_length

gha_payment_id

gha_price_displayed_total

gha_promo_code

gha_user_country

gha_user_currency

gha_user_device

gha_user_language

gha_user_list_id

Özelleştirme: Özellikler, URL Parametreleri ve Stil

Immersive Experience'i bileşen özellikleriyle ve kendi Web Sitesi'nizdeki CSS/JS ile kişiselleştir.

Özel kodlar zamanla bakım gerektirebilir

Rezervasyon Motoru geliştikçe, kendi uyguladığın özelleştirmeler çalışmayı durdurabilir veya güncelleme gerektirebilir.
Mümkün olduğunda, değişiklikleri canlıya almadan önce sitenin bir test veya taslak kopyasında dene.

cb-immersive-experience ve cb-book-now-button bileşen öznitelikleri

Bu özellikler hem Standart hem de Açılır Pencere modları tarafından paylaşılır (bakınız Rezervasyon Motorunu Göm).

Aşağıdaki özelliklerin tamamı isteğe bağlıdır (property-code hariç) ve hem cb-immersive-experience hem de cb-book-now-button web bileşenleri tarafından desteklenir.

Ad	Tür	Zorunlu	Varsayılan değer	Açıklama
*para birimi ()**	3 harfli ISO-4217 para birimi kodu	Hayır	Tesisin varsayılan para birimi	Immersive Experience’in ilk yüklemesi için kullanılacak para birimi.
disable-css-title-reset	evet \| hayır	Hayır	hayır	evet, tesisin kullanıcı arayüzündeki başlıklar (h1… h6) için kendi CSS kural setlerini tanımlamak istemesi durumunda kullanılmalıdır.
hide-custom-header	evet \| hayır	Hayır	hayır	PMS’de tanımlanmış özel üst bilgiyi gizlemek için.
hide-custom-footer	evet \| hayır	Hayır	hayır	PMS’de tanımlanmış özel alt bilgiyi gizlemek için.
hide-property-info	yes \| no	Hayır	no	Tüm sayfalarda Tesis Bilgileri bölümünü gizlemek için.
*ignore-search-params ()**	yes \| no	Hayır	no	Immersive Experience, varsayılan olarak ev sahibi web sitesinin URL’sindeki sorgu parametrelerini okur ve uygulamanın ilk yüklenmesinde kullanır. Aynı parametreleri, barındırılan Rezervasyon Motoru da destekler.
*lang ()**	auto-detect \| 2 harfli ISO 639-1 dil kodu	Hayır	Tesisin varsayılan dili.	Immersive Experience’in ilk yüklenmesinde kullanılacak dil. Eğer belirtilmezse, Immersive Experience HTML’in lang özniteliğini kontrol eder; o da tanımlı değilse, tesisin varsayılan dili kullanılır. Eğer auto-detect değeri verilirse, Immersive Experience kullanıcının tarayıcı dilinde yüklenir.
mode	standard \| popup	Hayır	standard	Immersive Experience’in hangi modda gösterileceği. Immersive Experience, sabit yükseklikte veya maksimum yükseklikte bir konteyner içinde gösteriliyorsa, popup modu kullanılmalıdır.
*property-code ()**	Tesisinizi tanımlayan 6 haneli alfasayısal kod.	Evet	—	Tesisin temsil eden 6 haneli alfasayısal kodu. Rezervasyon Motoru URL’sindeki kodla aynıdır: https://hotels.cloudbeds.com/reservation/{PROPERTY_CODE}.

Uygulama başladığında ilk yükleme için işaretlenen özellikler yalnızca bir kez okunur. Daha sonra Tesisinizde bu özellikleri değiştirmek, zaten yüklenmiş olan Immersive Experience üzerinde etkili olmaz.

Hemen Rezervasyon yap butonu özel öznitelikleri

Bu seçenekler, cb-book-now-button bileşenine uygulanır (Rezervasyon Motorunu Göm bölümüne bakınız) ve butonun stilini, açılır pencerenin etiketini ve boyutlarını kontrol etmeni sağlar.

Öznitelik	Açıklama
class-name	Butonun stilini belirlemek için CSS sınıfı.
close-label	Kapatma butonu için özel etiket.
height	Açılır pencerenin yüksekliği.
width	Açılır pencerenin genişliği.

Etiket, boyut ve CSS sınıfı ile Hemen Rezervasyon yap butonu örneği:

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

Immersive Experience için özel CSS ve JavaScript ekle

Rezervasyon Motorunun özelleştirme alanlarına eklenen özel CSS veya JavaScript, Immersive Experience’a otomatik olarak uygulanmaz. Bunlar HTML belgesine manuel olarak eklenmelidir.

Çakışmaları önlemek için stil ve script etiketlerine data-cb-immersive-experience-root özniteliğini ekle.

Özel CSS örneği:

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