HubSpot CMS

HubSpot CMS поддържа персонализирани HTML модули и код за хедър/футър за цял сайт, което улеснява вграждането на Wink компоненти в маркетингови страници и лендинг страници.

Зареждане на Wink скриптове за цял сайт

В HubSpot отидете на Marketing → Files and Templates → Design Tools.
Отворете активния тема main.css или използвайте глобалните настройки за съдържание.
Като алтернатива, отидете на Settings → Website → Pages → Custom Code.

В полето Head HTML добавете стиловия файл:

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

В полето Footer HTML добавете скрипта и зареждача на приложението (заменете 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>

Запазете и публикувайте.

Добавяне на компонент чрез персонализиран HTML модул

В Design Tools създайте нов модул от тип Rich Text или HTML.
В съдържанието по подразбиране на модула поставете HTML кода на компонента:
```
<wink-content-loader
  layout="HOTEL"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>
```
Запазете модула и го плъзнете в шаблон на страница или страница чрез редактора на страници.

Добавяне на компонент директно в редактора на страници

Ако предпочитате да не създавате модул, можете да използвате секция Custom HTML в drag-and-drop редактора:

Отворете страницата в редактора на HubSpot.
Кликнете Add и изберете секция Custom HTML или Embed.
Поставете тагa на компонента в HTML полето.
Кликнете Apply и публикувайте страницата.

Налични компоненти

Компонент	HTML таг	Цел
Content loader	`<wink-content-loader>`	Показва хотелски карти, мрежи, карти
Lookup	`<wink-lookup>`	Търсачка за дестинации
Search button	`<wink-search-button>`	Отваря избор на маршрут
Account button	`<wink-account-button>`	Вход / меню на потребителя
Itinerary button	`<wink-itinerary-button>`	Показва текущия маршрут
Itinerary picker	`<wink-itinerary-picker>`	Пълен формуляр за маршрут
Shopping cart	`<wink-shopping-cart-button>`	Бутон за резюме на количката

Вижте Web Components за пълния справочник на атрибутите.