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 с вашия Wink 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.

Добавяне на компонент към страница

След като скриптовете са заредени глобално, можете да поставите всеки Wink компонент на всяка страница, използвайки Code Block.

Отворете страницата, която искате да редактирате.
Натиснете Edit и добавете нов Code блок там, където искате да се появи компонентът.
Поставете HTML кода на компонента, например content loader:
```
<wink-content-loader
  layout="HOTEL"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>
```
Натиснете Apply, след това Save.

Налични компоненти

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