Webflow

Webflow תומך בקוד HTML ו-JavaScript מותאם אישית בשלושה מקומות: ה-<head> באתר כולו, ה-</body> באתר כולו, ובהטמעות קוד לכל אלמנט בנפרד. זה מקל על שילוב רכיבי הווב של Wink.

טעינת סקריפטים של Wink באתר כולו

ב-Webflow Designer, פתח את Project Settings → Custom Code.
בקטגוריית Head Code, הוסף את גיליון הסגנונות:
```
<link rel="stylesheet" href="https://elements.wink.travel/styles.css">
```

בקטגוריית Footer Code, הוסף את הסקריפט וטוען האפליקציה (החלף את 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>

לחץ על Save Changes.

הוספת רכיב לאלמנט ספציפי

ב-Designer, בחר את ה-Div או ה-Section שבו תרצה את הרכיב.
בפאנל הימני, לחץ על סמל </> Embed (או הוסף אלמנט HTML Embed מפאנל ההוספה).

הדבק את קוד ה-HTML של הרכיב, לדוגמה:

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

לחץ על Save & Close.

קוד מותאם אישית לעמוד ספציפי

אם אתה צריך את Wink רק בעמודים מסוימים, השתמש בהזרקת קוד לעמוד במקום באתר כולו:

פתח את Page Settings של העמוד הרצוי (סמל גלגל שיניים בפאנל העמודים).
גלול ל-Custom Code → Before </body> tag.
הדבק את אותו הסקריפט וטוען האפליקציה כמו למעלה.
שמור את הגדרות העמוד.

רכיבים זמינים

רכיב	תג HTML	מטרה
Content loader	`<wink-content-loader>`	הצגת כרטיסי מלונות, רשתות, מפות
Lookup	`<wink-lookup>`	שורת חיפוש ליעדים
Search button	`<wink-search-button>`	פתיחת בורר מסלול
Account button	`<wink-account-button>`	כניסה / תפריט משתמש
Itinerary button	`<wink-itinerary-button>`	הצגת המסלול הנוכחי
Itinerary picker	`<wink-itinerary-picker>`	טופס מסלול מלא
Shopping cart	`<wink-shopping-cart-button>`	כפתור סיכום עגלה

ראה Web Components למידע מלא על התכונות.