HubSpot CMS

HubSpot CMS menyokong modul HTML tersuai dan kod header/footer seluruh tapak, menjadikannya mudah untuk menyelitkan komponen Wink pada halaman pemasaran dan halaman pendaratan.

Muatkan skrip Wink seluruh tapak

Dalam HubSpot, pergi ke Marketing → Files and Templates → Design Tools.
Buka main.css tema aktif anda atau gunakan tetapan kandungan global.
Sebagai alternatif, pergi ke Settings → Website → Pages → Custom Code.

Dalam medan Head HTML, tambah helaian gaya:

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

Dalam medan Footer HTML, 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>

Simpan dan terbitkan.

Tambah komponen melalui modul HTML Tersuai

Dalam Design Tools, cipta modul baru jenis Rich Text atau HTML.

Dalam kandungan lalai modul, tampal HTML komponen:

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

Simpan modul dan seret ke mana-mana templat halaman atau halaman menggunakan editor halaman.

Tambah komponen terus dalam editor halaman

Jika anda tidak mahu mencipta modul, anda boleh menggunakan seksyen Custom HTML dalam editor seret dan lepas:

Buka halaman dalam editor halaman HubSpot.
Klik Add dan pilih seksyen Custom HTML atau Embed.
Tampal tag komponen ke dalam medan HTML.
Klik Apply dan terbitkan 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.