Webflow

Webflow styður sérsniðinn HTML og JavaScript á þremur stöðum: í <head> síðunnar, í </body> síðunnar og í kóðainnbyggingum fyrir einstaka þætti. Þetta gerir samþættingu Wink vefþátta einfalda.

Hlaða Wink skriptum fyrir alla síðuna

Opnaðu Project Settings → Custom Code í Webflow Designer.

Í Head Code hlutanum, bættu við stílsniði:

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

Í Footer Code hlutanum, bættu við skriptinu og forritshleðslunni (skiptu út 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>

Smelltu á Save Changes.

Bæta við þætti í ákveðinn þátt

Veldu Div eða Section í Designer þar sem þú vilt hafa þáttinn.
Í hægri spjaldi, smelltu á </> Embed táknið (eða bættu við HTML Embed þætti úr Add spjaldinu).

Límdu inn HTML þáttinn, til dæmis:

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

Smelltu á Save & Close.

Sérsniðinn kóði fyrir hverja síðu

Ef þú þarft aðeins Wink á ákveðnum síðum, notaðu kóðainnspýtingu fyrir hverja síðu í staðinn fyrir alla síðuna:

Opnaðu Page Settings fyrir viðkomandi síðu (gír táknið í Pages spjaldinu).
Skrunaðu niður í Custom Code → Before </body> tag.
Límdu inn sama skript og forritshleðslu og áður.
Vistaðu síðustillingarnar.

Tiltækir þættir

Þáttur	HTML tag	Tilgangur
Content loader	`<wink-content-loader>`	Sýna hótelkort, grindur, kort
Lookup	`<wink-lookup>`	Leitargluggi fyrir áfangastaði
Search button	`<wink-search-button>`	Opna ferðalagsval
Account button	`<wink-account-button>`	Skrá inn / notendavalmynd
Itinerary button	`<wink-itinerary-button>`	Sýna núverandi ferðalýsingu
Itinerary picker	`<wink-itinerary-picker>`	Fullt ferðalýsingareyðublað
Shopping cart	`<wink-shopping-cart-button>`	Yfirlitshnappur körfu

Sjá Web Components fyrir fulla eiginleikalýsingu.