Squarespace

Squarespace รองรับ HTML และ JavaScript ที่กำหนดเอง ซึ่งหมายความว่าคุณสามารถฝังคอมโพเนนต์เว็บของ Wink ลงในไซต์ของคุณโดยตรงโดยไม่ต้องใช้ปลั๊กอิน คู่มือนี้จะแสดงวิธีโหลดสคริปต์ของ Wink ทั่วทั้งไซต์ จากนั้นวางคอมโพเนนต์ในแต่ละหน้า

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

การเพิ่มสคริปต์ลงในส่วนท้ายและส่วนหัวของไซต์คุณหมายความว่า Wink จะพร้อมใช้งานในทุกหน้าโดยไม่ต้องตั้งค่าซ้ำ

ในตัวแก้ไข Squarespace ไปที่ Settings → Advanced → Code Injection
ในช่อง Header ให้เพิ่มสไตล์ชีต:
```
<link rel="stylesheet" href="https://elements.wink.travel/styles.css">
```
ในช่อง Footer ให้เพิ่มสคริปต์และตัวโหลดแอปพลิเคชัน (แทนที่ YOUR_CLIENT_ID ด้วย Client ID ของ Wink ของคุณ):
```
<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>
```
คลิก Save

เพิ่มคอมโพเนนต์ลงในหน้า

เมื่อสคริปต์ถูกโหลดทั่วทั้งไซต์แล้ว คุณสามารถวางคอมโพเนนต์ Wink ใดก็ได้ลงในหน้าใดก็ได้โดยใช้ Code Block

เปิดหน้าที่คุณต้องการแก้ไข
คลิก Edit และเพิ่มบล็อก Code ใหม่ในตำแหน่งที่คุณต้องการให้คอมโพเนนต์แสดง
วาง HTML ของคอมโพเนนต์ เช่น ตัวโหลดเนื้อหา:
```
<wink-content-loader
  layout="HOTEL"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>
```
คลิก Apply จากนั้นคลิก Save

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

คอมโพเนนต์	แท็ก HTML	จุดประสงค์
ตัวโหลดเนื้อหา	`<wink-content-loader>`	แสดงการ์ดโรงแรม, ตาราง, แผนที่
ช่องค้นหา	`<wink-lookup>`	แถบค้นหาสำหรับปลายทาง
ปุ่มค้นหา	`<wink-search-button>`	เปิดตัวเลือกแผนการเดินทาง
ปุ่มบัญชี	`<wink-account-button>`	ลงชื่อเข้าใช้ / เมนูผู้ใช้
ปุ่มแผนการเดินทาง	`<wink-itinerary-button>`	แสดงแผนการเดินทางปัจจุบัน
ตัวเลือกแผนการเดินทาง	`<wink-itinerary-picker>`	ฟอร์มแผนการเดินทางเต็มรูปแบบ
ตะกร้าสินค้า	`<wink-shopping-cart-button>`	ปุ่มสรุปตะกร้าสินค้า

ดู Web Components สำหรับข้อมูลอ้างอิงแอตทริบิวต์ทั้งหมดของแต่ละคอมโพเนนต์