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