Webflow

Webflow รองรับ HTML และ JavaScript แบบกำหนดเองในสามตำแหน่ง: <head> ของไซต์ทั้งหมด, </body> ของไซต์ทั้งหมด และการฝังโค้ดต่อองค์ประกอบ ซึ่งทำให้การรวมคอมโพเนนต์เว็บของ Wink เป็นเรื่องง่าย

โหลดสคริปต์ Wink ทั่วทั้งไซต์

ใน Webflow Designer เปิด Project Settings → Custom Code
ในส่วน Head Code ให้เพิ่มสไตล์ชีต:
```
<link rel="stylesheet" href="https://elements.wink.travel/styles.css">
```

ในส่วน Footer Code ให้เพิ่มสคริปต์และตัวโหลดแอป (แทนที่ 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>

คลิก Save Changes

เพิ่มคอมโพเนนต์ในองค์ประกอบเฉพาะ

ใน Designer เลือก Div หรือ Section ที่คุณต้องการใส่คอมโพเนนต์
ในแผงด้านขวา คลิกไอคอน </> Embed (หรือเพิ่มองค์ประกอบ HTML Embed จากแผง Add)

วาง HTML ของคอมโพเนนต์ เช่น:

<wink-content-loader
  layout="RANKED"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>

คลิก Save & Close

โค้ดแบบกำหนดเองต่อหน้า

ถ้าคุณต้องการใช้ Wink เฉพาะในบางหน้า ให้ใช้การฝังโค้ดต่อหน้าแทนการฝังทั่วทั้งไซต์:

เปิด Page Settings ของหน้าที่ต้องการ (ไอคอนรูปเฟืองในแผง Pages)
เลื่อนลงไปที่ Custom Code → Before </body> tag
วางสคริปต์และตัวโหลดแอปเหมือนด้านบน
บันทึกการตั้งค่าหน้า

คอมโพเนนต์ที่มีให้ใช้งาน

คอมโพเนนต์	แท็ก 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 สำหรับรายการแอตทริบิวต์ทั้งหมด