HubSpot CMS

HubSpot CMS stödjer anpassade HTML-moduler och kod för header/footer som gäller för hela webbplatsen, vilket gör det enkelt att bädda in Wink-komponenter på marknadsföringssidor och landningssidor.

Ladda Wink-skript för hela webbplatsen

Gå i HubSpot till Marketing → Files and Templates → Design Tools.
Öppna ditt aktiva themes main.css eller använd de globala innehållsinställningarna.
Alternativt, gå till Settings → Website → Pages → Custom Code.

I fältet Head HTML, lägg till stylesheet:

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

I fältet Footer HTML, lägg till skriptet och applikationsladdaren (byt ut 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>

Spara och publicera.

Lägg till en komponent via en anpassad HTML-modul

Skapa i Design Tools en ny modul av typen Rich Text eller HTML.

Klistra in komponentens HTML i modulens standardinnehåll:

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

Spara modulen och dra in den i valfri sidmall eller sida med sidredigeraren.

Lägg till en komponent direkt i sidredigeraren

Om du föredrar att inte skapa en modul kan du använda en Custom HTML-sektion i drag-och-släpp-redigeraren:

Öppna sidan i HubSpot sidredigerare.
Klicka på Add och välj en Custom HTML- eller Embed-sektion.
Klistra in komponenttaggen i HTML-fältet.
Klicka på Apply och publicera sidan.

Tillgängliga komponenter

Komponent	HTML-tag	Syfte
Content loader	`<wink-content-loader>`	Visa hotellkort, rutnät, kartor
Lookup	`<wink-lookup>`	Sökfält för destinationer
Search button	`<wink-search-button>`	Öppna resplanväljare
Account button	`<wink-account-button>`	Logga in / användarmeny
Itinerary button	`<wink-itinerary-button>`	Visa aktuell resplan
Itinerary picker	`<wink-itinerary-picker>`	Fullständig resplanformulär
Shopping cart	`<wink-shopping-cart-button>`	Kundvagnssammanfattning

Se Web Components för fullständig attributreferens.