Rezervasyon Motorunuza WhatsApp Messenger Ekleme

Bu makale, misafirlerinin seninle daha hızlı ve etkili iletişim kurmasını sağlamak için Rezervasyon Motoruna (tıklanabilir görsel veya kayan buton olarak) WhatsApp Messenger butonunun nasıl ekleneceğini açıklar.

WhatsApp Messenger'ı Rezervasyon Motoruna Ekle

<!-- WhatsApp'ı Hemen Rezervasyon Yap butonunun altına eklemek için aşağıdaki kod -->
<div class="socialMedia">
<a href="https://api.whatsapp.com/send?phone=12345678910" class="socialWhatsapp" target="_blank">
<i class="fa fa-whatsapp"></i>
</a>
<p style="font-size: 13px; margin-top: 10px;">Whatsapp - BURAYA ÖZEL METNİNİ EKLE</p>
</div>
<style>
.socialWhatsapp {
background-color:#25d366;
color:#FFF;
border-radius:50px;
box-shadow: 2px 2px 3px #999;
font-size: 40px !important;
width:50px;
height:50px;
line-height: 0px !important;
margin-top:25px;
}
.fa-whatsapp { margin-top:18px; font-size: 38px !important; }
.socialMedia {
display: none;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: 1fr;
text-align: center;
 place-items: center;
}
</style>
<!-- Aşağıdaki kod mantığı, simgeleri Hemen Rezervasyon Yap butonunun altındaki metnin altına ekleyecek -->
<script type="text/javascript">
window.addEventListener("load", function(event) {
let social2 = document.querySelector(".socialMedia");
let content2 = document.querySelector(".secure-sm");
content2.insertAdjacentElement('afterend', social2);
social2.style.display = "grid";
});
</script>

<a href="https://api.whatsapp.com/send?phone=+1234567890&text=Hello%21%20"
class="floating" target="_blank">
<i class="fa fa-whatsapp float-button"></i>
</a>
<style>
.floating {
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px; 
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}
.fa.float-button{
  font-size: 40px !important;
	margin-top:23px;
}
</style></<a>

Rezervasyon Motoru Plus için WhatsApp Messenger

Yüzen buton olarak WhatsApp Messenger'ı Rezervasyon Motoru Plus'na eklemek için aşağıdaki adımları takip et:

1. Hesap menüsündeki Ayarlar sayfasına git ve Rezervasyon Motoru bölümüne tıkla
2. Özelleştir sekmesine tıkla
3. Aşağıdaki özelleştirme kodunu meta etiketleri bölümüne kopyala ve yapıştır.
4. Kaydet

Önemli: Misafirlerini WhatsApp'a doğru yönlendirmek için, 'replace the phone number below' (aşağıdaki telefon numarasını değiştir) ile başlayan yorum satırından sonra telefon numarasını düzenle:

<!-- **START** Yüzen WhatsApp butonu ve stilize kapatma (X) butonu ekler 19.07.2024 **START** -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- Aşağıdaki '1234567890' telefon numarasını ülke kodu dahil kendi numaranla değiştir. İstersen 'Hello' metnini kendi karşılama mesajınla değiştir. Başka bir şeyi değiştirme veya tırnak işaretlerini silme. -->
<a href="https://api.whatsapp.com/send?phone=1234567890&text=Hello" class="cb-floating-whatsapp" target="_blank">
<i class="fa-brands fa-whatsapp"></i>
</a>
<button class="cb-floating-whatsapp-close" aria-label="WhatsApp butonunu kapat">
<i class="fa-solid fa-xmark"></i>
</button>
<style>
.cb-floating-whatsapp {
position: fixed;
width: 60px;
height: 60px;
bottom: 70px;
right: 25px;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 30px;
z-index: 10000;
}
.cb-floating-whatsapp-close {
position: fixed;
width: 20px;
height: 20px;
bottom: 125px;
right: 20px;
background-color: #25d366;
color: white;
border: none;
font-size: 20px;
z-index: 10001;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.cb-floating-whatsapp-close i {
font-size: 15px;
font-weight: 700;
}
</style>
<!-- **END** Yüzen WhatsApp butonu ve stilize kapatma (X) butonu ekler 19.07.2024 **END** -->

5. Aşağıdaki özelleştirme kodunu JavaScript bölümüne kopyala ve yapıştır
6. Kaydet

<!-- **START** Stilize kapatma (X) butonu işlevi için JavaScript yüzen WhatsApp butonu scripti 19.07.2024 **START** -->
<script>
document.addEventListener("DOMContentLoaded", function() {
var whatsappButton = document.querySelector('.cb-floating-whatsapp');
var closeButton = document.querySelector('.cb-floating-whatsapp-close');
closeButton.addEventListener('click', function() {
whatsappButton.style.display = 'none';
closeButton.style.display = 'none';
});
});
</script>
<!-- **END** Stilize kapatma (X) butonu işlevi için JavaScript yüzen WhatsApp butonu scripti 19.07.2024 **END** -->