Squarespace

Squarespace menyokong HTML dan JavaScript tersuai, yang bermaksud anda boleh menyematkan mana-mana komponen web Wink terus ke dalam laman anda tanpa pemalam. Panduan ini menunjukkan cara memuatkan skrip Wink di seluruh tapak dan kemudian meletakkan komponen pada halaman individu.

Muatkan skrip Wink di seluruh tapak

Menambah skrip ke footer dan header global tapak anda bermakna Wink tersedia pada setiap halaman tanpa perlu mengulangi tetapan.

Dalam editor Squarespace, pergi ke Settings → Advanced → Code Injection.

Dalam medan Header, tambah helaian gaya:

<link rel="stylesheet" href="https://elements.wink.travel/styles.css">

Dalam medan Footer, tambah skrip dan pemuat aplikasi (gantikan YOUR_CLIENT_ID dengan Client ID Wink anda):

<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>

Klik Save.

Tambah komponen ke halaman

Setelah skrip dimuatkan secara global, anda boleh meletakkan mana-mana komponen Wink ke mana-mana halaman menggunakan Code Block.

Buka halaman yang ingin anda sunting.
Klik Edit dan tambah blok Code baru di tempat anda mahu komponen dipaparkan.

Tampal HTML komponen, contohnya pemuat kandungan:

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

Klik Apply kemudian Save.

Komponen tersedia

Komponen	Tag HTML	Tujuan
Pemuat kandungan	`<wink-content-loader>`	Memaparkan kad hotel, grid, peta
Carian	`<wink-lookup>`	Bar carian destinasi
Butang carian	`<wink-search-button>`	Buka pemilih jadual perjalanan
Butang akaun	`<wink-account-button>`	Log masuk / menu pengguna
Butang jadual perjalanan	`<wink-itinerary-button>`	Papar jadual perjalanan semasa
Pemilih jadual perjalanan	`<wink-itinerary-picker>`	Borang jadual perjalanan penuh
Troli beli-belah	`<wink-shopping-cart-button>`	Butang ringkasan troli

Lihat Web Components untuk rujukan atribut penuh bagi setiap komponen.