ฟังก์ชันนี้ใช้ได้กับที่พักที่มี Premium Embed Suite ซึ่งรวมถึง Immersive Experience 2.0 รุ่น MVP (Minimum Viable Product) หรือเวอร์ชันฟังก์ชันเริ่มต้นในปัจจุบัน จะเปลี่ยนเส้นทางผู้เข้าพักไปยัง Cloudbeds Booking Engine ที่โฮสต์ไว้ การรองรับการเปลี่ยนเส้นทางตรงเข้าสู่ Immersive Experience 2.0 จะมีในช่วงต้นไตรมาสที่ 1 ปี 2026
นี่คือวิธีง่าย ๆ ในการเพิ่มปุ่ม จองตอนนี้ สำหรับห้องพักเฉพาะบนเว็บไซต์ของคุณ — โดยไม่ต้องสร้างระบบการจองใหม่ทั้งหมด
Accommodation Calendar Embed คือคอมโพเนนต์เว็บแบบ immersive ขนาดเล็กที่เปิดปฏิทินให้ผู้เข้าพักเลือกวัน และส่งตรงไปยังเครื่องมือการจองของคุณโดยกรอกข้อมูลไว้ล่วงหน้า ลดความยุ่งยาก เพิ่มยอดจอง ทุกฝ่ายได้ประโยชน์
นี่คืออะไร (และควรใช้เมื่อไหร่)
ใช้ Accommodation Calendar เมื่อคุณต้องการให้ผู้เข้าพักจองห้องหรือยูนิตเฉพาะ ไม่ใช่แค่ “ที่พักโดยรวม” เหมาะสำหรับ:
- หน้ารายละเอียดห้องพัก
- หน้าบัญชีรายชื่อห้องพัก
- หน้าแลนดิ้งเพจสำหรับการตลาดหรือแคมเปญ
- หน้าส่งเสริมการขายที่เน้นที่พักเพียงหนึ่งแห่ง
หมายเหตุ: ไม่ควรฝังใน iframe
ประสบการณ์ของผู้เข้าพัก
นี่คือขั้นตอนจากมุมมองของผู้เข้าพัก:
- ผู้เข้าพักคลิก จองตอนนี้
- ปฏิทินจะปรากฏขึ้นในโมดอล
- ผู้เข้าพักเลือกวันที่เช็กอินและวันที่เช็กเอาต์
- ผู้เข้าพักคลิก ดำเนินการต่อ
- แท็บใหม่จะเปิดขึ้นพร้อมกับเครื่องมือการจองของคุณ โดยกรอกข้อมูลไว้ล่วงหน้าดังนี้:
- วันที่ที่เลือก
- ห้องหรือยูนิตที่ถูกต้อง
สิ่งที่คุณต้องมี ก่อนเริ่มต้น
ตรวจสอบให้แน่ใจว่าคุณมี:
- Cloudbeds Booking Engine (รหัสที่พัก)
- รหัสประเภทห้องพัก (Room ID) ที่คุณต้องการจอง (อธิบายด้านล่าง)
- สิทธิ์ในการแก้ไข HTML ของเว็บไซต์คุณ
เพื่อค้นหารหัสที่พักของคุณ คุณสามารถดูจากลิงก์เครื่องมือการจองและดึงตัวระบุเอกลักษณ์เฉพาะออกมา
ตัวเลือกที่ 1: รหัสประเภทห้องพัก
ใช้ตัวเลือกนี้ถ้าคุณต้องการให้ผู้เข้าพักจองห้องที่มีอยู่ในประเภทห้องนั้น ๆ เพื่อค้นหารหัสประเภทห้องพัก (rid):
- ไปที่ บัญชี
→ การตั้งค่า
➜ ที่พัก
→ แท็บ ที่พัก
-
จากนั้นคลิกชื่อห้อง (ประเภทห้องพัก) ที่คุณต้องการ
-
ดูที่แถบที่อยู่ของเบราว์เซอร์ หมายเลขที่แสดงอยู่ท้ายสุดของ URL คือรหัสประเภทห้องพัก
ตัวอย่างเช่น สำหรับ URL https://hotels.cloudbeds.com/connect/100000#/manage/roomTypes/123456 → รหัสประเภทห้องพักคือ 123456
ตัวเลือกที่ 2: รหัสยูนิต
ใช้ตัวเลือกนี้หากคุณต้องการให้ผู้เข้าพักจอง ห้องพักจริงเฉพาะเจาะจง (ยูนิต) แทนที่จะเป็นห้องใดก็ได้ในประเภทห้องพัก เพื่อค้นหารหัสยูนิตของคุณ:
- ไปที่ บัญชี
- คลิก แก้ไข ข้างยูนิตห้องที่เฉพาะเจาะจง
- เปิด เครื่องมือสำหรับนักพัฒนา ของเบราว์เซอร์ แล้วเลือก แท็บ เครือข่าย
- ในคำขอเครือข่าย ให้ค้นหาการเรียก API ที่ชื่อ [find_one]
- ในเพย์โหลดการตอบกลับ ให้หาช่องที่มีฉลาก "id" — ค่านี้คือรหัสยูนิตที่คุณจะใช้
ขั้นตอนที่ 1: เพิ่มสคริปต์ Cloudbeds
เพิ่มสคริปต์ต่อไปนี้ภายใน <head> ของเว็บไซต์ของคุณ:
หมายเหตุ: แท็กสคริปต์ทั้งหมดในขั้นตอนที่หนึ่งเหมือนกันสำหรับ Immersive Experience 2.0 และวิดเจ็ตทั้งหมด หากคุณได้ติดตั้งไว้แล้วสำหรับการฝังก่อนหน้านี้ คุณไม่จำเป็นต้องติดตั้งซ้ำ เพียงติดตั้งครั้งเดียวใน <head> (ระดับทั่วทั้งเว็บไซต์)
สำคัญ: ห้ามใช้แท็กคอมโพเนนต์เว็บ Immersive Experience 2.0 ภายใน iframe
การตั้งค่านี้อาจทำให้เกิดปัญหาการเลื่อนหน้า และต้องมีการอนุญาตรายการทั้งหมดในโซ่ iframe ซึ่งเป็นการกำหนดค่าที่ ไม่แนะนำ
รายการแนวทางปฏิบัติที่ดีที่สุดเมื่อผู้ใช้งานใช้ CMP:
- เพิ่ม Immersive Experience ที่จุดเริ่มต้นของส่วนหัว ก่อนแท็ก CMP และใส่แอตทริบิวต์ที่ป้องกันไม่ให้ถูกบล็อก ควรไม่ระบุทั้งหมดในเอกสารเพราะอาจแตกต่างกันไปตามแพลตฟอร์ม
- Cookiebot: data-cookieconsent="ignore"
- OneTrust: data-ignore-consent="true"
- Quantcast: data-quantcast-ignore="true"
- จัดประเภทสคริปต์ด้านล่างเป็น Necessary ในแผงผู้ดูแลระบบ CMP; อีกครั้ง อาจแตกต่างกันในแต่ละแพลตฟอร์ม
<script src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js" type="text/javascript"></script>ขั้นตอนที่ 2: เพิ่มปุ่มตัวเลือกวันที่
วางแท็กนี้ในตำแหน่งที่คุณต้องการให้ปุ่ม จองตอนนี้ ปรากฏ:
<cb-accommodation-date-picker
property-code="YOUR_PROPERTY_CODE"
rid="YOUR_ROOM_ID"
></cb-accommodation-date-picker>เมื่อเพิ่มแล้ว ปุ่มจะปรากฏโดยอัตโนมัติ
การปรับแต่งเพิ่มเติม (ไม่บังคับ)
คุณสามารถปรับแต่งปุ่มและอินเตอร์เฟสโดยใช้แอตทริบิวต์ไม่บังคับเหล่านี้:
| แอตทริบิวต์ | หน้าที่ |
| button-label | เปลี่ยนข้อความบนปุ่ม (ค่าเริ่มต้นคือ “จองตอนนี้”) |
| lang | ตั้งค่าภาษาสำหรับปฏิทินและฉลาก |
| currency | กำหนดสกุลเงินทับสกุลเงินเริ่มต้นของที่พัก |
| class-name | เพิ่มคลาส CSS แบบกำหนดเองสำหรับการตกแต่ง |
ตัวอย่าง:
<cb-accommodation-date-picker
property-code="YOUR_PROPERTY_CODE"
rid="YOUR_ROOM_ID"
button-label="Reserve This Room"
lang="en"
></cb-accommodation-date-picker>ฟีเจอร์ปฏิทินที่ผู้เข้าพักจะเห็น
ขึ้นอยู่กับการตั้งค่าที่พักของคุณ ปฏิทินสามารถแสดง:
- ข้อจำกัดการจอง (การเข้าพักขั้นต่ำ, วันที่ปิดรับจอง ฯลฯ)
- อัตราที่มีราคาต่ำสุดต่อวัน
- เช็กอินวันเดียวกัน (ถ้าเปิดใช้งาน)
- ภาษาและรูปแบบที่แปลอย่างสมบูรณ์
ข้อมูลทั้งหมดนี้ดึงมาจาก การกำหนดค่าของ Cloudbeds โดยตรง — ไม่ต้องตั้งค่าเพิ่มเติม
การตั้งค่าที่พักที่มีผลต่อพฤติกรรม
ฟีเจอร์เหล่านี้ถูกควบคุมใน Cloudbeds:
- การจองวันเดียวกัน – อนุญาตให้จองสำหรับวันนี้
- ตัวบ่งชี้ข้อจำกัด – แสดงกฎการจองบนปฏิทิน
- การแสดงอัตราต่ำสุด – แสดงอัตราที่ถูกที่สุดที่มีต่อวัน
ถ้ามีสิ่งใดไม่แสดง ให้ตรวจสอบที่ การตั้งค่า Cloudbeds เป็นจุดแรก
ข้อคิดเห็น
โปรด ลงชื่อเข้าใช้ เพื่อแสดงข้อคิดเห็น