HubSpot CMS

A HubSpot CMS támogatja az egyedi HTML modulokat és az egész webhelyre kiterjedő fejléc/lábléc kódot, így egyszerűen beágyazhatók Wink komponensek marketing oldalakra és céloldalakra.

Wink szkriptek betöltése az egész webhelyen

A HubSpotban lépjen a Marketing → Fájlok és sablonok → Tervező eszközök menüpontra.
Nyissa meg az aktív téma main.css fájlját, vagy használja a globális tartalombeállításokat.
Alternatívaként lépjen a Beállítások → Webhely → Oldalak → Egyedi kód menüpontra.

A Fejléc HTML mezőbe illessze be a stíluslapot:

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

A Lábléc HTML mezőbe illessze be a szkriptet és az alkalmazás betöltőt (cserélje ki a YOUR_CLIENT_ID értéket):

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

Mentse el és tegye közzé.

Komponens hozzáadása egyedi HTML modulon keresztül

A Tervező eszközökben hozzon létre egy új modult típus szerint Rich Text vagy HTML.

A modul alapértelmezett tartalmába illessze be a komponens HTML-jét:

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

Mentse el a modult, majd húzza be bármely oldal sablonjába vagy oldalra az oldal szerkesztővel.

Komponens közvetlen hozzáadása az oldal szerkesztőben

Ha nem szeretne modult létrehozni, használhat egy Egyedi HTML szekciót a drag-and-drop szerkesztőben:

Nyissa meg az oldalt a HubSpot oldal szerkesztőben.
Kattintson az Hozzáadás gombra, és válasszon egy Egyedi HTML vagy Beágyazás szekciót.
Illessze be a komponens taget a HTML mezőbe.
Kattintson az Alkalmaz gombra, majd tegye közzé az oldalt.

Elérhető komponensek

Komponens	HTML tag	Cél
Tartalom betöltő	`<wink-content-loader>`	Szállodakártyák, rácsok, térképek megjelenítése
Keresés	`<wink-lookup>`	Úti cél keresőmező
Kereső gomb	`<wink-search-button>`	Útvonalválasztó megnyitása
Fiók gomb	`<wink-account-button>`	Bejelentkezés / felhasználói menü
Útvonal gomb	`<wink-itinerary-button>`	Aktuális útvonal megjelenítése
Útvonal választó	`<wink-itinerary-picker>`	Teljes útvonal űrlap
Bevásárlókosár	`<wink-shopping-cart-button>`	Kosár összegző gomb

A teljes attribútumreferenciáért lásd a Web Components oldalt.