เครื่องมือการจอง Plus - รหัสการปรับแต่งที่ใช้บ่อยที่สุด

• ฟอนต์ควร มีให้ใช้ฟรี จาก Google Fonts.
• ตัวอย่างการใช้ฟอนต์ Karla > ใช้โค้ด CSS นี้ ในฟิลด์ เมต้าแท็กที่กำหนดเอง: 

<!-- **START** CSS only Replace Font-Family - KB content **START** -->
<style>
    @import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700;800&display=swap');

    /* ใช้กับทุกองค์ประกอบที่เริ่มต้นด้วย cb- class */
    [class^="cb-"],
    /* ใช้กับ body และองค์ประกอบข้อความทั่วไป */
    body,
    p,
    span,
    a,
    li,
    td,
    th,
    div,
    /* ใช้กับแท็กหัวเรื่องทั้งหมด */
    h1, h2, h3, h4, h5, h6,
    /* ใช้กับองค์ประกอบแบบฟอร์มเพื่อความสอดคล้อง */
    input,
    textarea,
    select,
    button,
    label {
        font-family: 'Karla', sans-serif !important;
    }

    /* ไม่บังคับ: น้ำหนักฟอนต์เฉพาะสำหรับหัวเรื่องหรือองค์ประกอบอื่น ๆ */
    h1, h2, h3 {
        font-weight: 700 !important; /* ตัวหนาสำหรับหัวเรื่องหลัก */
    }

    h4, h5, h6 {
        font-weight: 600 !important; /* ตัวหนากึ่งสำหรับหัวเรื่องรอง */
    }
</style>
<!-- **END** CSS only Replace Font-Family - KB content **END** -->

• การปรับแต่งนี้มุ่งเป้าไปที่ข้อความ "ผู้ใหญ่" ภายในตัวเลือกแขก.
• คุณสามารถเปลี่ยนข้อความ "แขก" เป็นข้อความที่คุณต้องการและใช้ Language Wrappers เพื่อเพิ่มการแปลของคุณ.
• หมายเหตุ: เปลี่ยนเฉพาะตัวอักษรสำหรับ แขก เท่านั้น อย่าลบตัวอักษรอื่น ๆ.
• ใช้โค้ด CSS นี้ในฟิลด์ เมต้าแท็กที่กำหนดเอง:

<!-- **START** Replace 'Adults' text with 'Guests' within Guest Selectors - KB content **START** -->
<style>

.cb-guestselector-adults-text {
        visibility: hidden;
        font-size: 0;
}
.cb-guestselector-adults-text::after {
        content: "แขก";
        font-size: 14px;
        visibility: visible;
}
</style>
<!-- **END** Replace 'Adults' text within Guest Selectors - KB content **END** -->

• คุณสามารถเปลี่ยนข้อความ "เด็ก (อายุ 0 ถึง 3 ปี)" เป็นข้อความที่คุณต้องการและใช้ Language Wrappers เพื่อเพิ่มการแปลของคุณ.
• หมายเหตุ: เปลี่ยนเฉพาะตัวอักษรสำหรับเด็ก (อายุ 0 ถึง 3 ปี) เท่านั้น อย่าลบตัวอักษรอื่น ๆ.
• ใช้โค้ด CSS นี้ในฟิลด์ เมต้าแท็กที่กำหนดเอง:

<!-- **START** Replace 'Children' text with 'Children (0 to 3 years old)' within Guest Selectors - KB content **START** -->
<style>
.cb-guestselector-popover .cb-guestselector-children-text {
  visibility: hidden;
  font-size: 0;
}

.cb-guestselector-popover .cb-guestselector-children-text::after {
  /* เขียนข้อความที่ต้องการระหว่างเครื่องหมายคำพูดหลัง content: */
  content: 'เด็ก (อายุ 0 ถึง 3 ปี)';
  font-size: 14px;
  visibility: visible;
}
</style>
<!-- **END** Replace 'Children' text with "Children (0 to 3 years old)" within Guest Selectors - KB content **END** -->

• ใช้โค้ด CSS นี้ในฟิลด์ เมต้าแท็กที่กำหนดเอง:

<!-- **START** 'Hide Property Information section ' - KB content **START** --> 
<style> 
.cb-property-info { 
  display: none; 
} 
</style> 
<!-- **END** 'Hide Property Information section ' - KB content **END** -->

• อย่าลืมเปลี่ยนข้อความ เป็นข้อความที่คุณต้องการ. คุณสามารถใช้ Language Wrappers เพื่อเพิ่มการแปลของคุณ.
• เก็บข้อความ อยู่ภายในเครื่องหมายคำพูด "". ตัวอักษร \A แทนการขึ้นบรรทัดใหม่.
• ใช้โค้ด CSS นี้ในฟิลด์ เมต้าแท็กที่กำหนดเอง :

<!-- **START** CSS only Adds Banner after Search Card - KB content **START** -->
<style>

/* นี้ทำให้แน่ใจว่าคอนเทนเนอร์หลักจัดเรียงลูก ๆ ในแนวตั้ง */
.cb-landing-page div:has(>.cb-search-card) {
display: flex;
flex-direction: column;
}

.cb-landing-page div:has(>.cb-search-card)::after {
content: "ค้นหาวันที่ในเดือนมิถุนายนและสำหรับข้อเสนอพิเศษใช้รหัส: ข้อเสนอฤดูร้อน. \A ตัวเลือกเพิ่มเติมเมื่อเลือกสองคืนขั้นต่ำ.";
white-space: pre-wrap;
text-align: center;
font-family: Poppins;
background-color: #ECF0F1;
font-size: 14px;
line-height: 1.4;
font-weight: 400;
color: #000000;
padding: 20px;
border-radius: 40px;
border-width: .5px;
/* เพิ่มพื้นที่ระหว่างองค์ประกอบใหม่นี้และการ์ดค้นหาด้านล่าง */
margin-bottom: 15px;
}

</style>
<!-- **END** CSS only Adds Banner after Search Card - KB content **END** -->

• อย่าลืมเปลี่ยนข้อความ เป็นข้อความที่คุณต้องการ คุณสามารถใช้ Language Wrappers เพื่อเพิ่มการแปลของคุณ
• ให้ข้อความ อยู่ในเครื่องหมายคำพูด "" แต่ละ \A แทนการขึ้นบรรทัดใหม่
• ใช้โค้ด CSS นี้ใน ฟิลด์เมต้าแท็กที่กำหนดเอง:

<!-- **START** CSS only Adds Banner before Accommodations List - KB content **START** -->
<style>
.cb-accommodations-page::before {
content: "คลิกที่วันที่เช็กอินที่ต้องการ เพื่อดูห้องว่างสำหรับวันนั้น \A การรับประกันราคาที่ดีที่สุด! เราจับคู่ราคา \A โทรหาเราที่ 555-555 หรืออีเมลหาที่ contact@emailtest.com";
    visibility: visible;
    text-align: center;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    color: #465560;
    background-color: #ECF0F1;
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 25px;
overflow: hidden;
display: flex;
flex-direction: column; 
justify-content: center; 
gap: 5;
white-space: pre-wrap; /* Allows the \A to create a line break */
}
</style>
<!-- **END** CSS only Adds Banner before Accommodations List - KB content **END** -->

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

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

อ่าน คำแนะนำฉบับสมบูรณ์ เพื่อสร้างสรรค์ระบบ Event Emitter ของเราให้เป็นโซลูชันที่กำหนดเองของคุณ: เครื่องมือการจอง Plus ระบบ Event Emitter.

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

• favicon (ย่อมาจาก "ไอคอนที่ชื่นชอบ") เป็นไอคอนสี่เหลี่ยมเล็ก ๆ ที่เกี่ยวข้องกับเว็บไซต์ของคุณ มันเป็นส่วนสำคัญของการมีตัวตนออนไลน์ของแบรนด์ แม้ว่าจะมีขนาดเล็กก็ตาม
• คัดลอกและแทรกโค้ดต่อไปนี้ลงในฟิลด์ JavaScript .
• เปลี่ยนข้อความ "แทรก URL ไอคอนของคุณที่นี่" ด้วย URL ของไอคอนของคุณ:

<script>
  window.addEventListener("on-booking-engine-ready", ({ detail }) => {
    let link = document.querySelector("link[rel~='icon']");
    if (!link) {
      link = document.createElement('link');
      link.rel = 'icon';
      document.head.appendChild(link);
    }
    link.href = 'แทรก URL ไอคอนของคุณที่นี่';
  });
</script>

• สำรวจ คำแนะนำ เหล่านี้เพื่อเชื่อมต่อเครื่องมือการจอง Plus ของคุณกับแพลตฟอร์มที่คุณต้องการ:
  • เพิ่มลิงก์ Cloudbeds Booking Engine ของคุณไปยังโปรไฟล์ X (เดิมคือ Twitter)
  • เพิ่มลิงก์เครื่องมือการจองของคุณไปยังโปรไฟล์ Instagram
  • เพิ่ม Facebook Messenger ลงในเครื่องมือการจองของคุณ
  • เพิ่ม WhatsApp Messenger ลงในเครื่องมือการจองของคุณ

• คุณสามารถ เพิ่มสคริปต์ใด ๆ ลงในฟิลด์ JavaScript เพื่อเชื่อมต่อโค้ดบุคคลที่สาม เช่น โซลูชันการจัดการคุกกี้ของคุณ, Sojern, Triptease, The Hotel Networks, Carstack, AskSuite, Xendit เป็นต้น
• หากคุณกำลังมองหาการสร้าง โซลูชันการติดตามที่กำหนดเอง สำหรับเครื่องมือการจอง Plus, โปรดอ้างอิงไปที่ คำแนะนำระบบ Event Emitter.
• การวิเคราะห์ & พิกเซลการติดตาม: เชื่อมต่อเครื่องมือการจอง Plus ของคุณกับ Google Analytics GA4, Google Ads, Google Tag Manager, และ Facebook Pixel โดยตรงจากแท็บการวิเคราะห์ อ่านเนื้อหาที่เกี่ยวข้องกับการรวมเหล่านี้:
  • เชื่อมต่อ Google Analytics กับ Cloudbeds Booking Engine
  • การรวม Google Ads กับ Cloudbeds Booking Engine
  • เพิ่ม Facebook Pixel ลงในเครื่องมือการจองของคุณ