Skip to content

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.

  1. Ava Webflow Designeris Project Settings → Custom Code.
  2. Lisa Head Code sektsiooni stiilileht:
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css">
  3. 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>
  4. Klõpsa Save Changes.
  1. Designeris vali Div või Section, kuhu soovid komponenti lisada.
  2. Paremast paneelist klõpsa </> Embed ikoonil (või lisa HTML Embed element Add paneelist).
  3. Kleebi komponendi HTML, näiteks:
    <wink-content-loader
    layout="RANKED"
    id="YOUR_LAYOUT_ID"
    ></wink-content-loader>
  4. Klõpsa Save & Close.

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

  1. Ava sihtlehe Page Settings (hammasratta ikoon Pages paneelis).
  2. Kerige alla Custom Code → Before </body> tag.
  3. Kleebi sama skript ja rakenduse laadija nagu eespool.
  4. Salvesta lehe seaded.
KomponentHTML siltEesmä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.