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