Webflow

Webflow palaiko pasirinktinius HTML ir JavaScript tris vietas: visos svetainės <head>, visos svetainės </body> ir kiekvieno elemento kodo įterpimus. Tai palengvina Wink internetinių komponentų integravimą.

Įkelkite Wink skriptus visoje svetainėje

Webflow Designer atidarykite Project Settings → Custom Code.

Skiltyje Head Code pridėkite stiliaus lapą:

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

Skiltyje Footer Code pridėkite skriptą ir programos įkroviklį (pakeiskite 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>

Spauskite Save Changes.

Pridėkite komponentą prie konkretaus elemento

Designer lange pasirinkite Div arba Section, kur norite įdėti komponentą.
Dešiniajame skydelyje spauskite </> Embed piktogramą (arba pridėkite HTML Embed elementą iš Add skydelio).

Įklijuokite komponento HTML, pavyzdžiui:

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

Spauskite Save & Close.

Pasirinktinis kodas kiekvienam puslapiui

Jei Wink reikia tik tam tikruose puslapiuose, naudokite puslapio kodo įterpimą vietoje visos svetainės:

Atidarykite tikslinio puslapio Page Settings (įrankio piktograma Pages skydelyje).
Slinkite iki Custom Code → Before </body> tag.
Įklijuokite tą patį skriptą ir programos įkroviklį kaip aukščiau.
Išsaugokite puslapio nustatymus.

Galimi komponentai

Komponentas	HTML žyma	Paskirtis
Content loader	`<wink-content-loader>`	Rodyti viešbučių korteles, tinklus, žemėlapius
Lookup	`<wink-lookup>`	Paieškos juosta kryptims
Search button	`<wink-search-button>`	Atidaryti maršruto pasirinkimą
Account button	`<wink-account-button>`	Prisijungimo / vartotojo meniu mygtukas
Itinerary button	`<wink-itinerary-button>`	Rodyti esamą maršrutą
Itinerary picker	`<wink-itinerary-picker>`	Pilna maršruto forma
Shopping cart	`<wink-shopping-cart-button>`	Krepšelio santraukos mygtukas

Pilną atributų sąrašą žr. Web Components.