HubSpot CMS

HubSpot CMS mendukung modul HTML kustom dan kode header/footer di seluruh situs, sehingga memudahkan untuk menyematkan komponen Wink pada halaman pemasaran dan halaman arahan.

Muat skrip Wink di seluruh situs

Di HubSpot, buka Marketing → Files and Templates → Design Tools.
Buka main.css tema aktif Anda atau gunakan pengaturan konten global.
Atau, buka Settings → Website → Pages → Custom Code.

Di kolom Head HTML, tambahkan stylesheet:

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

Di kolom Footer HTML, 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>

Simpan dan publikasikan.

Tambahkan komponen melalui modul Custom HTML

Di Design Tools, buat modul baru dengan tipe Rich Text atau HTML.

Di konten default modul, tempelkan HTML komponen:

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

Simpan modul dan seret ke template halaman atau halaman mana pun menggunakan editor halaman.

Tambahkan komponen langsung di editor halaman

Jika Anda tidak ingin membuat modul, Anda dapat menggunakan bagian Custom HTML di editor drag-and-drop:

Buka halaman di editor halaman HubSpot.
Klik Add dan pilih bagian Custom HTML atau Embed.
Tempelkan tag komponen ke dalam kolom HTML.
Klik Apply dan publikasikan halaman.

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.