דלגו לתוכן

HubSpot CMS

HubSpot CMS תומך במודולים מותאמים אישית של HTML ובקוד כותרת/תחתית לכל האתר, מה שהופך את ההטמעה של רכיבי Wink בדפי שיווק ודפי נחיתה לפשוטה.

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

ב-HubSpot, עבור אל Marketing → Files and Templates → Design Tools.
פתח את main.css של הנושא הפעיל שלך או השתמש בהגדרות התוכן הגלובלי.
לחלופין, עבור אל Settings → Website → Pages → Custom Code.

בשדה Head HTML, הוסף את גיליון הסגנונות:

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

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

שמור ופרסם.

הוספת רכיב דרך מודול HTML מותאם אישית

ב-Design Tools, צור מודול חדש מסוג Rich Text או HTML.
בתוכן ברירת המחדל של המודול, הדבק את קוד ה-HTML של הרכיב:
```
<wink-content-loader
  layout="HOTEL"
  id="YOUR_LAYOUT_ID"
></wink-content-loader>
```
שמור את המודול וגרור אותו לתבנית דף כלשהי או לדף באמצעות עורך הדפים.

הוספת רכיב ישירות בעורך הדפים

אם אתה מעדיף לא ליצור מודול, תוכל להשתמש בקטע Custom HTML בעורך הגרירה והשחרור:

פתח את הדף בעורך הדפים של HubSpot.
לחץ על Add ובחר בקטע Custom HTML או Embed.
הדבק את תג הרכיב בשדה ה-HTML.
לחץ על Apply ופרסם את הדף.

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

רכיב	תג 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 למידע מלא על התכונות.

קריאה נוספת