Ghost

Встроенная функция Code Injection в Ghost позволяет добавлять скрипты в глобальные <head> и </body> вашей публикации. Все тарифы Ghost поддерживают внедрение кода, что упрощает встраивание компонентов Wink на любую страницу или пост.

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

В панели администратора Ghost перейдите в Settings → Code Injection.

В поле Site Header добавьте таблицу стилей:

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

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

Добавьте компонент в пост или страницу

Редактор Ghost поддерживает HTML-карту, которая позволяет вставлять сырой HTML в любое место вашего контента.

Откройте пост или страницу в редакторе Ghost.
Введите /, чтобы открыть выбор карты, и выберите HTML.

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

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

Кликните вне карты для предварительного просмотра, затем опубликуйте.

Внедрение кода на отдельной странице

Для компонента, который должен отображаться только на одной странице, Ghost также поддерживает внедрение кода на уровне страницы:

Откройте настройки поста или страницы (значок шестерёнки в редакторе).
Пролистайте до Code Injection.
Добавьте тег компонента в поле Footer (глобальный app-loader должен быть только в футере всего сайта).
Сохраните.

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

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