Hoppa till innehåll

Webflow

Webflow stödjer anpassad HTML och JavaScript på tre platser: i hela webbplatsens <head>, i hela webbplatsens </body>, och per-element kodinbäddningar. Detta gör integrationen av Wink webbkomponenter enkel.

  1. I Webflow Designer, öppna Project Settings → Custom Code.
  2. I sektionen Head Code, lägg till stylesheet:
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css">
  3. I sektionen Footer Code, lägg till skriptet och applikationsladdaren (byt ut 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. Klicka på Save Changes.

Lägg till en komponent i ett specifikt element

Section titled “Lägg till en komponent i ett specifikt element”
  1. I Designer, välj den Div eller Section där du vill ha komponenten.
  2. I högra panelen, klicka på ikonen </> Embed (eller lägg till ett HTML Embed-element från Add-panelen).
  3. Klistra in komponentens HTML, till exempel:
    <wink-content-loader
    layout="RANKED"
    id="YOUR_LAYOUT_ID"
    ></wink-content-loader>
  4. Klicka på Save & Close.

Om du bara behöver Wink på specifika sidor, använd kodinjektion per sida istället för för hela webbplatsen:

  1. Öppna Page Settings för målsidan (kugghjulsikonen i Pages-panelen).
  2. Scrolla till Custom Code → Before </body> tag.
  3. Klistra in samma skript och app-laddare som ovan.
  4. Spara sidinställningarna.
KomponentHTML-tagSyfte
Content loader<wink-content-loader>Visa hotellkort, rutnät, kartor
Lookup<wink-lookup>Sökruta för destinationer
Search button<wink-search-button>Öppna resplanväljare
Account button<wink-account-button>Logga in / användarmeny
Itinerary button<wink-itinerary-button>Visa aktuell resplan
Itinerary picker<wink-itinerary-picker>Fullständig resplanformulär
Shopping cart<wink-shopping-cart-button>Kundvagnssammanfattning knapp

Se Web Components för fullständig attributreferens.