Hoppa till innehåll

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.

  1. Gå i HubSpot till Marketing → Files and Templates → Design Tools.
  2. Öppna ditt aktiva themes main.css eller använd de globala innehållsinställningarna.
  3. Alternativt, gå till Settings → Website → Pages → Custom Code.
  4. I fältet Head HTML, lägg till stylesheet:
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css">
  5. 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>
  6. Spara och publicera.

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

Section titled “Lägg till en komponent via en anpassad HTML-modul”
  1. Skapa i Design Tools en ny modul av typen Rich Text eller HTML.
  2. Klistra in komponentens HTML i modulens standardinnehåll:
    <wink-content-loader
    layout="HOTEL"
    id="YOUR_LAYOUT_ID"
    ></wink-content-loader>
  3. Spara modulen och dra in den i valfri sidmall eller sida med sidredigeraren.

Lägg till en komponent direkt i sidredigeraren

Section titled “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:

  1. Öppna sidan i HubSpot sidredigerare.
  2. Klicka på Add och välj en Custom HTML- eller Embed-sektion.
  3. Klistra in komponenttaggen i HTML-fältet.
  4. Klicka på Apply och publicera sidan.
KomponentHTML-tagSyfte
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.