ภาพรวม
Cloudbeds Booking Engine ประสบการณ์ที่ดื่มด่ำ 2.0 เป็นโซลูชันการจองที่ทันสมัยและเป็นระบบการจองที่ใช้เว็บอย่างเต็มรูปแบบ ที่มอบประสบการณ์การจองที่ราบรื่นและเป็นมิตรกับแขกโดยตรงบนเว็บไซต์ของที่พักของคุณ มันช่วยอำนวยความสะดวกในการชำระเงินที่ปลอดภัยและเป็นไปตามมาตรฐาน PCI และรวมข้อมูลการติดตามความเข้ากันได้ของ Google เพื่อให้ได้ข้อมูลเชิงลึกตั้งแต่การดูหน้าไปจนถึงการซื้อ
ในฐานะที่เป็นส่วนประกอบที่ใช้เว็บ ประสบการณ์ที่ดื่มด่ำ 2.0 ได้ขจัดความจำเป็นในการอนุญาตหรือกระบวนการซับซ้อนในการปกปิด แทนที่จะเป็นเช่นนั้น มันทำให้การรวมเข้าด้วยกันง่ายขึ้น ผ่านการฝังที่ตรงไปตรงมาซึ่งรวมเข้ากับเว็บไซต์ของที่พักของคุณได้อย่างราบรื่น—รักษาความสอดคล้องของการออกแบบและความสะดวกในการปรับใช้งาน
ประสบการณ์การจองที่ได้รับการปรับปรุง
ประสบการณ์ที่ดื่มด่ำ 2.0 นำเสนอฟีเจอร์เอกลักษณ์เฉพาะ ที่ออกแบบมาเพื่อยกระดับประสบการณ์การจองของแขกของคุณบนเว็บไซต์ของคุณเอง:
- อัตราการแปลงที่สูงขึ้น: คลิกน้อยลง เวลาโหลดเร็วขึ้น และประสบการณ์แบรนด์ที่สอดคล้องกันทำให้มีการจองมากขึ้น
- การปรับแต่งมากขึ้น: สร้างประสบการณ์ของแขกที่เอกลักษณ์เฉพาะและน่าจดจำโดยไม่มีข้อจำกัดของ iframe มาตรฐาน
- การเติบโตที่ขับเคลื่อนด้วยข้อมูล: เข้าถึงเมตริกและข้อมูลเชิงลึกที่สำคัญเพื่อเพิ่มประสิทธิภาพกระบวนการจองของคุณและเพิ่มการจองโดยตรง
- ความเชื่อมั่นที่เพิ่มขึ้น: กระบวนการจองที่ปลอดภัยและราบรื่นสร้างความมั่นใจให้กับแขก ส่งเสริมให้พวกเขาเสร็จสิ้นกระบวนการจอง
ส่วนประกอบที่ใช้เว็บ vs. ส่วนประกอบที่ใช้ iframe
ในทางตรงกันข้ามกับระบบที่ใช้ iframe ส่วนประกอบที่ใช้เว็บแบบรวม นี้มี:
- เวลาโหลด เว็บไซต์ที่เร็วขึ้น
- การปรับแต่งแบรนด์ที่ดีขึ้น
- กระบวนการจองที่เป็นเอกภาพ ที่ทำให้แขกอยู่ในเว็บไซต์ตั้งแต่การค้นหาเริ่มต้นจนถึงการชำระเงินเสร็จสิ้น
มันดูเป็นอย่างไร
ประสบการณ์ที่ดื่มด่ำ 2.0 มีตัวเลือกการฝังที่ยืดหยุ่นสองแบบ เพื่อให้เหมาะกับการออกแบบเว็บไซต์และการไหลของผู้ใช้งานของที่พักของคุณ คุณสามารถเลือกที่จะฝังประสบการณ์ที่ดื่มด่ำแบบเต็มหน้า หรือสร้างและฝังประสบการณ์ที่ดื่มด่ำแบบป๊อปอัพ
- การฝังแบบเต็มหน้า ทำงานตามที่มันฟัง — มันวางเครื่องมือการจองทั้งหมดโดยตรงภายในหน้าในเว็บไซต์ของคุณ มอบประสบการณ์การจองที่ไม่หยุดยั้งและดื่มด่ำอย่างเต็มที่ตั้งแต่ต้นจนจบ
- ตัวเลือกการฝังแบบป๊อปอัพ ให้ทางเลือกที่ทันสมัยและเรียบง่าย เมื่อแขกคลิกที่ปุ่ม “จองตอนนี้” แผงด้านข้าง จะเลื่อนเข้ามาจากขอบของหน้าจอ เสนอประสบการณ์การจองที่กระชับแต่ทำงานได้อย่างเต็มที่โดยไม่ต้องออกจากหน้าปัจจุบัน
กระบวนการจองรวมถึง:
- ค้นหาห้องว่าง
- การเลือกห้อง
- การแสดงอัตรา
- โอกาสในการอัปเซล
- การกรอกข้อมูลของแขก
- การประมวลผลการชำระเงินที่ปลอดภัย
หมายเหตุ: ค่าที่แสดงเป็น {PARAMETER} ในบทความนี้เป็นเพียงตัวแทน แทนที่ด้วยค่าจริงของคุณและลบวงเล็บเหลี่ยม ({ })
วิธีการติดตั้ง ประสบการณ์ที่ดื่มด่ำ 2.0
เพื่อเปิดใช้งานประสบการณ์ที่ดื่มด่ำ 2.0 บนเว็บไซต์ของที่พักของคุณ กรุณาทำตามขั้นตอนด้านล่าง
ขั้นตอนที่ 1 – ติดต่อการสนับสนุนของ Cloudbeds
ก่อนการติดตั้ง คุณต้อง ติดต่อการสนับสนุนของ Cloudbeds และขอเปิดใช้งานฟีเจอร์ Immersive Experience 2.0 บนบัญชีของคุณ
- หากคุณเป็นลูกค้า Cloudbeds Websites คุณสามารถติดต่อ ทีม Cloudbeds Websites เพื่อขอคำแนะนำเกี่ยวกับการปรับใช้งานและคำขอการเปิดใช้งาน
ขั้นตอนที่ 2 – เพิ่มโดเมนของคุณในรายการที่อนุญาต
เมื่อทีมสนับสนุนของเราเปิดใช้งานการกำหนดค่าที่เหมาะสม คุณจะเห็นส่วน โดเมนที่อนุญาต ใน PMS ของคุณ
- จาก เมนูบัญชี
, เลือก การตั้งค่า
- คลิก เครื่องมือการจอง
- ไปที่ วิดเจ็ตเว็บไซต์ และในส่วน โดเมนที่อนุญาต ให้เพิ่มโดเมนที่คุณจะติดตั้ง Immersive Experience คุณสามารถเพิ่มได้สูงสุด 5 โดเมน
ทั้งโดเมนหลักและซับโดเมนได้รับการสนับสนุน (e.g.,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}" />หากคุณละเว้นแอตทริบิวต์ mode คอมโพเนนต์จะตั้งค่าเป็น standard โดยค่าเริ่มต้น.
ค้นหา รหัสที่พัก ของคุณ
ไปที่ เมนูบัญชี > การตั้งค่า > เครื่องมือการจอง > แท็บสรุป รหัสของคุณคือค่าตัวอักษรและตัวเลข 6 ตัวที่อยู่ท้ายลิงก์เครื่องมือการจองของคุณ:
https://hotels.cloudbeds.com/reservation/{PROPERTY_CODE}
ในตัวอย่างด้านล่าง ส่วนที่เน้นคือรหัสที่พักที่คุณควรใช้ในโค้ดฝังของคุณ (แทนที่วงเล็บและค่าในโค้ดของคุณ).
การติดตั้งและพฤติกรรม
ส่วนต่าง ๆ ด้านล่างนี้เน้นพฤติกรรมและรายละเอียดการปรับใช้งานที่เป็นประโยชน์ในการทราบก่อนที่จะเปิดใช้งานจริง
ความเข้ากันได้กับผู้สร้างเว็บไซต์
ประสบการณ์ที่ดื่มด่ำได้มีการทดสอบกับเว็บไซต์ที่สร้างขึ้นเอง ผู้สร้างเว็บไซต์ที่ใช้เทมเพลต/ไม่ต้องเขียนโค้ดอาจจัดการกับสคริปต์ที่กำหนดเองแตกต่างกัน ซึ่งอาจส่งผลต่อฟังก์ชันการทำงาน
✔️ การแทรกหัว: ยืนยันว่าคุณสามารถเพิ่มประสบการณ์ที่ดื่มด่ำ <script> ในหน้า <head>.
✔️ การอนุญาต: ตรวจสอบให้แน่ใจว่าโดเมนที่ใช้งาน (และโดเมนการทดสอบ/ดูตัวอย่าง) ของคุณถูกเพิ่มอยู่ภายใต้ โดเมนที่อนุญาต เพื่อให้คำขอ API ถูกยอมรับ (สูงสุด 5 โดเมน)
✔️ CSS/JS ที่กำหนดเอง: สไตล์หรือสคริปต์ที่เพิ่มในส่วนการปรับแต่งเครื่องมือการจองจะ ไม่ ถูกนำไปใช้โดยอัตโนมัติกับประสบการณ์ที่ดื่มด่ำ; ให้เพิ่มลงใน HTML ของเว็บไซต์ของคุณแทน
✔️ หน้าชำระเงิน: ขั้นตอนการชำระเงินอาจแตกต่างกันไปขึ้นอยู่กับ วิธีการชำระเงินที่เลือก.
⮕ หากแขกเลือก Apple Pay, Google Pay หรือวิธีการชำระเงินของบุคคลที่สามอื่น ๆ พวกเขาจะถูก เปลี่ยนเส้นทางไปยังหน้าของบุคคลที่สามที่เกี่ยวข้อง เพื่อทำการชำระเงิน
⮕ เมื่อการทำธุรกรรมสำเร็จ พวกเขาจะถูก เปลี่ยนเส้นทางกลับ ไปยังหน้ายืนยันประสบการณ์ที่ดื่มด่ำ
✔️ ลิงก์ลึก/พารามิเตอร์: พารามิเตอร์การค้นหาอ่านได้เฉพาะในระหว่างการโหลดครั้งแรก หากคุณเปลี่ยน 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>
ข้อคิดเห็น
โปรด ลงชื่อเข้าใช้ เพื่อแสดงข้อคิดเห็น