Widget Entegrasyon Kılavuzu

Snap Turizm tarafından geliştirilen rezervasyon widget’ının web sitelerine nasıl entegre edileceğini adım adım anlatır. Otel, acente veya işletmelere özel hazırlanan bu sistem sayesinde ziyaretçiler web siteniz üzerinden kolayca rezervasyon yapabilir, iletişim kurabilir ve arama işlemlerini doğrudan sitenizden gerçekleştirebilir.

Snap Turizm Widget Entegrasyon Rehberi

1. CSS – Bilgi Barı Stili

Bu kod rezervasyon ve telefon barının CSS kısmıdır. Buradan renk ve diğer özelleştirmeler yapılabilir. Web sitesinin CSS kısmına eklenmelidir.

.float-alt {
  position: fixed;
  width: 210px;
  height: 40px;
  bottom: 80px;
  right: 110px;
  background-color: #fff;
  color: #000 !important;
  font-weight: bold;
  text-align: center;
  font-size: 18px;
  z-index: 300;
  line-height: 40px;
}

.float-alt-rezervasyon {
  position: fixed;
  width: 210px;
  height: 40px;
  bottom: 80px;
  right: 320px;
  background-color: #ff4157;
  color: #fff !important;
  font-weight: bold;
  text-align: center;
  font-size: 18px;
  z-index: 300;
  line-height: 40px;
}

@media all and (max-width: 768px) {
  .float-alt, .float-alt-rezervasyon {
    width: 50%;
    height: 40px;
    bottom: -1px;
    font-size: 14px;
    z-index: 300;
    line-height: 40px;
  }

  .float-alt {
    right: 0px;
  }

  .float-alt-rezervasyon {
    left: 0px;
  }
}

.fo-link a:hover {
  background-color: #C88E00;
  color: #fff !important;
}

2. HTML – Rezervasyon ve Telefon Butonları

Bu yapı sabit şekilde sayfanın alt kısmında görünen bilgi barını oluşturur ve kişiselleştirme yapılabilir. Sayfanın body kısmına uygun bir yerine ya da footer'a eklenmelidir.

<!--Snap Alt Numara başla -->
<div class="fo-link">

  <a href="/rezervasyon" class="float-alt-rezervasyon">
    <i class="fa fa-calendar" style="font-size: 20px; margin-top: 7px; margin-right:5px;"></i> REZERVASYON
  </a>

  <a href="tel:+902426061430" class="float-alt" target="_blank">
    <i class="fa fa-volume-control-phone" style="font-size: 20px; margin-top: 7px; margin-right:5px;"></i> +90 242 606 14 30
  </a>

</div>
<!--Snap Alt Numara bitti -->

<script src="https://management.snapturizm.com.tr/widget/static/g62621a0257efb7121de1d548ef9765c.js" async></script>
🔔 Dikkat: Yukarıdaki g62621a0257efb7121de1d548ef9765c.js sadece bir örnektir. Size özel verilen script dosya adını kullanmalısınız.

3. Widget Kodları

Aşağıdaki kodlar sadece ilgili sayfalara özel eklenmelidir. Result id'li kısım Rezervasyon widgetinin arama sonuçları kısmıdır. Result kısayoluyla sayfa açıp oradan istediğiniz yere ekleyebilirsiniz. Payment ise ödeme kısmıdır; aynı şekilde payment kısayoluyla sayfa açıp oraya eklemeniz gerekmektedir.

Ana Sayfa veya Herhangi bir Yer:

<div id="snapWidget" data-page="home"></div>

Arama Sonuç Sayfası:

<div id="snapWidget" data-page="result"></div>

Ödeme Sayfası:

<div id="snapWidget" data-page="ccPayment"></div>