Webflow

Webflow menyokong HTML dan JavaScript tersuai di tiga tempat: <head> seluruh laman, </body> seluruh laman, dan selitan kod setiap elemen. Ini memudahkan integrasi komponen web Wink.

Muatkan skrip Wink di seluruh laman

Dalam Webflow Designer, buka Project Settings → Custom Code.

Dalam bahagian Head Code, tambah helaian gaya:

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

Dalam bahagian Footer Code, tambah skrip dan pemuat aplikasi (ganti 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>

Klik Save Changes.

Tambah komponen ke elemen tertentu

Dalam Designer, pilih Div atau Section di mana anda mahu komponen itu.
Dalam panel kanan, klik ikon </> Embed (atau tambah elemen HTML Embed dari panel Tambah).

Tampal HTML komponen, contohnya:

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

Klik Save & Close.

Kod tersuai per halaman

Jika anda hanya memerlukan Wink pada halaman tertentu, gunakan suntikan kod per halaman dan bukannya seluruh laman:

Buka Page Settings untuk halaman sasaran (ikon gear dalam panel Pages).
Skrol ke Custom Code → Before </body> tag.
Tampal skrip dan pemuat aplikasi yang sama seperti di atas.
Simpan tetapan halaman.

Komponen tersedia

Komponen	Tag HTML	Tujuan
Content loader	`<wink-content-loader>`	Papar kad hotel, grid, peta
Lookup	`<wink-lookup>`	Bar carian destinasi
Search button	`<wink-search-button>`	Buka pemilih jadual perjalanan
Account button	`<wink-account-button>`	Log masuk / menu pengguna
Itinerary button	`<wink-itinerary-button>`	Papar jadual perjalanan semasa
Itinerary picker	`<wink-itinerary-picker>`	Borang jadual perjalanan penuh
Shopping cart	`<wink-shopping-cart-button>`	Butang ringkasan troli

Lihat Web Components untuk rujukan atribut penuh.