HubSpot CMS

HubSpot CMS obsługuje niestandardowe moduły HTML oraz kod w nagłówku/stopce na całej stronie, co ułatwia osadzanie komponentów Wink na stronach marketingowych i landing page’ach.

Załaduj skrypty Wink na całej stronie

W HubSpot przejdź do Marketing → Pliki i szablony → Narzędzia projektowe.
Otwórz aktywny motyw i plik main.css lub użyj globalnych ustawień zawartości.
Alternatywnie przejdź do Ustawienia → Strona internetowa → Strony → Niestandardowy kod.

W polu Head HTML dodaj arkusz stylów:

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

W polu Footer HTML dodaj skrypt i loader aplikacji (zamień 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>

Zapisz i opublikuj.

Dodaj komponent za pomocą niestandardowego modułu HTML

W Narzędziach projektowych utwórz nowy moduł typu Rich Text lub HTML.

W domyślnej zawartości modułu wklej kod HTML komponentu:

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

Zapisz moduł i przeciągnij go do dowolnego szablonu strony lub strony za pomocą edytora stron.

Dodaj komponent bezpośrednio w edytorze strony

Jeśli nie chcesz tworzyć modułu, możesz użyć sekcji Custom HTML w edytorze drag-and-drop:

Otwórz stronę w edytorze stron HubSpot.
Kliknij Dodaj i wybierz sekcję Custom HTML lub Embed.
Wklej tag komponentu w pole HTML.
Kliknij Zastosuj i opublikuj stronę.

Dostępne komponenty

Komponent	Tag HTML	Przeznaczenie
Content loader	`<wink-content-loader>`	Wyświetlanie kart hoteli, siatek, map
Lookup	`<wink-lookup>`	Pasek wyszukiwania destynacji
Search button	`<wink-search-button>`	Otwórz wybór planu podróży
Account button	`<wink-account-button>`	Logowanie / menu użytkownika
Itinerary button	`<wink-itinerary-button>`	Pokaż aktualny plan podróży
Itinerary picker	`<wink-itinerary-picker>`	Pełny formularz planu podróży
Shopping cart	`<wink-shopping-cart-button>`	Przycisk podsumowania koszyka

Zobacz Web Components dla pełnej referencji atrybutów.