HubSpot CMS

HubSpot CMS suportă module HTML personalizate și cod pentru antet/subsol la nivel de site, ceea ce face simplă încorporarea componentelor Wink pe paginile de marketing și paginile de destinație.

Încarcă scripturile Wink la nivel de site

În HubSpot, accesează Marketing → Fișiere și Șabloane → Instrumente de design.
Deschide main.css al temei active sau folosește setările globale de conținut.
Alternativ, accesează Setări → Website → Pagini → Cod personalizat.

În câmpul Head HTML, adaugă foaia de stil:

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

În câmpul Footer HTML, adaugă scriptul și încărcătorul aplicației (înlocuiește 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>

Salvează și publică.

Adaugă un component printr-un modul HTML personalizat

În Instrumentele de design, creează un nou modul de tip Text îmbogățit sau HTML.

În conținutul implicit al modulului, lipește HTML-ul componentului:

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

Salvează modulul și trage-l în orice șablon de pagină sau pagină folosind editorul de pagini.

Adaugă un component direct în editorul de pagini

Dacă preferi să nu creezi un modul, poți folosi o secțiune HTML personalizat în editorul drag-and-drop:

Deschide pagina în editorul de pagini HubSpot.
Apasă Adaugă și alege o secțiune HTML personalizat sau Încorporare.
Lipește tag-ul componentului în câmpul HTML.
Apasă Aplică și publică pagina.

Componente disponibile

Componentă	Tag HTML	Scop
Încărcător de conținut	`<wink-content-loader>`	Afișează carduri de hotel, grile, hărți
Căutare	`<wink-lookup>`	Bară de căutare pentru destinații
Buton de căutare	`<wink-search-button>`	Deschide selectorul de itinerariu
Buton cont	`<wink-account-button>`	Autentificare / meniu utilizator
Buton itinerariu	`<wink-itinerary-button>`	Afișează itinerariul curent
Selector itinerariu	`<wink-itinerary-picker>`	Formular complet de itinerariu
Coș de cumpărături	`<wink-shopping-cart-button>`	Buton sumar coș

Vezi Web Components pentru referința completă a atributelor.