เพิ่ม WhatsApp Messenger เข้าสู่เครื่องมือการจองของคุณ

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

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

<!-- รหัสต่อไปนี้เป็นสำหรับการเพิ่ม WhatsApp ภายใต้ปุ่ม Book Now -->
<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 - ข้อความที่กำหนดเองที่นี่</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>
<!-- โค้ดต่อไปนี้จะเพิ่มไอคอนด้านล่างข้อความใต้ปุ่ม Book Now -->
<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>

WhatsApp Messenger สำหรับ เครื่องมือจองพลัส

เพื่อเพิ่ม WhatsApp Messenger ไปยัง เครื่องมือจองพลัส เป็น ปุ่มลอย, ทำตามขั้นตอนด้านล่าง:

1. ไปที่หน้า Settings ในเมนู Account และคลิกที่ส่วนเครื่องมือจอง
2. คลิกที่แท็บ Customize
3. คัดลอก โค้ดการปรับแต่งด้านล่างและวางไว้ในส่วน Custom Meta Tags
4. บันทึก

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

<!-- **START** เพิ่มปุ่ม WhatsApp ลอยพร้อมปุ่มปิด (X) 19.07.2024 **START** -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- แทนที่หมายเลขโทรศัพท์ด้านล่าง, '1234567890' ด้วยหมายเลขโทรศัพท์ของคุณ รวมถึงรหัสประเทศ ตัวเลือก, แทนที่ข้อความ 'Hello' ด้านล่าง, ด้วยข้อความแนะนำของคุณเอง อย่าแก้ไขอย่างอื่นหรือลบเครื่องหมายคำพูด -->
<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">
<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** เพิ่มปุ่ม WhatsApp ลอยพร้อมปุมปิด (X) 19.07.2024 **END** -->

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

<!-- **START** สคริปต์ปุ่ม WhatsApp ลอยด้วยปุ่มปิด (X) ฟังก์ชัน 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** สคริปต์ปุ่ม WhatsApp ลอยด้วยปุ่มปิด (X) ฟังก์ชัน 19.07.2024 **END** -->