Webflow

Webflow, özel HTML ve JavaScript’i üç yerde destekler: site genelinde <head>, site genelinde </body> ve her öğe için kod gömme. Bu, Wink web bileşenlerinin entegrasyonunu kolaylaştırır.

Wink scriptlerini site genelinde yükleyin

Webflow Designer’da Project Settings → Custom Code bölümünü açın.

Head Code bölümüne stil sayfasını ekleyin:

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

Footer Code bölümüne script ve uygulama yükleyicisini ekleyin (YOUR_CLIENT_ID ile değiştirin):

<script src="https://elements.wink.travel/elements.js" type="module" defer></script>
<wink-app-loader client-id="YOUR_CLIENT_ID"></wink-app-loader>

Save Changes butonuna tıklayın.

Belirli bir öğeye bileşen ekleyin

Designer’da bileşeni eklemek istediğiniz Div veya Section öğesini seçin.
Sağ panelde </> Embed simgesine tıklayın (veya Add panelinden bir HTML Embed öğesi ekleyin).

Bileşen HTML’sini yapıştırın, örneğin:

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

Save & Close butonuna tıklayın.

Sayfa bazında özel kod

Sadece belirli sayfalarda Wink kullanmanız gerekiyorsa, site genelinde değil sayfa bazında kod enjeksiyonu yapın:

Hedef sayfanın Page Settings bölümünü açın (Pages panelindeki dişli simgesi).
Custom Code → Before </body> tag kısmına gidin.
Yukarıdaki script ve uygulama yükleyicisini yapıştırın.
Sayfa ayarlarını kaydedin.

Mevcut bileşenler

Bileşen	HTML etiketi	Amaç
Content loader	`<wink-content-loader>`	Otel kartları, ızgaralar, haritalar gösterir
Lookup	`<wink-lookup>`	Varış noktaları için arama çubuğu
Search button	`<wink-search-button>`	Seyahat planlayıcıyı açar
Account button	`<wink-account-button>`	Giriş / kullanıcı menüsü
Itinerary button	`<wink-itinerary-button>`	Mevcut seyahat planını gösterir
Itinerary picker	`<wink-itinerary-picker>`	Tam seyahat planı formu
Shopping cart	`<wink-shopping-cart-button>`	Sepet özeti butonu

Tam özellik referansı için Web Components sayfasına bakın.