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 в редакторе с перетаскиванием:

Откройте страницу в редакторе HubSpot.
Нажмите Add и выберите секцию Custom HTML или Embed.
Вставьте тег компонента в поле 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 для полного справочника атрибутов.