Webflow

Webflow mendukung HTML dan JavaScript kustom di tiga tempat: <head> seluruh situs, </body> seluruh situs, dan embed kode per elemen. Ini membuat integrasi komponen web Wink menjadi mudah.

Muat skrip Wink di seluruh situs

Di Webflow Designer, buka Project Settings → Custom Code.

Di bagian Head Code, tambahkan stylesheet:

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

Di bagian Footer Code, tambahkan 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.

Tambahkan komponen ke elemen tertentu

Di Designer, pilih Div atau Section tempat Anda ingin menambahkan komponen.
Di panel kanan, klik ikon </> Embed (atau tambahkan elemen HTML Embed dari panel Add).

Tempelkan HTML komponen, misalnya:

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

Klik Save & Close.

Kode kustom per halaman

Jika Anda hanya membutuhkan Wink di halaman tertentu, gunakan penyisipan kode per halaman daripada seluruh situs:

Buka Page Settings untuk halaman target (ikon roda gigi di panel Pages).
Gulir ke Custom Code → Before </body> tag.
Tempelkan skrip dan pemuat aplikasi yang sama seperti di atas.
Simpan pengaturan halaman.

Komponen yang tersedia

Komponen	Tag HTML	Fungsi
Content loader	`<wink-content-loader>`	Menampilkan kartu hotel, grid, peta
Lookup	`<wink-lookup>`	Bar pencarian destinasi
Search button	`<wink-search-button>`	Membuka pemilih itinerary
Account button	`<wink-account-button>`	Masuk / menu pengguna
Itinerary button	`<wink-itinerary-button>`	Menampilkan itinerary saat ini
Itinerary picker	`<wink-itinerary-picker>`	Formulir itinerary lengkap
Shopping cart	`<wink-shopping-cart-button>`	Tombol ringkasan keranjang

Lihat Web Components untuk referensi atribut lengkap.