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 card, що дозволяє вставляти сирий 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 для повного довідника атрибутів.