Webflow

Webflow поддерживает пользовательский HTML и JavaScript в трёх местах: в глобальном <head>, в глобальном </body> и в кодовых вставках для отдельных элементов. Это упрощает интеграцию веб-компонентов Wink.

Загрузка скриптов Wink на весь сайт

В Webflow Designer откройте Project Settings → Custom Code.

В разделе Head Code добавьте таблицу стилей:

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

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

Нажмите Save Changes.

Добавление компонента в конкретный элемент

В Designer выберите Div или Section, куда хотите добавить компонент.
В правой панели нажмите иконку </> Embed (или добавьте элемент HTML Embed из панели Add).

Вставьте HTML компонента, например:

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

Нажмите Save & Close.

Пользовательский код для отдельных страниц

Если Wink нужен только на некоторых страницах, используйте внедрение кода на уровне страницы вместо глобального:

Откройте Page Settings нужной страницы (иконка шестерёнки в панели Pages).
Пролистайте до Custom Code → Before </body> tag.
Вставьте тот же скрипт и загрузчик приложения, что и выше.
Сохраните настройки страницы.

Доступные компоненты

Компонент	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 для полного справочника по атрибутам.