Squarespace

Squarespace підтримує користувацький HTML та JavaScript, що означає, що ви можете вбудувати будь-який веб-компонент Wink безпосередньо на свій сайт без плагінів. Цей посібник показує, як завантажити скрипти Wink на весь сайт, а потім розмістити компоненти на окремих сторінках.

Завантаження скриптів Wink на весь сайт

Додавання скриптів у глобальний футер і хедер вашого сайту означає, що Wink буде доступний на кожній сторінці без повторного налаштування.

У редакторі Squarespace перейдіть до Settings → Advanced → Code Injection.

У полі Header додайте таблицю стилів:

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

У полі Footer додайте скрипт і завантажувач додатку (замініть YOUR_CLIENT_ID на ваш Client ID Wink):

<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>

Натисніть Save.

Додавання компонента на сторінку

Після глобального завантаження скриптів ви можете додати будь-який компонент Wink на будь-яку сторінку за допомогою Code Block.

Відкрийте сторінку, яку хочете редагувати.
Натисніть Edit і додайте новий блок Code у потрібному місці для компонента.
Вставте HTML компонента, наприклад, завантажувач контенту:
```
<wink-content-loader
  layout="HOTEL"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>
```
Натисніть Apply, а потім Save.

Доступні компоненти

Компонент	HTML-тег	Призначення
Завантажувач контенту	`<wink-content-loader>`	Відображення карток готелів, сіток, карт
Пошук	`<wink-lookup>`	Панель пошуку напрямків
Кнопка пошуку	`<wink-search-button>`	Відкрити вибір маршруту
Кнопка акаунту	`<wink-account-button>`	Вхід / меню користувача
Кнопка маршруту	`<wink-itinerary-button>`	Показати поточний маршрут
Вибір маршруту	`<wink-itinerary-picker>`	Повна форма маршруту
Кошик	`<wink-shopping-cart-button>`	Кнопка підсумку кошика

Дивіться Web Components для повного опису атрибутів кожного компонента.