ตั้งค่าและปรับแต่ง Cloudbeds Booking Engine Immersive Experience 2.0

บทนำ

Cloudbeds Booking Engine Immersive Experience 2.0 ฝังกระบวนการจองโดยตรงบนเว็บไซต์ของที่พักของคุณโดยไม่ใช้การซ่อนผ่าน iframe เว็บไซต์ของคุณต้องได้รับอนุญาตผ่านโดเมนที่อยู่ในไวต์ลิสต์ และต้องติดตั้งสคริปต์โหลดเดอร์ที่รองรับใน HTML ของเว็บไซต์ก่อนที่คอมโพเนนต์เว็บจะสามารถแสดงผลได้

ใช้คู่มือนี้สำหรับการติดตั้งและพิจารณาทางเทคนิคที่อาจส่งผลต่อกระบวนการจอง รวมถึงแพลตฟอร์มการจัดการความยินยอม (Consent Management Platforms - CMPs), ตัวสร้างเว็บไซต์, การติดตาม, พารามิเตอร์การค้นหา และการปรับแต่งสไตล์ สำหรับภาพรวมทั่วไปของเครื่องมือการจอง ดูได้ที่ Cloudbeds Booking Engine: ทุกเรื่องที่ต้องรู้.

สารบัญ

• เกี่ยวกับ Immersive Experience 2.0
• ติดตั้ง Immersive Experience 2.0
• การยินยอมคุกกี้และการตั้งค่า CMP
• ข้อควรพิจารณาในการตั้งค่าและการแก้ไขปัญหา
• พารามิเตอร์การค้นหาและการติดตาม
• ปรับแต่ง Immersive Experience 2.0

เกี่ยวกับ Immersive Experience 2.0

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

ประโยชน์หลัก

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

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

ส่วนประกอบบนเว็บเทียบกับ iframe

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

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

รูปลักษณ์

Immersive Experience 2.0 มีตัวเลือกการฝังที่ยืดหยุ่นสองแบบ เพื่อให้เหมาะกับการออกแบบเว็บไซต์และกระบวนการใช้งานของที่พัก คุณสามารถเลือกฝัง ประสบการณ์เต็มหน้า หรือสร้างและฝัง ป๊อปอัพ Immersive Experience ได้

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

การฝังแบบเต็มหน้าจะทำให้ผู้เข้าพักอยู่บนเว็บไซต์ของที่พักขณะค้นหาที่พักที่มี, ตรวจสอบอัตรา และสร้างการจองของพวกเขา

ในระหว่างการเช็กเอาต์ ผู้เข้าพักจะกรอกรายละเอียดติดต่อ ข้อมูลเพิ่มเติมที่ไม่บังคับ ผู้เข้าพักเพิ่มเติม และการตั้งค่าการสื่อสารโดยไม่ต้องออกจากกระบวนการจองที่ฝังอยู่

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

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

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

กระบวนการจองประกอบด้วย:

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

การกำหนดราคาและสถานะห้องว่าง

การเข้าถึง Immersive Experience 2.0 ขึ้นอยู่กับการสมัครสมาชิก Cloudbeds ของคุณ หากแพ็กเกจของคุณรวม พรีเมียมเอ็มเบด คุณสามารถเข้าถึง Immersive Experience 2.0 ได้จากส่วน พรีเมียม ใน แท็บฝัง

หากแพ็กเกจของคุณไม่มีพรีเมียมเอ็มเบด ส่วนพรีเมียมอาจแสดงตัวเลือก ติดต่อฝ่ายขาย คลิกที่ ติดต่อฝ่ายขาย เพื่อขอข้อมูลเพิ่มเติมเกี่ยวกับการอัปเกรดเป็นแพ็กเกจที่รวมพรีเมียมเอ็มเบด

วิธีการชำระเงินแบบกำหนดเองและการรองรับเกตเวย์

• คำแนะนำเกี่ยวกับการรองรับเกตเวย์: เรา ไม่แนะนำ ให้ใช้เกตเวย์การชำระเงินที่ไม่ได้รับการรองรับใน Immersive Experience เมื่อเกตเวย์เหล่านี้ไม่ได้อยู่ในโดเมนของ Cloudbeds แล้ว เราจะไม่สามารถควบคุมความปลอดภัยหรือการปฏิบัติตามมาตรฐาน PCI ได้
• ข้อจำกัดในปัจจุบัน: วิธีการชำระเงินแบบกำหนดเอง ควรใช้เฉพาะในสภาพแวดล้อมที่โฮสต์เท่านั้นในขณะนี้
• การรองรับในอนาคต: ทีม Cloudbeds Payments กำลังพัฒนาการรองรับอย่างเป็นทางการสำหรับเกตเวย์เหล่านี้ผ่านการเชื่อมต่อแบบกำหนดเองภายในอินเตอร์เฟสของ PMS ฟีเจอร์นี้มีกำหนดเปิดตัวในปี 2569 ลูกค้าจะได้รับรายละเอียดเพิ่มเติมเกี่ยวกับช่วงเวลาที่แน่นอนเมื่อใกล้ถึงวันส่งมอบ
• ช่องทางการสนับสนุน: สำหรับคำแนะนำเฉพาะด้านการปรับใช้งานหรือคำถามเกี่ยวกับวิธีการชำระเงินแบบกำหนดเอง กรุณาติดต่อ ทีม Cloudbeds Payments โดยตรง ทีมนี้ดูแล SDK การชำระเงินทั้งหมดและเป็นผู้ที่เหมาะสมที่สุดในการช่วยเหลือคุณ

ติดตั้ง Immersive Experience 2.0

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

ขั้นตอนที่ 1: ยืนยันการเข้าถึง Premium Embeds

ขั้นตอนที่ 2: เพิ่มโดเมนของคุณในโดเมนที่อนุญาต

เพิ่มโดเมนที่จะติดตั้ง Immersive Experience 2.0 ในส่วน โดเมนที่อนุญาต ของพรีเมียมเอ็มเบดที่เลือก คุณสามารถเพิ่มโดเมนได้สูงสุด 5 โดเมนค่ะ

1. จาก เมนูบัญชี ของคุณ , เลือก การตั้งค่า
2. คลิกที่ เครื่องมือการจอง
3. คลิกแท็บ ฝัง
4. ในส่วน พรีเมียม เลือกตัวเลือก Immersive Experience ที่คุณต้องการติดตั้ง
5. ในบัตร โดเมนที่อนุญาต คลิก เพิ่มโดเมน
6. กรอกโดเมนที่จะติดตั้ง Immersive Experience แล้วบันทึกการเปลี่ยนแปลงของคุณค่ะ

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

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

<script
  data-entry="immersive"
  src="https://static1.cloudbeds.com/booking-engine/latest/loader.js"
  nonce="+imGC13HmyB6zTZ1eTnZMw=="
  integrity="sha384-hd98w88pqnDT+lRLwyII/mRmbacols+VWYZF3HKdxnIlTYO+cF38GA1/I/+V8U4a"
  crossorigin="anonymous"
  type="text/plain"
  data-categories="essential"
></script>

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

คุณสามารถแสดง Immersive Experience ได้สองวิธี:

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

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

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

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

การยินยอมคุกกี้และการตั้งค่า CMP

หากเว็บไซต์ของคุณใช้แพลตฟอร์มจัดการความยินยอม (Consent Management Platform - CMP) ให้กำหนดค่า Immersive Experience เพื่อให้ทรัพยากรของ Cloudbeds ที่จำเป็นถูกจัดเป็นทรัพยากรสำคัญและไม่ถูกบล็อกก่อนที่กระบวนการจองจะโหลดเสร็จ ทำตามการตั้งค่าที่เฉพาะเจาะจงสำหรับผู้ให้บริการด้านล่างก่อนเผยแพร่การเปลี่ยนแปลงเว็บไซต์

ใช้การตั้งค่าที่เฉพาะเจาะจงสำหรับผู้ให้บริการ CMP ของคุณ:

• Cookiebot: data-cookieconsent="ignore"
• OneTrust: data-ignore-consent="true"
• Quantcast: data-quantcast-ignore="true"
• Termly: เพิ่มแม็ปบล็อกแบบกำหนดเองด้านล่างก่อนสคริปต์ Termly โดยแนะนำให้อยู่ใกล้จุดเริ่มต้นของ HTML

<script data-termly-config>
 window.TERMLY_CUSTOM_BLOCKING_MAP = {
  "cloudbeds.com": "essential",
  "clientstream.launchdarkly.com": "essential",
  "clientsdk.launchdarkly.com": "essential",
  "tile.openstreetmap.org": "essential",
  "tokenex.com": "essential",
  "stripe.com": "essential",
  "stripe.network": "essential",
  "braintreegateway.com": "essential",
  "dlocal.com": "essential",
  "authorize.net": "essential",
  "pagosonline.net": "essential",
  "paypal.com": "essential",
  "adyen.com": "essential"
 };
</script>

จัดประเภทตัวโหลด Immersive Experience ว่าจำเป็นหรือสำคัญในค่ากำหนด CMP ของคุณ ใช้จุดเริ่มต้นตัวโหลดปัจจุบันด้านล่าง การใช้งานโดยตรงของ cb-immersive-experience.js ถือว่าเลิกใช้แล้ว

<script
  data-entry="immersive"
  src="https://static1.cloudbeds.com/booking-engine/latest/loader.js"
  nonce="+imGC13HmyB6zTZ1eTnZMw=="
  integrity="sha384-hd98w88pqnDT+lRLwyII/mRmbacols+VWYZF3HKdxnIlTYO+cF38GA1/I/+V8U4a"
  crossorigin="anonymous"
  type="text/plain"
  data-categories="essential"
></script>

ข้อควรพิจารณาในการตั้งค่าและการแก้ไขปัญหา

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

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

พารามิเตอร์การค้นหาและการติดตาม

Immersive Experience สามารถอ่านพารามิเตอร์การค้นหาที่รองรับได้เมื่อแอปพลิเคชันโหลดครั้งแรก และสามารถทำงานร่วมกับเครื่องมือการวิเคราะห์และโฆษณาบนพอร์ทัลได้ ใช้ส่วนอ้างอิงด้านล่างเมื่อคุณต้องการส่งค่าการค้นหา กำหนดค่าการติดตาม หรือทำความเข้าใจพารามิเตอร์ Google Hotel Ads ค่ะ

ปรับแต่ง Immersive Experience 2.0

ปรับแต่ง Immersive Experience โดยใช้คุณสมบัติของส่วนประกอบ รวมถึง CSS/JS ของคุณเองบนพอร์ทัลของคุณค่ะ

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

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

ขั้นตอนถัดไป

หลังจากติดตั้งและทดสอบ Immersive Experience 2.0 บนโดเมนที่ได้รับอนุญาตของคุณแล้ว ให้รีวิวคำแนะนำใน แท็บฝังของ Cloudbeds Booking Engine เมื่อคุณต้องการเปรียบเทียบหรือกำหนดค่าตัวเลือกฝังอื่นๆ ครับ