Squarespace

Squarespace mendukung HTML dan JavaScript kustom, yang berarti Anda dapat menyematkan komponen web Wink langsung ke situs Anda tanpa plugin. Panduan ini menunjukkan cara memuat skrip Wink secara menyeluruh di situs dan kemudian menempatkan komponen pada halaman individual.

Muat skrip Wink secara menyeluruh di situs

Menambahkan skrip ke footer dan header global situs Anda berarti Wink tersedia di setiap halaman tanpa perlu pengaturan berulang.

Di editor Squarespace, buka Settings → Advanced → Code Injection.

Di kolom Header, tambahkan stylesheet:

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

Di kolom Footer, tambahkan skrip dan pemuat aplikasi (ganti 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.

Tambahkan komponen ke halaman

Setelah skrip dimuat secara global, Anda dapat menempatkan komponen Wink apa pun ke halaman mana pun menggunakan Code Block.

Buka halaman yang ingin Anda edit.
Klik Edit dan tambahkan blok Code baru di tempat Anda ingin komponen muncul.

Tempelkan HTML komponen, misalnya pemuat konten:

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

Klik Apply lalu Save.

Komponen yang tersedia

Komponen	Tag HTML	Tujuan
Pemuat konten	`<wink-content-loader>`	Menampilkan kartu hotel, grid, peta
Lookup	`<wink-lookup>`	Bar pencarian destinasi
Tombol pencarian	`<wink-search-button>`	Membuka pemilih itinerary
Tombol akun	`<wink-account-button>`	Masuk / menu pengguna
Tombol itinerary	`<wink-itinerary-button>`	Menampilkan itinerary saat ini
Pemilih itinerary	`<wink-itinerary-picker>`	Formulir itinerary lengkap
Keranjang belanja	`<wink-shopping-cart-button>`	Tombol ringkasan keranjang

Lihat Web Components untuk referensi atribut lengkap setiap komponen.