Ghost

Fitur Code Injection bawaan Ghost memungkinkan Anda menambahkan skrip ke <head> global dan </body> publikasi Anda. Semua paket Ghost mendukung code injection, sehingga mudah untuk menyematkan komponen Wink di halaman atau postingan mana pun.

Muat skrip Wink di seluruh situs

Di panel Ghost Admin, buka Settings → Code Injection.

Di kotak Site Header, tambahkan stylesheet:

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

Di kotak Site Footer, 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.

Tambahkan komponen ke postingan atau halaman

Editor Ghost mendukung HTML card yang memungkinkan Anda menyisipkan HTML mentah di mana saja dalam konten Anda.

Buka postingan atau halaman di editor Ghost.
Ketik / untuk membuka pemilih kartu dan pilih HTML.

Tempelkan HTML komponen, misalnya:

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

Klik di luar kartu untuk melihat pratinjau, lalu terbitkan.

Code injection per halaman

Untuk komponen yang hanya ingin ditampilkan di satu halaman, Ghost juga mendukung code injection per halaman:

Buka pengaturan postingan atau halaman (ikon roda gigi di editor).
Gulir ke Code Injection.
Tambahkan tag komponen di bidang Footer (pemuat aplikasi global hanya perlu ada di footer seluruh situs).
Simpan.

Komponen yang tersedia

Komponen	Tag HTML	Tujuan
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.