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.

Ielādēt Wink skriptus visā vietnē

Webflow Designer atveriet Project Settings → Custom Code.

Head Code sadaļā pievienojiet stila lapu:

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

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>

Noklikšķiniet uz Save Changes.

Pievienot komponentu konkrētam elementam

Designer izvēlieties Div vai Section, kur vēlaties komponentu.
Labajā panelī noklikšķiniet uz </> Embed ikonas (vai pievienojiet HTML Embed elementu no Add paneļa).

Ielīmējiet komponenta HTML, piemēram:

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

Noklikšķiniet uz Save & Close.

Pielāgots kods katrai lapai

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

Atveriet mērķa lapas Page Settings (zobrata ikona Pages panelī).
Ritiniet līdz Custom Code → Before </body> tag.
Ielīmējiet to pašu skriptu un lietotnes ielādētāju kā augstāk.
Saglabājiet lapas iestatījumus.

Pieejamie komponenti

Komponents	HTML tags	Mē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.