เครื่องมือจองกลุ่ม - วิธีการปรับแต่ง

Juss Reyes

ปรับปรุงเมื่อ 17 ตุลาคม, 2024 22:38

Groups Booking Engine มีการปรับแต่งลึกลงได้หลายรูปแบบสำหรับผู้ที่คุ้นเคยกับ HTML/CSS หรือใช้งานนักออกแบบเว็บ

บทความนี้มีตัวเลือกบางอย่างในการ ปรับแต่ง Groups Booking Engine

Cloudbeds ไม่ให้บริการพัฒนาเว็บ หรือให้คำปรึกษา แต่หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ HTML และ CSS นี่คือสถานที่ที่ดีที่จะเริ่มต้น:

Groups Booking Engine

วิธีเข้าถึง Groups Booking Engine

เข้าสู่ระบบขององค์กร (กลุ่ม)
คลิกที่ชื่อองค์กร

กลุ่มจะเปิดขึ้นในหน้าใหม่และบนแท็บของเบราวเซอร์คุณสามารถเห็น url:

ที่ไหนที่สามารถปรับแต่งเครื่องมือจองกลุ่ม

คลิกที่ชื่อผู้ใช้ของคุณที่มุมขวาบน
เลือก ตั้งค่า
คลิก ปรับแต่งเครื่องมือจอง

ใช้กล่องแท็กเมต้าที่สร้างเองในส่วน ปรับแต่งเครื่องมือจอง เพื่อเพิ่มจาวาสคริปต์ ซีเอสเอส และรหัสอื่น ๆ ไปยังส่วนหัวหรือส่วนท้ายของ HTML ของเว็บไซต์กลุ่มของคุณ ดูส่วน: ตัวอย่างแท็กเมต้าที่กำหนดเอง

ทุกช่องมีไว้สำหรับโค้ดเท่านั้น โปรดอย่าใส่ข้อความธรรมดาที่นี่เพราะอาจทำให้หน้าเว็บเสียหาย ศึกษาข้อมูลเพิ่มเติมเกี่ยวกับแต่ละช่องได้ที่นี่: ที่ไหนที่ฉันสามารถปรับแต่งเครื่องมือจองกลุ่ม

วิธีเปลี่ยนหน้าแลนดิ้ง (โปรโมชั่นโค้ด/URL ภายนอก)

โดยค่าเริ่มต้น การคลิกที่ปุ่ม ไป จะพาคุณไปยังหน้าเครื่องมือจองของที่พักที่คุณเลือก

เปลี่ยนหน้าแลนดิ้ง

เปลี่ยนหน้าแลนดิ้งเป็นเว็บไซต์ของคุณเองหรืออื่นๆ โดยการใส่ URL ของหน้าในช่อง โปรโมชั่นโค้ด / URL ภายนอก ภายในแท็บ ที่พัก ในกลุ่ม:

คลิกที่ ที่พัก
แทนที่ลิงก์ URL ภายนอก
คลิกที่ บันทึก

ตัวอย่าง:

ตัวอย่างแท็กเมตาที่กำหนดเองสำหรับเครื่องมือจองกลุ่ม

ด้านล่างนี้คือตัวอย่าง CSS ที่กำหนดเอง คุณต้องเปลี่ยนค่าในโค้ดตามความต้องการของคุณ สีสามารถเปลี่ยนได้โดยใช้รหัสฮีกซ์ HTML - ลิงก์ไปยังเครื่องมือสี HTML ในหน้านี้

หมายเหตุ: โค้ดที่แทรกควรอยู่ระหว่าง <style> โค้ด </style> ตามที่แสดงด้านล่าง:

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

คลิกเพื่อคัดลอก

รหัสแท็ก Starting From

สีของแท็ก Starting From เมื่อโฮเวอร์

แทนรหัสสี #008000 ด้วยสีอื่น ๆ และเพิ่มโค้ดนี้ไปยังส่วน ส่วนหัวที่กำหนดเองสำหรับหน้าการจองโรงแรมของคุณ :

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

คลิกเพื่อคัดลอก

Mygroup Custom Meta Tag, CSS, and HTML Examples – myfrontdesk - Google Chrome

รหัสแท็กที่ไม่สามารถใช้

สีของแท็กที่ไม่สามารถใช้เมื่อโฮเวอร์

เปลี่ยนสีของแท็กเมื่อโฮเวอร์ แทนที่รหัสสี #008000 ด้วยสีอื่น ๆ และเพิ่มรหัสในส่วน ส่วนหัวที่กำหนดเองสำหรับหน้าการจองโรงแรมของคุณ:

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

คลิกเพื่อคัดลอก

สีพื้นหลังที่ไม่สามารถใช้

เปลี่ยน #aaa เป็นรหัสสีที่ต้องการ ใส่รหัสต่อไปนี้ในส่วน ส่วนหัวที่กำหนดเองสำหรับหน้าการจองโรงแรมของคุณ:

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

คลิกเพื่อคัดลอก

เปลี่ยนคำว่าไม่สามารถใช้

ดำเนินการและเปลี่ยนคำ 'เพิ่มข้อความที่นี่' เป็นคำที่ต้องการในโค้ดด้านล่างและนำโค้ดไปใช้ในส่วน เมต้าแท็กที่กำหนดเอง:

<style>
.price_box .not_available {
  font-size: 0;
}
.price_box .not_available:after {
  content: "เพิ่มข้อความที่นี่";
  font-size: 10px;
}
</style>

คลิกเพื่อคัดลอก

รหัสปุ่มค้นหา

สีพื้นหลัง

เพิ่มรหัสต่อไปนี้ในส่วน ส่วนหัวที่กำหนดเองสำหรับหน้าการจองโรงแรมของคุณ และเปลี่ยน #fff เป็นรหัสสีที่ต้องการ:

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

คลิกเพื่อคัดลอก

สีพื้นหลัง - เมื่อโฮเวอร์

เปลี่ยนสีของปุ่มเมื่อเมาส์โฮเวอร์. ใช้โค้ดใดก็ได้แทน #000. เพิ่มโค้ดต่อไปนี้ในส่วน ส่วนหัวที่กำหนดเองสำหรับหน้าการจองโรงแรมของคุณ:

<style>

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

คลิกเพื่อคัดลอก

สีข้อความในการค้นหา

เปลี่ยนสีตัวอักษรเป็นสีอื่น. เปลี่ยน #fff เป็นโค้ดสีที่ต้องการ:

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

คลิกเพื่อคัดลอก

แทนที่ภาพเริ่มต้น

แทนที่แม็ปเริ่มต้นด้วย Google Map

ขั้นตอนที่ 1 - คัดลอกโค้ดตำแหน่ง Google Maps ของคุณ

คำแนะนำ มาจาก Google Maps Help
ปริมาณการเข้าใช้และข้อมูลแผนที่อื่น ๆ บางครั้งอาจไม่มีใน แผนที่ฝัง

เปิด Google Maps
ค้นหาตำแหน่งของที่พักของคุณ ที่ตั้ง
คลิก แชร์

คลิก ฝังแผนที่
คลิก คัดลอก HTML (นี้จะคัดลอกโค้ดทั้งหมด) โค้ดควรเริ่มต้นด้วย <iframe และจบด้วย /iframe>

โค้ดจะถูกสร้างขึ้น ในภาษาของเบราว์เซอร์ของคุณ และแผนที่จะแสดงเป็นภาษานั้น

ตัวอย่าง: โค้ด เน้นสีแดง ด้านล่างคือภาษาของแผนที่, อังกฤษ (en). หากจำเป็นคุณสามารถเปลี่ยนเป็นภาษาอื่น (เช่น สเปน (es), โปรตุเกส (pt), ฯลฯ)

<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>

ขั้นตอนที่ 2 - เพิ่มรหัสการปรับแต่งบน Cloudbeds PMS

เพิ่มรหัสต่อไปนี้ในส่วน เมต้าแท็กที่กำหนดเอง และแทนที่ ประโยคสีแดง ด้วย URL ของ Google Map จาก ขั้นตอนที่ 1 ของคุณ

<style>
#map_canvas, #map_canvas_big { 
display: none;
}
</style>
<script type="text/javascript">
window.addEventListener("load", function(event) {
 //append google maps iframe
 var d1 = document.getElementById('map_canvas');
 d1.insertAdjacentHTML('afterend', 'ใส่ URL ของ Google Map ของคุณที่นี่');
}, false);
</script>
<script type="text/javascript">
window.addEventListener("load", function(event) {
 //append google maps iframe
 var d1 = document.getElementById('map_canvas_big');
 d1.insertAdjacentHTML('afterend', '<iframe src="ใส่ URL ของ Google Map ของคุณที่นี่" width="100%" height="274">');
}, false);
</script>