Webflow

Webflow tukee mukautettua HTML:ää ja JavaScriptiä kolmessa paikassa: koko sivuston <head>, koko sivuston </body> ja yksittäisten elementtien koodin upotuksissa. Tämä tekee Wink-verkkokomponenttien integroinnista helppoa.

Lataa Wink-skriptit koko sivustolle

Avaa Webflow Designerissa Project Settings → Custom Code.

Lisää Head Code -osioon tyylitiedosto:

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

Lisää Footer Code -osioon skripti ja sovelluksen lataaja (korvaa 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>

Klikkaa Save Changes.

Lisää komponentti tiettyyn elementtiin

Valitse Designerissa Div tai Section, johon haluat komponentin.
Oikeassa paneelissa klikkaa </> Embed -kuvaketta (tai lisää HTML Embed -elementti Lisää-paneelista).

Liitä komponentin HTML, esimerkiksi:

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

Klikkaa Save & Close.

Sivukohtainen mukautettu koodi

Jos tarvitset Wink:iä vain tietyillä sivuilla, käytä sivukohtaista koodin injektiota koko sivuston sijaan:

Avaa kohdesivun Page Settings (rataskuvake Pages-paneelissa).
Selaa kohtaan Custom Code → Before </body> tag.
Liitä sama skripti ja sovelluksen lataaja kuin yllä.
Tallenna sivun asetukset.

Saatavilla olevat komponentit

Komponentti	HTML-tunniste	Tarkoitus
Content loader	`<wink-content-loader>`	Näytä hotellikortit, ruudukot, kartat
Lookup	`<wink-lookup>`	Hakupalkki kohteille
Search button	`<wink-search-button>`	Avaa matkasuunnitelman valitsin
Account button	`<wink-account-button>`	Kirjaudu sisään / käyttäjävalikko
Itinerary button	`<wink-itinerary-button>`	Näytä nykyinen matkasuunnitelma
Itinerary picker	`<wink-itinerary-picker>`	Täysi matkasuunnitelmalomake
Shopping cart	`<wink-shopping-cart-button>`	Ostoskorin yhteenvetopainike

Katso täydellinen attribuuttiviite Web Components -sivulta.