เพิ่ม WhatsApp Messenger ลงในเครื่องมือการจองของคุณ

บทความนี้อธิบายวิธีการเพิ่มปุ่ม WhatsApp Messenger ลงในเครื่องมือการจองของคุณ (ในรูปแบบภาพที่คลิกได้หรือปุ่มลอย) เพื่อให้ผู้เข้าพักสามารถติดต่อกับคุณได้รวดเร็วและมีประสิทธิภาพมากขึ้น

WhatsApp Messenger สำหรับ Booking Engine Plus ของคุณ

หากต้องการเพิ่ม WhatsApp Messenger ลงใน Booking Engine Plus ในรูปแบบ ปุ่มลอย ให้ทำตามขั้นตอนด้านล่างนี้:

1. ไปที่หน้า ตั้งค่า ในเมนู บัญชี แล้วคลิกที่ส่วนของเครื่องมือการจอง
2. คลิกที่แท็บ ปรับแต่ง
3. คัดลอก โค้ดปรับแต่งด้านล่างและวางลงในส่วน เมต้าแท็กที่กำหนดเอง
4. บันทึก

สำคัญ: เพื่อให้ผู้เข้าพักถูกเปลี่ยนเส้นทางไปยัง WhatsApp ของคุณอย่างถูกต้อง ให้แก้ไขหมายเลขโทรศัพท์หลังบรรทัดคอมเมนต์ที่ขึ้นต้นด้วยข้อความ 'replace the phone number below':

<!-- **START** Adds a floating WhatsApp button with a styled close (X) button 19.07.2024 **START** -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- Replace the phone number below, '1234567890' with your phone number, including country code. Optionally, replace the text 'Hello' below, with your own introduction text. Do not edit anything else or erase quotation marks. -->
<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="Close WhatsApp button">
<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** Adds a floating WhatsApp button with a styled close (X) button 19.07.2024 **END** -->

5. คัดลอก โค้ดการปรับแต่งด้านล่างและวางลงในส่วน JavaScript
6. บันทึก

<!-- **เริ่มต้น** สคริปต์ปุ่ม WhatsApp ลอยตัว JavaScript สำหรับฟังก์ชันปุ่มปิด (X) แบบมีสไตล์ 19.07.2024 **เริ่มต้น** -->
<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>
<!-- **สิ้นสุด** สคริปต์ปุ่ม WhatsApp ลอยตัว JavaScript สำหรับฟังก์ชันปุ่มปิด (X) แบบมีสไตล์ 19.07.2024 **สิ้นสุด** -->