Pāriet uz saturu

Webflow

Webflow atbalsta pielāgotu HTML un JavaScript trīs vietās: visā vietnē <head>, visā vietnē </body> un katram elementam atsevišķi. Tas padara Wink tīmekļa komponentu integrēšanu vienkāršu.

  1. Webflow Designer atveriet Project Settings → Custom Code.
  2. Head Code sadaļā pievienojiet stila lapu:
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css">
  3. Footer Code sadaļā pievienojiet skriptu un lietotnes ielādētāju (aizvietojiet 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. Noklikšķiniet uz Save Changes.
  1. Designer izvēlieties Div vai Section, kur vēlaties komponentu.
  2. Labajā panelī noklikšķiniet uz </> Embed ikonas (vai pievienojiet HTML Embed elementu no Add paneļa).
  3. Ielīmējiet komponenta HTML, piemēram:
    <wink-content-loader
    layout="RANKED"
    id="YOUR_LAYOUT_ID"
    ></wink-content-loader>
  4. Noklikšķiniet uz Save & Close.

Ja Wink nepieciešams tikai konkrētās lapās, izmantojiet koda injekciju katrai lapai, nevis visā vietnē:

  1. Atveriet mērķa lapas Page Settings (zobrata ikona Pages panelī).
  2. Ritiniet līdz Custom Code → Before </body> tag.
  3. Ielīmējiet to pašu skriptu un lietotnes ielādētāju kā augstāk.
  4. Saglabājiet lapas iestatījumus.
KomponentsHTML tagsMērķis
Content loader<wink-content-loader>Rādīt viesnīcu kartītes, režģus, kartes
Lookup<wink-lookup>Meklēšanas josla galamērķiem
Search button<wink-search-button>Atvērt maršruta izvēlni
Account button<wink-account-button>Pieslēgties / lietotāja izvēlne
Itinerary button<wink-itinerary-button>Rādīt pašreizējo maršrutu
Itinerary picker<wink-itinerary-picker>Pilna maršruta forma
Shopping cart<wink-shopping-cart-button>Groza kopsavilkuma poga

Skatīt Web Components pilnu atribūtu sarakstu.