ภาพรวม
คอมโพเนนต์นี้ออกแบบมาเพื่อการผสานรวมที่ต้องการค้นหาวันที่ในระดับที่พักบนเว็บไซต์ของคุณ เหมาะสำหรับใช้ใน:
- หน้าแรกหรือส่วนฮีโร่ของเว็บไซต์
- ส่วนการจองหรือ “ตรวจสอบสถานะห้องว่าง”
- แลนดิ้งเพจที่ส่งผู้ใช้เข้าสู่กระบวนการจองเต็มรูปแบบ
- หน้าที่ต้องการให้เลือกวันก่อนที่ผู้เข้าพักจะถึงเครื่องมือจอง
คอมโพเนนต์นี้จะแสดงสถานะห้องว่างในระดับที่พัก (ครอบคลุมทุกประเภทห้องพัก) ไม่ใช่ห้องพักเฉพาะเจาะจง หลังจากเลือกวันแล้ว ผู้เข้าพักจะถูกส่งไปยังเครื่องมือจองเพื่อเลือกห้องและทำการจองให้เสร็จสมบูรณ์
การติดตั้ง
เพื่อเพิ่ม Booking Engine Web Components ลงในเว็บไซต์ภายนอก เราต้องเพิ่มสคริปต์ Immersive Experience script ในส่วน head ของเอกสาร HTML ก่อน:
<cb-property-date-picker> เป็นคอมโพเนนต์เว็บที่ให้แถบเลือกวันสำหรับที่พักของคุณ โดยจะแสดงช่องเช็กอินและเช็กเอาต์ ปฏิทินแบบป๊อปโอเวอร์ และปุ่มค้นหา เมื่อผู้เข้าพักเลือกวันและคลิกค้นหา จะถูกเปลี่ยนเส้นทางไปยังเครื่องมือจองพร้อมวันเหล่านั้น เพื่อเลือกห้องและทำการจองให้เสร็จ
หมายเหตุ: แท็กสคริปต์ทั้งหมดในขั้นตอนแรกเหมือนกันสำหรับ Immersive Experience 2.0 และวิดเจ็ตทั้งหมด หากคุณติดตั้งไว้แล้วจากการฝังก่อนหน้า ไม่จำเป็นต้องติดตั้งซ้ำ เพียงติดตั้งครั้งเดียวในส่วน <head> (ระดับทั่วเว็บไซต์)
สำคัญ: ห้ามใช้แท็กคอมโพเนนต์เว็บ Immersive Experience 2.0 ภายใน iframe
การตั้งค่านี้อาจทำให้เกิดปัญหาการเลื่อนหน้า และต้องอนุญาตทุกไอเท็มในโซ่ iframe ซึ่งเป็นการตั้งค่าที่ ไม่แนะนำ
รายการแนวทางปฏิบัติที่ดีที่สุดเมื่อผู้ใช้ใช้ CMP:
- เพิ่ม Immersive Experience ที่จุดเริ่มต้นของ
headก่อนแท็ก CMP และใส่แอตทริบิวต์ที่ป้องกันไม่ให้ถูกบล็อก โดยแอตทริบิวต์เหล่านี้อาจแตกต่างกันตามแพลตฟอร์ม- Cookiebot: data-cookieconsent="ignore"
- OneTrust: data-ignore-consent="true"
- Quantcast: data-quantcast-ignore="true"
- จัดประเภทสคริปต์ด้านล่างเป็น “จำเป็น” ในแผงผู้ดูแลระบบ CMP ซึ่งอาจแตกต่างกันในแต่ละแพลตฟอร์ม
<script src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js" type="text/javascript"></script>การติดตั้ง
ใส่สคริปต์ Cloudbeds web components ในส่วน <head> ของ HTML ของคุณ (หรือก่อนส่วนประกอบใน <body>) สคริปต์นี้ต้องโหลดก่อนแท็ก <cb-property-date-picker> ใดๆ เพื่อให้ส่วนประกอบถูกลงทะเบียน
การใช้งานพื้นฐาน
<script
src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js">
</script>สิ่งที่การติดตั้งนี้ทำ
- การโหลดสคริปต์นี้จะลงทะเบียนส่วนประกอบ
<cb-property-date-picker>บนหน้าเว็บ - หลังจากสคริปต์โหลดเสร็จ คุณสามารถวางแท็ก
<cb-property-date-picker>หนึ่งแท็กหรือมากกว่านั้นที่ไหนก็ได้ แต่ละตัวจะแสดงแถบตัวเลือกวัน (เช็กอิน, เช็กเอาต์ และปุ่มค้นหา) และเมื่อผู้เข้าพักเลือกวันและคลิกค้นหา จะถูกเปลี่ยนเส้นทางไปยังเครื่องมือการจอง (หรือ URL ที่กำหนดเองของคุณ) พร้อมกับวันที่เลือกตามที่อธิบายไว้ด้านล่าง
การใช้งานส่วนประกอบ
ตัวอย่างขั้นต่ำที่ต้องใช้
คุณสามารถใช้ส่วนประกอบนี้โดยใส่แค่ data-property-code ในสคริปต์ (ไม่ต้องใส่แอตทริบิวต์ในองค์ประกอบ) หรือจะใส่รหัสที่พักในองค์ประกอบก็ได้:
<cb-property-date-picker
property-code="YOUR_PROPERTY_CODE"
></cb-property-date-picker>เมื่อใส่แค่รหัสที่พัก (ในสคริปต์หรือในองค์ประกอบ) ส่วนประกอบจะแสดงปุ่ม “ค้นหา” ค่าเริ่มต้น และใช้ภาษากับสกุลเงินค่าเริ่มต้นของที่พักของคุณ
แอตทริบิวต์
| แอตทริบิวต์ | จำเป็น | ค่าเริ่มต้น | คำอธิบาย |
property-code |
ใช่ | — | รหัสที่พักของคุณใน Cloudbeds หากไม่ระบุ คอมโพเนนต์จะใช้ data-property-code ของสคริปต์ (สำหรับที่พักเดียวเท่านั้น) |
button-label |
ไม่ | "ค้นหา" | ข้อความที่แสดงบนปุ่มค้นหา (เช่น “ตรวจสอบสถานะห้องว่าง”, “ค้นหาห้องพัก”) |
layout |
ไม่ | "แนวนอน" | รูปแบบของแถบวัน: horizontal (วันและปุ่มเรียงในแถวเดียว) หรือ vertical (วางซ้อนกัน) |
open-in-new-tab |
ไม่ | "false" | กำหนดว่าจะเปิดเครื่องมือจองในแท็บใหม่หรือไม่ ใช้ค่า "true" หรือ "false" เป็นสตริง |
lang |
ไม่ | ค่าเริ่มต้นของที่พัก | รหัสภาษาสำหรับอินเตอร์เฟส (e.g. en, es) |
currency |
ไม่ | ค่าเริ่มต้นของที่พัก | รหัสสกุลเงินสำหรับอัตราที่แสดง (e.g. usd, eur) |
class-name |
ไม่ | — | ชื่อคลาส CSS ที่ใช้กับคอมโพเนนต์เพื่อปรับแต่งสไตล์ |
custom-url |
ไม่ | — | URL ที่จะเปลี่ยนเส้นทางไปหลังจากเลือกวันที่ แทนที่จะไปที่เครื่องมือการจอง โดยจะรับพารามิเตอร์ checkin, checkout, widget_source, promo และพารามิเตอร์การวิเคราะห์เป็น query params |
สิ่งที่คอมโพเนนต์สร้างขึ้น
-
เมื่อโหลดหน้าเพจ: แถบวันที่ที่มีช่องเช็กอินและเช็กเอาต์ พร้อมปุ่มค้นหา (แนวนอนหรือแนวตั้ง ขึ้นอยู่กับ
layout) การแตะหรือคลิกที่ช่องวันที่จะเปิดปฏิทินแบบป๊อปโอเวอร์ - ในป๊อปโอเวอร์ ผู้เข้าพักจะเลือกวันที่เช็กอินและเช็กเอาต์ ปฏิทินจะแสดงสถานะห้องว่างในระดับที่พัก และข้อจำกัดหรืออัตราที่ที่พักของคุณตั้งค่าไว้
-
เมื่อค้นหา (คลิกปุ่ม): ผู้เข้าพักจะถูกเปลี่ยนเส้นทาง (ในแท็บเดียวกันหรือแท็บใหม่ ขึ้นอยู่กับ
open-in-new-tab) ไปยังเครื่องมือการจอง พร้อมกับ:- วันที่เช็กอินที่เลือก
- วันที่เช็กเอาต์ที่เลือก
- ภาษารวมถึงพารามิเตอร์อื่น ๆ ในการค้นหา (เช่น โปรโมชั่น, การวิเคราะห์)
ถ้าคุณตั้งค่า custom-url พารามิเตอร์การค้นหาเดียวกัน (checkin, checkout, widget_source, promo, การวิเคราะห์) จะถูกเพิ่มเข้าไปใน URL นั้นเพื่อให้หน้าของคุณสามารถดำเนินการต่อได้
การหาตัวระบุที่พักของคุณ
ตัวระบุที่พักของคุณคือรหัสเอกลักษณ์เฉพาะใน URL ของเครื่องมือการจอง คุณสามารถหาได้จากการตั้งค่า PMS ของคุณ ในแท็บสรุปเครื่องมือการจอง:
ลำดับขั้นตอนของผู้ใช้งาน
- ผู้เข้าพักเห็นแถบวันที่ (เช็กอิน, เช็กเอาต์, ปุ่มค้นหา) บนหน้าเพจของคุณ
- ผู้เข้าพักคลิกที่ช่องวันที่ → ปฏิทินแบบป๊อปโอเวอร์จะเปิดขึ้น
- ผู้เข้าพักเลือกวันที่เช็กอิน → ปฏิทินจะแสดงวันที่เช็กเอาต์ที่มีห้องว่าง
- ผู้เข้าพักเลือกวันที่เช็กเอาต์ → ปุ่มค้นหาจะใช้งานได้
- ผู้เข้าพักคลิกปุ่มค้นหา → จะถูกเปลี่ยนเส้นทางไปยัง URL ที่กำหนดไว้ (Immersive Experience หรือ URL ที่โฮสต์) ไปยังเครื่องมือการจองพร้อมวันที่ที่เลือก เพื่อเลือกห้องและทำการจองให้เสร็จสมบูรณ์
คุณสมบัติตัวเลือกวันที่
ปฏิทินแบบป๊อปโอเวอร์ประกอบด้วย:
- แสดงสถานะห้องว่าง: สถานะห้องว่างในระดับที่พัก (รวมทุกประเภทห้อง)
- แสดงข้อจำกัด: การเข้าพักขั้นต่ำ, ไม่อนุญาตเช็กอิน, และข้อจำกัดอื่น ๆ (เมื่อเปิดใช้งานในการตั้งค่าที่พักของคุณ)
- แสดงอัตราต่ำสุด: อัตราที่ต่ำสุดต่อวัน (เมื่อเปิดใช้งานในการตั้งค่าที่พักของคุณ)
- การจองวันเดียวกัน: การจองสำหรับวันที่วันนี้ (เมื่อเปิดใช้งานในการตั้งค่าที่พักของคุณ)
-
อินเตอร์เฟสที่แปลภาษา: ฉลากและข้อความจะตาม
langที่คุณตั้งค่าไว้
การกำหนดค่าที่พัก
พฤติกรรมบางอย่างขึ้นอยู่กับการตั้งค่าที่พักของคุณใน Cloudbeds ซึ่งจะถูกกำหนดค่าในแดชบอร์ด Cloudbeds ไม่ใช่ผ่านแอตทริบิวต์ของคอมโพเนนต์:
| การตั้งค่า | ผลลัพธ์ |
allowSameDayReservation |
อนุญาตให้ผู้เข้าพักเลือกวันนี้เป็นวันที่เช็กอินได้ |
showRestrictionsOnCalendar |
แสดงสัญลักษณ์ข้อจำกัดต่างๆ (เช่น การเข้าพักขั้นต่ำ, ไม่อนุญาตเช็กอิน ฯลฯ) |
showLowestRatesOnCalendar |
แสดงอัตราที่มีราคาต่ำสุดในแต่ละวัน |
ตัวอย่างการใช้งาน
พื้นฐาน (ใช้รหัสที่พักบนองค์ประกอบ)
<cb-property-date-picker
property-code="O2YXd0"
></cb-property-date-picker>พร้อมแอตทริบิวต์ไม่บังคับ
<cb-property-date-picker
property-code="O2YXd0"
button-label="ตรวจสอบสถานะห้องว่าง"
layout="vertical"
lang="th"
currency="eur"
class-name="my-date-picker"
></cb-property-date-picker>เปิดเครื่องมือจองในแท็บใหม่
<cb-property-date-picker
property-code="O2YXd0"
open-in-new-tab="true"
></cb-property-date-picker>พร้อมเปลี่ยนเส้นทาง URL แบบกำหนดเอง
เมื่อใช้ custom-url ผู้เข้าพักจะถูกส่งไปยัง URL ของคุณหลังจากเลือกวัน URL จะรับพารามิเตอร์ checkin, checkout, widget_source, promo และการวิเคราะห์ เพื่อให้หน้าของคุณสามารถดำเนินการจองต่อได้
<cb-property-date-picker
property-code="O2YXd0"
custom-url="https://example.com/booking"
></cb-property-date-picker>คำถามที่พบบ่อย
วิดเจ็ตค้นหาสนับสนุนตัวกรองผู้เข้าพัก (ผู้ใหญ่/เด็ก) ไหม?
ไม่ครับ วิดเจ็ตปัจจุบันยังไม่มีตัวกรองผู้เข้าพักแยกสำหรับผู้ใหญ่หรือเด็ก รองรับแค่การเลือกเช็กอิน เช็กเอาต์ รหัสโปรโมชั่น และปุ่มค้นหาเท่านั้น
ข้อคิดเห็น
โปรด ลงชื่อเข้าใช้ เพื่อแสดงข้อคิดเห็น