Gruplar Rezervasyon Motorunuzu Nasıl Özelleştirirsiniz

Gruplar Rezervasyon Motoru, HTML/CSS konusunda bilgisi olanlar veya bir web tasarımcısı çalıştıranlar için birçok detaylı özelleştirme sunar.

Bu makale, Gruplar Rezervasyon Motoru'nu özelleştirmek için bazı seçenekler sunar.

  Cloudbeds web geliştirme hizmetleri veya danışmanlık sunmaz, ancak HTML ve CSS hakkında daha fazla bilgi edinmek istersen, işte başlayabileceğin birkaç harika kaynak:

Grup Rezervasyon Motoru ana işlemleri

Gruplar Rezervasyon Motoruna nasıl erişilir

  1. Grup portal URL'nizi kullanarak organizasyonunuza (grup hesabına) giriş yap: YOURURL.cloudbeds.com/login
  2. Organizasyonun adına tıkla

  1. Gruplar yeni bir sayfada açılacak ve tarayıcı sekmesinde URL'yi görebilirsin:

Gruplar Rezervasyon Motorunu nasıl özelleştirirsin

  1. Sağ üst köşedeki kullanıcı adına tıkla
  2. Ayarlar seç
  3. Rezervasyon Motorunu Özelleştir seçeneğine tıkla

Rezervasyon Motorunu Özelleştir bölümündeki özel meta etiketler kutusunu kullanarak JavaScript, CSS ve diğer kodları Gruplar sitesinin HTML’inde üst bilgi veya alt bilgi bölümüne ekleyebilirsin. Bak: Özel Meta Etiket Örnekleri bölümü.

 Tüm alanlar kod içindir, düz metin için değil. Lütfen buraya basit metin ekleme, sayfanın bozulmasına neden olabilir. Her alan hakkında daha fazla bilgi için buraya bak: Gruplar Rezervasyon Motoru nereden özelleştirilir.

Açılış sayfasını değiştirme (Promosyon Kodu/Dış URL)

Varsayılan olarak, GİT butonuna tıklamak, seçili tesisin Rezervasyon Motoru sayfasına yönlendirir.

  1. Tesisler seçeneğine tıkla
  2. Dış URL bağlantısını değiştir
  3. Kaydet butonuna tıkla

Dış URL ile açılış sayfasını değiştir.gif

Misafirini, ilgili fiyat planının gösterileceği Rezervasyon Motoru sayfasına yönlendirmek için fiyat planı promosyon kodunu de girebilirsin.

Açılış sayfasına fiyat planı promosyon kodu gir.gif

Gruplar Rezervasyon Motoru için Özel Meta Etiket örnekleri

Aşağıda bazı özel CSS örnekleri bulunmaktadır. Kod içindeki değerleri ihtiyaçlarınıza göre değiştirmeniz gerekir. Rengi değiştirmek için HTML hex kodunu kullanabilirsiniz—bir HTML renk aracı bu sayfada bulunmaktadır.

Notlar: Eklenen kodlar aşağıda gösterildiği gibi <style> ve </style> etiketleri arasında olmalıdır:

<style>
.price_box a {background:#aaa}
</style>

Etkileşimli Etiket Kodlarından Başlama

Fare Üzerindeyken Başlangıç Etiketinin Rengi

Renk kodu #008000'i istediğin herhangi bir renkle değiştir ve bu kodu otel rezervasyon sayfan için Özel üst bilgi bölümüne ekle:

<style>
.starting_from i.fa-tag:hover {
  color: #008000;
  cursor: pointer;
}
</style>

Kullanılamayan etiket kodları

Fare etiketin üzerine geldiğinde rengini değiştir. #008000 renk kodunu istediğin başka bir renk koduyla değiştir ve kodu Otel rezervasyon sayfan için Özel üst bilgi bölümüne ekle:

<style>
.not_available i.fa-tag:hover {
  color: #008000;
  cursor: pointer;
}
</style>

#aaa kodunu istediğin başka bir renk koduyla değiştir. Aşağıdaki kodu Otel rezervasyon sayfan için Özel üst bilgi bölümüne ekle:

<style>
.not_available {background: #aaa}
</style>

unavailable-background-color-with_background_code.png

Aşağıdaki kodda 'ADD TEXT HERE' yazan yeri istediğin kelimeyle değiştir ve kodu Özel meta etiketler bölümüne uygula:

<style>
.price_box .not_available {
  font-size: 0;
}
.price_box .not_available:after {
  content: "ADD TEXT HERE";
  font-size: 10px;
}
</style>

switch-the-unavailable-word-with_code.png

Arama butonu kodları

Otel rezervasyon sayfan için Özel üst bilgi bölümüne aşağıdaki kodu ekle ve #fff kodunu istediğin başka bir renk koduyla değiştir:

<style>
.sidebar_white_box button {
  background: #fff none repeat scroll 0 0;
}
</style>

Fare butonun üzerine geldiğinde rengini değiştir. #000 yerine istediğin renk kodunu kullan. Aşağıdaki kodu Otel rezervasyon sayfan için Özel üst bilgi bölümüne ekle:

<style>
div.sidebar_white_box.form-group button:hover 
{ 
background: #000; 
}
</style>

Yazı rengini istediğin başka bir renge değiştir. #fff kodunu istediğin renk koduyla değiştir:

<style>
div.sidebar_white_box.form-group button 
{ 
color: #fff
}
</style>

Varsayılan haritayı Google Haritalar ile değiştir

Adım 1 - Google Haritalar konum kodunu kopyala

  Bilmeniz gerekenler:

  • Talimatlar Google Haritalar Yardım sayfasından alınmıştır.
  • Gömülü harita üzerinde trafik ve diğer harita bilgileri her zaman mevcut olmayabilir.
  1. Google Haritalar'ı aç.
  2. Tesisinin konumunu bul.
  3. Paylaş'a tıkla.

Google Haritalar'da Paylaş düğmesi

Google Haritalar paylaşım menüsü

  1. Harita göm'e tıkla.
  2. HTML Kopyala'ya tıkla (bu, tüm kodu kopyalar). Kod <iframe> ile başlamalı ve </iframe> ile bitmelidir.

 Kod, tarayıcının dilinde oluşturulacak ve harita o dilde gösterilecektir.

Örnek: Aşağıda kırmızı ile vurgulanan kod, haritanın dili olan İngilizce (en) dilindedir. Gerekirse, diğer dillere (örn. İspanyolca (es), Portekizce (pt) vb.) değiştirebilirsin.

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7886.465207518082!2d115.1726561!3d-8.764173!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd244f35b8a5d05%3A0xd42d4da6a44aa938!2sJimbaran%20Beach!5e0!3m2!1sen!2sid!4v1596624024065!5m2!1sen!2sid" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

Örnek iframe kodu

Adım 2 - Özelleştirme Kodunu Cloudbeds PMS'ye Ekle

Özel Meta Etiketler bölümüne aşağıdaki kodu ekle. "Google Harita URL'ni buraya koy" kısmını, Adım 1'de aldığın Google Haritalar URL'n ile değiştir.

<style> #map_canvas, #map_canvas_big {  display: none; } </style> <script type="text/javascript"> window.addEventListener("load", function(event) {   //google haritalar iframe'ini ekle   var d1 = document.getElementById('map_canvas');  d1.insertAdjacentHTML('afterend', 'Google Harita URL\'ni buraya koy'); }, false); </script> <script type="text/javascript"> window.addEventListener("load", function(event) {   //google haritalar iframe'ini ekle   var d1 = document.getElementById('map_canvas_big');  d1.insertAdjacentHTML('afterend', '<iframe src="Google Harita URL\'ni buraya koy" width="100%" height="274">'); }, false); </script>

Sıkça Sorulan Sorular

Grup Rezervasyon Motorundaki fotoğraflar nereden geliyor?

Grup Rezervasyon Motoru, tesislerin Cloudbeds hesaplarından otomatik olarak tesis görsellerini çeker. Bunlar, Hesaplar Account menu icon.png > Ayarlar Settings icon.png > Tesis Property icon.png > Tesis Profili > Tesis Görselleri altında yüklenen aynı görsellerdir.

 İpucu: Grup Rezervasyon Motorunda bir tesis için gösterilen ana görseli güncellemek veya değiştirmek istiyorsan, o tesise ait Tesis Profili sayfasında görselleri yeniden sipariş vermeli veya değiştirmelisin. Detaylar için, Tesis Profili - Bilmen Gereken Her Şey sayfasına bakabilirsin.

Grup Rezervasyon Motorunda gösterilen tesislerin sırasını değiştirebilir miyim?

Şu anda Grup Rezervasyon Motoru, tesislerin gösterim sırasını değiştirmeye izin vermiyor. Tesisler otomatik olarak listelenir ve sıralamayı değiştirmek için herhangi bir ayar bulunmamaktadır. Bu kısıtlama gelecekteki geliştirmeler için dahili olarak kaydedilmiştir, ancak şu anda sıralama özelleştirilemez.

Grup Rezervasyon Motoru, bir tesisin müsaitliği yoksa başka tesisler önerir mi?

Hayır. Grup Rezervasyon Motoru otomatik olarak alternatif tesisler önermez. Bunun yerine, grup hesabındaki tüm tesisleri gösterir, böylece misafirler ilk tercihleri doluysa başka bir tesiste müsaitliği manuel olarak kontrol edebilirler.

Bu makale yardımcı oldu mu?
4 kişi içerisinden 1 kişi bunun yardımcı olduğunu düşündü

Yorumlar

0 yorum

Yorum yazmak için lütfen oturum açın: oturum aç.