วิดเจ็ตเว็บไซต์เครื่องมือจอง Cloudbeds

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

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

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

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

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

form method="post" action="https://hotels.cloudbeds.com/reservas/dEF4YR"
  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="https://hotels.cloudbeds.com/reservas/dEF4YR"
  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="https://hotels.cloudbeds.com/reservas/dEF4YR"
  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>