Cloudbeds เครื่องมือการจอง Immersive Experience 2.0 - ทุกสิ่งที่คุณต้องการรู้

Samuel

02 ตุลาคม, 2025 20:42

ภาพรวม

เครื่องมือการจอง Cloudbeds Booking Engine Immersive Experience 2.0 เป็นโซลูชันการจองที่ทันสมัยและเป็นเว็บเบสเต็มรูปแบบที่มอบประสบการณ์การจองที่ราบรื่นและเป็นมิตรกับแขกโดยตรงบนเว็บไซต์ที่พักของคุณ มันช่วยอำนวยความสะดวกในการชำระเงินที่ปลอดภัยตามมาตรฐาน PCI และรวมข้อมูลการติดตามความเข้ากันได้ของ Google เพื่อให้ได้ข้อมูลเชิงลึกตั้งแต่การดูหน้าไปจนถึงการซื้อ

ประสบการณ์ การจองที่ได้รับการปรับปรุง

Immersive Experience 2.0 นำเสนอ ฟีเจอร์เอกลักษณ์เฉพาะที่ออกแบบมาเพื่อยกระดับประสบการณ์การจองของแขกบนเว็บไซต์ของคุณ:

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

ส่วนประกอบที่เป็นเว็บเบส vs. iframe-based

แตกต่างจากระบบที่ใช้ iframe, ส่วนประกอบที่เป็นเว็บเบสแบบบูรณาการนี้มี:

เวลาโหลดเว็บไซต์ที่เร็วขึ้น
การปรับแต่ง แบรนด์ที่ดีขึ้น
กระบวนการจอง ที่เป็นเอกภาพที่ทำให้แขกอยู่ในเว็บไซต์ตั้งแต่การค้นหาเริ่มต้นจนถึงการชำระเงินเสร็จสิ้น

มันดูเป็นอย่างไร

ด้วย Immersive Experience 2.0, แขกสามารถทำ กระบวนการจองทั้งหมดได้โดยตรงบนเว็บไซต์ของที่พักของคุณโดยไม่ต้องถูกเปลี่ยนเส้นทางไปยังหน้าอื่น กระบวนการจองประกอบด้วย:

การค้นหาห้องว่าง
การเลือกห้อง
การแสดงอัตรา
โอกาสในการขายเพิ่มเติม
การกรอกข้อมูลแขก
การประมวลผลการชำระเงินที่ปลอดภัย

หมายเหตุ: ค่าที่แสดงเป็น {PARAMETER} ในบทความนี้เป็นเพียงตัวแทน เปลี่ยนเป็นค่าจริงของคุณและ ลบวงเล็บเหลี่ยม ({ }).

วิธีการติดตั้ง Immersive Experience 2.0

เพื่อเปิดใช้งาน Immersive Experience 2.0 บนเว็บไซต์ของที่พักของคุณ กรุณาทำตามขั้นตอนด้านล่าง

ขั้นตอนที่ 1 – ติดต่อการสนับสนุนของ Cloudbeds

ก่อนการติดตั้ง คุณต้อง ติดต่อการสนับสนุนของ Cloudbeds และขอเปิดใช้งานฟีเจอร์ Immersive Experience 2.0 ในบัญชีของคุณ

หากคุณเป็นลูกค้า Cloudbeds Websites คุณสามารถติดต่อ ทีม Cloudbeds Websites เพื่อขอคำแนะนำเกี่ยวกับการปรับใช้งานและคำขอการเปิดใช้งาน

ขั้นตอนที่ 2 – เพิ่มโดเมนในรายการที่อนุญาต

เมื่อทีมสนับสนุนของเราเปิดใช้งานการกำหนดค่าที่เหมาะสม คุณจะเห็นส่วน โดเมนที่อนุญาต ใน PMS ของคุณ

จาก เมนูบัญชี , เลือก การตั้งค่า
คลิก เครื่องมือการจอง
ไปที่ วิดเจ็ตเว็บไซต์ และในส่วน โดเมนที่อนุญาต ให้เพิ่มโดเมนที่คุณจะติดตั้ง Immersive Experience คุณสามารถเพิ่มได้สูงสุด 5 โดเมน

ทั้งโดเมนหลักและซับโดเมนได้รับการสนับสนุน (เช่น,my-hotel.com และ booking.my-hotel.com).

รายการโดเมนที่อนุญาต: วิธีตรวจสอบรูปแบบโดเมนที่ถูกต้อง

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

ตรวจสอบแถบ URL ของคุณ: เปิดเว็บไซต์ของคุณและดูที่ URL ในเบราว์เซอร์ของคุณ
มี www หรือไม่? ตัวอย่างเช่น แสดง https://www.yourdomain.com หรือเพียงแค่ https://yourdomain.com?

เมื่อคุณทราบว่ารูปแบบใดที่ไซต์ของคุณใช้ คุณสามารถป้อนโดเมนที่ถูกต้องลงในฟิลด์รายการที่อนุญาตของ Cloudbeds ได้ ตัวอย่างเช่น หากไซต์ของคุณแสดงด้วย www คุณควรเพิ่มโดเมนของคุณในรายการที่อนุญาตเป็น www.yourdomain.com.

ทำไมโดเมนต้องถูกเพิ่มในรายการที่อนุญาต

Immersive Experience เป็นส่วนประกอบเว็บ (ไม่ใช่ iframe) มันทำงานบนไซต์ของคุณและทำการร้องขอ API ไปยังบริการของ Cloudbeds จากโดเมนของคุณ การเพิ่มในรายการที่อนุญาตบอก Cloudbeds ว่า ต้นทาง ใดที่ได้รับอนุญาตเพื่อให้การร้องขอข้ามโดเมนเหล่านั้นได้รับการยอมรับ

ขั้นตอนที่ 3 – เพิ่มสคริปต์ Immersive Experience

แทรกสคริปต์ต่อไปนี้ภายในส่วน <head> ของ HTML ของเว็บไซต์ของคุณ:

<script src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js" type="text/javascript"></script>

หาก URL ของเครื่องมือการจองของคุณมี us2.hotels.cloudbeds ให้เพิ่มแอตทริบิวต์ island:

<script island="us2" src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js" type="text/javascript"></script>

หากคุณไม่เห็น “US2” ใน URL ของเครื่องมือการจองของคุณ แอตทริบิวต์ island ไม่จำเป็นต้องระบุ

ขั้นตอนที่ 4 – ฝังเครื่องมือการจอง

คุณสามารถแสดงประสบการณ์ที่ดื่มด่ำได้สองวิธี:

โหมดมาตรฐาน (ฝังเต็มหน้า): เรียกอีกอย่างว่า “ฝังเต็มหน้า” ซึ่งเป็นโหมดค่าเริ่มต้นที่เครื่องมือการจองแอปถูกบูรณาการอย่างเต็มที่ในเว็บไซต์เจ้าของสถานที่ เพื่อฝังมัน ให้รวมโค้ดต่อไปนี้ใน HTML ที่ควรแสดง:

<cb-immersive-experience mode="standard" property-code="{PROPERTY_CODE}" />

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

<cb-book-now-button property-code="{PROPERTY_CODE}" />

หากคุณละเว้นคุณสมบัติ modestandard.

ค้นหา รหัสที่พัก ของคุณ

ไปที่ เมนูบัญชี > การตั้งค่า > เครื่องมือการจอง > แท็บสรุป รหัสของคุณคือค่าตัวอักษรและตัวเลข 6 ตัวที่อยู่ท้ายลิงก์เครื่องมือการจองของคุณ:

https://hotels.cloudbeds.com/reservation/{PROPERTY_CODE}

ในตัวอย่างด้านล่าง ส่วนที่เน้นคือรหัสที่พักที่คุณควรใช้ในโค้ดฝังของคุณ (แทนที่วงเล็บและค่าในโค้ดของคุณ).

การติดตั้งและพฤติกรรม

ส่วนต่าง ๆ ด้านล่างนี้เน้นพฤติกรรมและรายละเอียดการปรับใช้งานที่เป็นประโยชน์ต่อการทราบก่อนที่จะเปิดใช้งานจริง

ความเข้ากันได้กับผู้สร้างเว็บไซต์

ประสบการณ์ที่ดื่มด่ำได้ถูก ทดสอบกับเว็บไซต์ที่สร้างขึ้นเอง ผู้สร้างเว็บไซต์แบบเทมเพลต/ไม่มีโค้ดอาจจัดการกับสคริปต์ที่กำหนดเองแตกต่างกัน ซึ่งอาจส่งผลต่อฟังก์ชันการทำงาน

✔️ การแทรกหัว: ยืนยันว่าคุณสามารถเพิ่มประสบการณ์ที่ดื่มด่ำ <script> ในหน้า <head>.

✔️ การอนุญาต: ตรวจสอบให้แน่ใจว่าโดเมนที่ใช้งานจริง (และโดเมนการทดสอบ/ดูตัวอย่าง) ของคุณถูกเพิ่มอยู่ภายใต้ โดเมนที่อนุญาต เพื่อให้คำขอ API ถูกยอมรับ (สูงสุด 5 โดเมน).

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

✔️ หน้าชำระเงิน: คาดว่าหน้าช่องทางการชำระเงินจะเปิดเป็นป๊อบอัปหรือโมดอลตามที่ตั้งไว้สำหรับที่พักของคุณ; ตรวจสอบให้แน่ใจว่ามันแสดงผลตามที่คาดไว้.

✔️ ลิงก์ลึก/พารามิเตอร์: พารามิเตอร์การค้นหาจะถูกอ่านเฉพาะในระหว่างการโหลดครั้งแรก หากคุณเปลี่ยน URL หลังจากที่แอปโหลดแล้ว ให้โหลดหน้าใหม่เพื่อใช้พารามิเตอร์เหล่านั้น.

หน้าชำระเงิน

หน้าชำระเงินจะแสดงในหนึ่งในสองวิธี Cloudbeds ตั้งค่าตัวเลือกสำหรับที่พักของคุณ ตามช่องทางการชำระเงินและความต้องการด้านความปลอดภัย (เช่น 3D Secure).

ป๊อบอัป: เปิดในหน้าต่างเบราว์เซอร์ใหม่และแสดง URL ของหน้า บางช่องทางต้องการสิ่งนี้สำหรับการตรวจสอบ 3D Secure.
โมดอล: แสดงเป็นกล่องสนทนาบนหน้าโดยไม่แสดง URL เพื่อประสบการณ์ที่มีแบรนด์ขาวมากขึ้น.

เมื่อช่องทางการชำระเงินต้องการโหมด ป๊อบอัป เพื่อความสอดคล้อง URL จะต้องมองเห็นได้และไม่สามารถทำให้เป็นแบรนด์ขาวได้ทั้งหมด.

พอร์ทัล

เครื่องมือการจองแสดงหลายองค์ประกอบในตำแหน่งที่คงที่บนหน้าจอ เช่น:

โมดอล
เคล็ดลับเครื่องมือ
ปฏิทิน
ตัวตรวจสอบอัตรา
แบนเนอร์รถเข็นช็อปปิ้ง (บนมือถือ)
ตัวเลือกภาษาและสกุลเงิน

องค์ประกอบเหล่านี้ถูกแสดงภายใน พอร์ทัล ซึ่งหมายความว่าแทนที่จะปฏิบัติตามโครงสร้างของต้นไม้ DOM พวกมันจะถูกห่อหุ้มโดยองค์ประกอบที่มี .cb-portal คลาสสถิตและถูกเพิ่มที่ส่วนท้ายของ body พอร์ทัลมีค่า z-index ที่แตกต่างกันตามชั้นที่เกี่ยวข้องใน บริบทการจัดเรียง.

เว็บไซต์ส่วนใหญ่มีบริบทการจัดเรียงของตนเอง และขึ้นอยู่กับวิธีที่พวกเขาถูกกำหนดบนแกน z ที่จินตนาการ พวกเขาอาจจะขัดแย้งหรือไม่ขัดแย้งกับบริบทการจัดเรียงของประสบการณ์ที่ดื่มด่ำ.

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

ในขณะนี้เรามีพอร์ทัล 4 ประเภท: โมดอล, ป๊อปโอเวอร์, ติด, และ เคล็ดลับเครื่องมือ. ประเภทของพอร์ทัลที่ใช้ในแต่ละกรณีขึ้นอยู่กับประเภทขององค์ประกอบที่พอร์ทัลนั้นใช้ ดังนั้น โมดอลทั้งหมดจะใช้พอร์ทัล โมดอล, ป๊อปโอเวอร์ปฏิทินและตัวเลือกภาษาและสกุลเงินจะใช้พอร์ทัล ป๊อปโอเวอร์, ขณะที่แบนเนอร์รถเข็นช็อปปิ้งบนมือถือและตัวตรวจสอบอัตราจะใช้พอร์ทัล ติด เพื่อเป็นตัวอย่าง.

ขึ้นอยู่กับประเภทของพอร์ทัล นี่คือค่าที่ประสบการณ์ที่ดื่มด่ำใช้สำหรับคุณสมบัติ CSS z-index:

โมดอล: 1400
ป๊อปโอเวอร์: 1500
ติด: 1100
เคล็ดลับเครื่องมือ: 1800

การแก้ไขปัญหาการทับซ้อน

เมื่อเผชิญกับปัญหากับองค์ประกอบที่แสดงโดยประสบการณ์ที่ดื่มด่ำที่ทับซ้อนกับองค์ประกอบอื่นจากเว็บไซต์หลัก เราขอแนะนำให้ค้นหาพอร์ทัล (องค์ประกอบที่มี .cb-portal คลาสสถิต) ที่มีอยู่และปรับค่า z-index ตามนั้น หรือปรับค่า z-index ขององค์ประกอบจากเว็บไซต์หลัก.

ค่า z-index สำหรับประเภทต่างๆ ของพอร์ทัลที่แสดงโดยประสบการณ์ที่ดื่มด่ำจะสามารถปรับแต่งได้โดยการกำหนดตัวแปร CSS ใหม่ที่ใช้สำหรับวัตถุประสงค์นี้ ตามที่แสดงในตัวอย่างด้านล่าง:

<style>
/* ขอบเขตไปยังรากของเครื่องมือการจองเมื่อทำการเขียนทับ */
.cb-bookingengine-root {
  --booking-engine-zIndices-sticky: 1100;
  --booking-engine-zIndices-modal: 1400;
  --booking-engine-zIndices-popover: 1500;
  --booking-engine-zIndices-tooltip: 1800;
}
</style>

พารามิเตอร์การค้นหา

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

ชื่อ	ประเภท	คำอธิบาย	ตัวอย่าง
ผู้ใหญ่	จำนวน	จำนวนผู้ใหญ่สำหรับการจอง ใช้เมื่อค้นหาที่พักที่มีอยู่	ผู้ใหญ่=2
รหัสการจัดสรรห้องพัก	สตริง	รหัสการจัดสรรห้องพักที่ใช้เมื่อดึงที่พักสำหรับวันที่ที่เลือก	รหัสการจัดสรรห้องพัก=b123456
เช็กอิน	YYYY-MM-DD	วันที่ที่เลือกสำหรับเช็กอิน	เช็กอิน=2025-12-01
เช็กเอาต์	YYYY-MM-DD	วันที่ที่เลือกสำหรับเช็กเอาต์ หาก เช็กอิน ถูกระบุแต่ เช็กเอาต์ ไม่ถูกระบุ จะใช้ค่าเริ่มต้นเป็นวันถัดไป	เช็กเอาต์=2025-12-01
สกุลเงิน	รหัสสกุลเงิน ISO-4217 3 ตัวอักษร	สกุลเงินที่เลือก หากไม่มีการระบุ เครื่องมือการจองจะใช้ค่าเริ่มต้นของที่พัก	สกุลเงิน=brl
เด็ก	จำนวน	จำนวนเด็กสำหรับการจอง ใช้เมื่อค้นหาที่พักที่มีอยู่	เด็ก=1
รหัสโปรโมชั่น	สตริง	รหัสโปรโมชั่นที่ใช้เมื่อดึงที่พักสำหรับวันที่ที่เลือก	รหัสโปรโมชั่น=superpromo
แผนราคา	สตริงที่แยกด้วยเครื่องหมายเซมิโคลอน	เพื่อกรองผลลัพธ์ที่พักตามแผนราคา ซึ่งตรงกับ “ชื่อแผนราคาเอกชน” บน PMS	แผนราคา=3DAYSTAY;LOWSEASON
rid	สตริงตัวเลขที่แยกด้วยเครื่องหมายเซมิโคลอน	รายการ ID ห้องเพื่อกรองผลลัพธ์ที่พัก	rid=27434;23421
ประเภทห้อง	สตริง 3 ตัวอักษรที่แยกด้วยเครื่องหมายเซมิโคลอน	ตรงกับ “ตัวย่อที่พัก” ใน PMS และใช้กรองผลลัพธ์ที่พัก หากไม่มีการระบุ เช็กอินและเช็กเอาต์ เครื่องมือการจองจะเลือกวันพรุ่งนี้และวันถัดไปโดยอัตโนมัติ	ประเภทห้อง=PRI;SHA
utm_source	สตริง	ใช้เพื่อทราบแหล่งที่มาของแคมเปญการตลาด (เช่น: Google, TripAdvisor, Trivago)	utm_source=Google

การติดตาม & การวิเคราะห์

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

นอกจากนี้ ประสบการณ์ที่ดื่มด่ำจะไม่อัปเดต URL ของหน้าต่างเหมือนกับเวอร์ชันที่โฮสต์หลังจากการกระทำของผู้ใช้งานบางอย่าง (เช่น การเลือกวันที่เช็กอินและวันที่เช็กเอาต์)

Google Analytics 4 / GTM: Google Tag ID หรือ GTM Container ID ต้องถูกเริ่มต้นบนเว็บไซต์ของโรงแรม
Google Ads: การติดตามการแปลงต้องการการติดตั้งด้วยตนเองบนเว็บไซต์ของที่พัก
Meta Pixel: สคริปต์ Meta Pixel ต้องถูกเพิ่มใน HTML <head> เพื่อการเริ่มต้น

สำหรับรายละเอียดการกำหนดค่าเพิ่มเติม โปรดดูเอกสารของแต่ละแพลตฟอร์มการติดตาม

เพิ่มสคริปต์ Google Tag Manager (GTM) หรือ Google Analytics 4 (GA4) ด้วยตนเองไปยัง <head> ของ HTML ของคุณเพื่อเปิดใช้งานการติดตาม

พารามิเตอร์การค้นหา Google Hotel Ads

พารามิเตอร์เหล่านี้ถูกเพิ่มโดย Google Hotel Ads และเครื่องมือการจองจะส่งไปยังเซิร์ฟเวอร์ในคำขอเมื่อทำการจอง:

พารามิเตอร์

gha_advance_booking_window

gha_campaign_id

gha_google_site

gha_is_ad_click

gha_is_click_type_hotel

gha_is_click_type_room

gha_is_hotel_campaign

gha_is_promoted

gha_length

gha_payment_id

gha_price_displayed_total

gha_promo_code

gha_user_country

gha_user_currency

gha_user_device

gha_user_language

gha_user_list_id

การปรับแต่ง: คุณลักษณะ, พารามิเตอร์ URL, และการจัดรูปแบบ

ปรับแต่งประสบการณ์ที่ดื่มด่ำโดยใช้คุณลักษณะของส่วนประกอบ รวมถึง CSS/JS ของคุณเองบนเว็บไซต์ของคุณ

รหัสที่กำหนดเองอาจต้องการการบำรุงรักษาเมื่อเวลาผ่านไป

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

คุณสมบัติของส่วนประกอบสำหรับ cb-immersive-experience & cb-จอง-ตอนนี้-ปุ่ม

คุณสมบัติเหล่านี้ใช้ร่วมกันระหว่างโหมด มาตรฐาน และ ป๊อบอัป (ดู ฝังเครื่องมือการจอง).

คุณสมบัติต่อไปนี้ทั้งหมดเป็นไม่บังคับ (ยกเว้น property-code) และทั้ง cb-immersive-experience และ cb-book-now-button ส่วนประกอบเว็บสนับสนุนพวกเขา.

ชื่อ	ประเภท	จำเป็น	ค่าเริ่มต้น	คำอธิบาย
*สกุลเงิน ()**	รหัสสกุลเงิน ISO-4217 3 ตัวอักษร	ไม่	สกุลเงินเริ่มต้นของที่พัก	สกุลเงินที่จะใช้สำหรับการโหลดเริ่มต้นของ Immersive Experience
disable-css-title-reset	ใช่ \| ไม่	ไม่	ไม่	ใช่ ควรใช้หากที่พักต้องการกำหนดกฎ CSS ของตนเองสำหรับหัวเรื่องใน UI (h1… h6)
hide-custom-header	ใช่ \| ไม่	ไม่	ไม่	เพื่อซ่อนส่วนหัวที่กำหนดเองที่ตั้งไว้ใน PMS
hide-custom-footer	ใช่ \| ไม่	ไม่	ไม่	เพื่อซ่อนส่วนท้ายที่กำหนดเองที่ตั้งไว้ใน PMS
hide-property-info	ใช่ \| ไม่	ไม่	ไม่	เพื่อซ่อนส่วนข้อมูลที่พักในทุกหน้า
*ignore-search-params ()**	ใช่ \| ไม่	ไม่	ไม่	Immersive Experience โดยค่าเริ่มต้นจะอ่านพารามิเตอร์การค้นหาใน URL ของเว็บไซต์เจ้าของและใช้พวกเขาในการโหลดเริ่มต้นของแอปพลิเคชัน มันรองรับพารามิเตอร์เดียวกันที่เครื่องมือการจองที่โฮสต์ทำ
*lang ()**	ตรวจจับอัตโนมัติ \| รหัสภาษา ISO 639-1 2 ตัวอักษร	ไม่	ภาษาที่พักเริ่มต้น	ภาษาที่จะใช้ในการโหลดเริ่มต้นของ Immersive Experience หากไม่มีการกำหนดไว้ Immersive Experience จะตรวจสอบแอตทริบิวต์ lang ของ HTML หากยังไม่ได้กำหนดอีก สุดท้ายจะใช้ภาษาที่พักเริ่มต้น หากมีการกำหนดค่าให้ตรวจจับอัตโนมัติ Immersive Experience จะถูกโหลดในภาษาของเบราว์เซอร์ของผู้ใช้งาน
mode	มาตรฐาน \| ป๊อบอัป	ไม่	มาตรฐาน	โหมดที่ Immersive Experience ควรจะถูกเรนเดอร์ ป๊อบอัปควรใช้เมื่อ Immersive Experience ถูกเรนเดอร์ภายในคอนเทนเนอร์ที่มีความสูงคงที่หรือความสูงสูงสุด
*property-code ()**	รหัสอัลฟา-นัมเบอร์ 6 หลักที่ระบุที่พักของคุณ	ใช่	—	รหัสอัลฟา-นัมเบอร์ 6 หลักที่แทนที่พัก มันคือรหัสเดียวกันกับ URL ของเครื่องมือการจอง: https://hotels.cloudbeds.com/reservation/{PROPERTY_CODE}.

คุณสมบัติที่ทำเครื่องหมายสำหรับการโหลดเริ่มต้นจะถูกอ่านเพียงครั้งเดียวเมื่อแอปเริ่มต้น การเปลี่ยนแปลงในภายหลังในที่พักของคุณจะไม่ส่งผลกระทบต่อ Immersive Experience ที่โหลดแล้ว

คุณสมบัติที่กำหนดเองของปุ่มจองตอนนี้

ตัวเลือกเหล่านี้ใช้กับ cb-book-now-button คอมโพเนนต์ (ดูที่ ฝังเครื่องมือการจอง ส่วน) และช่วยให้คุณสามารถปรับแต่งปุ่มและควบคุมฉลากและขนาดของป๊อบอัปได้

คุณสมบัติ	คำอธิบาย
class-name	คลาส CSS สำหรับการปรับแต่งปุ่ม
close-label	ฉลากที่กำหนดเองสำหรับปุ่มปิด
height	ความสูงของป๊อบอัป
width	ความกว้างของป๊อบอัป

ตัวอย่างของปุ่มจองตอนนี้พร้อมฉลาก ขนาด และคลาส CSS:

<cb-book-now-button
  property-code="{PROPERTY_CODE}"
  class-name="cb-book-now-button"
  label="จองตอนนี้"
  height="90vh"
  width="90vw"
/>

เพิ่ม CSS & JavaScript ที่กำหนดเองสำหรับประสบการณ์ที่ดื่มด่ำ

CSS หรือ JavaScript ที่กำหนดเองที่เพิ่มในช่องปรับแต่งของเครื่องมือการจองจะไม่ถูกนำไปใช้กับประสบการณ์ที่ดื่มด่ำโดยอัตโนมัติ ต้องเพิ่มด้วยตนเองในเอกสาร HTML

เพิ่มคุณสมบัติ data-cb-immersive-experience-root ไปยังแท็กสไตล์และสคริปต์เพื่อหลีกเลี่ยงความขัดแย้ง

ตัวอย่างของ CSS ที่กำหนดเอง:

<style data-cb-immersive-experience-root>
  :is(#cb-bookingengine, .cb-bookingengine-root) {
    h1 {
      font-family: serif;
      font-size: 24px;
    }
  }
</style>