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