วิดเจ็ตของ Cloudbeds Booking Engine สำหรับพอร์ทัล

วันที่เช็กอินและเช็กเอาต์จะแสดงในกล่องซ้อนพร้อมข้อมูลเพิ่มเติมเล็กน้อย

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

วันที่เช็กอินและเช็กเอาต์จะแสดงในแบนเนอร์สีเข้ม พร้อมข้อความสั้นๆ ที่กระตุ้นให้ลูกค้าของคุณจอง

นี่คือการฝังปุ่มเพียงอย่างเดียวโดยไม่มีตัวเลือกวันที่ที่นำแขกไปยังเครื่องมือการจองของคุณ

นี่คือการฝังปุ่มเพียงอย่างเดียวโดยไม่มีตัวเลือกวันที่ที่นำแขกไปยังเครื่องมือการจองของคุณ

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

วิดเจ็ต แบบดื่มด่ำ ช่วยเสริมเว็บไซต์ที่พักของคุณโดยการรวมฟีเจอร์การนำทางที่สำคัญของเครื่องมือการจอง Cloudbeds ของคุณ

เมื่อแขกคลิกปุ่ม "จองตอนนี้" บนเว็บไซต์ที่พักของคุณ (ตามที่แสดงในขั้นตอนที่ 1 ของภาพด้านล่าง) หน้าต่างโมดอลจะปรากฏขึ้นบนหน้าจอของพวกเขา ช่วยให้พวกเขาสามารถเข้าถึงตัวเลือกการจองต่างๆ (ขั้นตอนที่ 2, 3 และ 4)

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

1. จาก เมนูบัญชี ของคุณ ไปที่ การตั้งค่า และคลิกที่ เครื่องมือการจอง Cloudbeds
2. คลิกที่ วิดเจ็ตของเว็บไซต์
3. เลือก ภาษาวิดเจ็ตที่ต้องการ (อังกฤษ, โปรตุเกส หรือ สเปน) หากคุณต้องการให้วิดเจ็ตพยายามตรวจจับว่าผู้เข้าพักของคุณใช้ภาษาใดในเบราว์เซอร์ของพวกเขา ให้ตั้งค่านี้เป็น ตรวจจับโดยเบราว์เซอร์ หากวิดเจ็ตไม่สามารถตรวจจับภาษาที่รองรับได้ จะโหลดในภาษาที่พักเริ่มต้น
4. เลือกจาก 5 วิดเจ็ตที่สร้างไว้ล่วงหน้า เพื่อดูการแสดงผลภาพของแต่ละตัวเลือก การเลือกประเภทวิดเจ็ตเฉพาะ จะให้รหัสเอกลักษณ์เฉพาะของมัน
5. ยืนยันว่าคุณต้องการเปิดหน้าการจองในหน้าต่างใหม่

1. คัดลอกรหัสทั้งหมด ที่แสดงในส่วน คัดลอกรหัสด้านล่างและวางลงในเว็บไซต์ของคุณ
2. ไปที่เว็บไซต์ของคุณ (เครื่องมือ/หน้าสร้างเว็บไซต์) ขึ้นอยู่กับว่าวิดเจ็ตใดที่คุณเลือก คุณควรวางรหัสวิดเจ็ต ลงใน div/div องค์ประกอบ หากคุณเลือกวิดเจ็ตลอยตัว ให้วางรหัสก่อน แท็กปิดของเว็บไซต์ของคุณ

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

สำหรับรูปแบบวันที่ระหว่างประเทศ:

form method="post" action="PASTE_YOUR_BOOKING_ENGINE_URL_HERE"
  input type="hidden" name="date_format" value="d/m/Y"
  input type="text" name="widget_date" value="24/08/2015" /
  input type="text" name="widget_date_to" value="25/08/2015" /
/form

สำหรับรูปแบบวันที่ของสหรัฐอเมริกา:

form method="post" action="PASTE_YOUR_BOOKING_ENGINE_URL_HERE"
  input type="hidden" name="date_format" value="m/d/Y"
  input type="text" name="widget_date" value="08/24/2015" /
  input type="text" name="widget_date_to" value="08/25/2015" /
/form

สำหรับรูปแบบวันที่ ISO:

form method="post" action="PASTE_YOUR_BOOKING_ENGINE_URL_HERE"
  input type="hidden" name="date_format" value="Y-m-d"
  input type="text" name="widget_date" value="08/24/2015" /
  input type="text" name="widget_date_to" value="08/25/2015" /
/form

รหัสด้านล่างควรบันทึกในเว็บไซต์ที่พัก ที่ใดที่หนึ่งที่การจัดรูปแบบของเว็บไซต์ถูกบันทึก หากวิดเจ็ตถูกวางใน iframe การจัดรูปแบบต่อไปนี้ควรบันทึกไว้หลังจากสคริปต์วิดเจ็ต:

<style>
.widgetHotelsForm .horizontal-widget a {
background: #007d8a!important;
border-color: #007d8a!important;
top: 5px;
}
.CloudBedsDatePicker.pika-single .is-selected .pika-button {
background: #007D8A !important;
}
.CloudBedsDatePicker.pika-single .is-today .pika-button:hover {
background: #007D8A !important;
font-weight: bold;
}
.CloudBedsDatePicker .pika-button:hover {
background: #888;
}
</style>