HubSpot CMS
HubSpot CMS รองรับโมดูล HTML กำหนดเองและโค้ดส่วนหัว/ส่วนท้ายทั่วทั้งไซต์ ทำให้การฝังส่วนประกอบของ Wink บนหน้าการตลาดและหน้าแลนดิ้งเป็นเรื่องง่าย
โหลดสคริปต์ Wink ทั่วทั้งไซต์
หัวข้อที่มีชื่อว่า “โหลดสคริปต์ Wink ทั่วทั้งไซต์”- ใน HubSpot ไปที่ Marketing → Files and Templates → Design Tools
- เปิด
main.cssของ ธีม ที่ใช้งานอยู่ หรือใช้การตั้งค่าคอนเทนต์ทั่วโลก - หรือไปที่ Settings → Website → Pages → Custom Code
- ในช่อง Head HTML ให้เพิ่มสไตล์ชีต:
<link rel="stylesheet" href="https://elements.wink.travel/styles.css">
- ในช่อง Footer HTML ให้เพิ่มสคริปต์และตัวโหลดแอปพลิเคชัน (แทนที่
YOUR_CLIENT_ID):<script src="https://elements.wink.travel/elements.js" type="module" defer></script><wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader> - บันทึกและเผยแพร่
เพิ่มส่วนประกอบผ่านโมดูล HTML กำหนดเอง
หัวข้อที่มีชื่อว่า “เพิ่มส่วนประกอบผ่านโมดูล HTML กำหนดเอง”- ใน Design Tools สร้าง โมดูล ใหม่ชนิด Rich Text หรือ HTML
- ในเนื้อหาเริ่มต้นของโมดูล วางโค้ด HTML ของส่วนประกอบ:
<wink-content-loaderlayout="HOTEL"id="YOUR_LAYOUT_ID"></wink-content-loader>
- บันทึกโมดูลและลากไปวางในเทมเพลตหน้าหรือหน้าใดก็ได้โดยใช้ตัวแก้ไขหน้า
เพิ่มส่วนประกอบโดยตรงในตัวแก้ไขหน้า
หัวข้อที่มีชื่อว่า “เพิ่มส่วนประกอบโดยตรงในตัวแก้ไขหน้า”ถ้าคุณไม่ต้องการสร้างโมดูล คุณสามารถใช้ส่วน Custom HTML ในตัวแก้ไขแบบลากและวางได้:
- เปิดหน้าที่ต้องการในตัวแก้ไขหน้า HubSpot
- คลิก Add และเลือกส่วน Custom HTML หรือ Embed
- วางแท็กส่วนประกอบลงในช่อง HTML
- คลิก Apply และเผยแพร่หน้า
ส่วนประกอบที่มีให้ใช้งาน
หัวข้อที่มีชื่อว่า “ส่วนประกอบที่มีให้ใช้งาน”| ส่วนประกอบ | แท็ก HTML | จุดประสงค์ |
|---|---|---|
| Content loader | <wink-content-loader> | แสดงการ์ดโรงแรม, ตาราง, แผนที่ |
| Lookup | <wink-lookup> | แถบค้นหาปลายทาง |
| Search button | <wink-search-button> | เปิดตัวเลือกแผนการเดินทาง |
| Account button | <wink-account-button> | เข้าสู่ระบบ / เมนูผู้ใช้ |
| Itinerary button | <wink-itinerary-button> | แสดงแผนการเดินทางปัจจุบัน |
| Itinerary picker | <wink-itinerary-picker> | ฟอร์มแผนการเดินทางเต็มรูปแบบ |
| Shopping cart | <wink-shopping-cart-button> | ปุ่มสรุปตะกร้าสินค้า |
ดูรายละเอียดคุณสมบัติทั้งหมดได้ที่ Web Components