Webflow

Webflow toetab kohandatud HTML-i ja JavaScripti kolmes kohas: saidi ulatuses <head>, saidi ulatuses </body> ja iga elemendi koodi manustes. See teeb Wink veebikomponentide integreerimise lihtsaks.

Laadi Wink skriptid saidi ulatuses

Ava Webflow Designeris Project Settings → Custom Code.

Lisa Head Code sektsiooni stiilileht:

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

Lisa Footer Code sektsiooni skript ja rakenduse laadija (asenda 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>

Klõpsa Save Changes.

Lisa komponent kindlale elemendile

Designeris vali Div või Section, kuhu soovid komponenti lisada.
Paremast paneelist klõpsa </> Embed ikoonil (või lisa HTML Embed element Add paneelist).

Kleebi komponendi HTML, näiteks:

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

Klõpsa Save & Close.

Lehekohane kohandatud kood

Kui vajad Winki ainult kindlatel lehtedel, kasuta lehekohast koodi manustamist saidi ulatuses manustamise asemel:

Ava sihtlehe Page Settings (hammasratta ikoon Pages paneelis).
Kerige alla Custom Code → Before </body> tag.
Kleebi sama skript ja rakenduse laadija nagu eespool.
Salvesta lehe seaded.

Saadaval olevad komponendid

Komponent	HTML silt	Eesmärk
Content loader	`<wink-content-loader>`	Kuvab hotellikaarte, võrgustikke, kaarte
Lookup	`<wink-lookup>`	Otsinguriba sihtkohtade jaoks
Search button	`<wink-search-button>`	Ava marsruudi valija
Account button	`<wink-account-button>`	Sisselogimine / kasutajamenüü
Itinerary button	`<wink-itinerary-button>`	Näita praegust marsruuti
Itinerary picker	`<wink-itinerary-picker>`	Täielik marsruudi vorm
Shopping cart	`<wink-shopping-cart-button>`	Ostukorvi kokkuvõtte nupp

Vaata täielikku atribuudi viidet Web Components lehelt.