Skip to content

HubSpot CMS

HubSpot CMS podržava prilagođene HTML module i kod za zaglavlje/podnožje koji važe za ceo sajt, što olakšava ugradnju Wink komponenti na marketinške stranice i landing stranice.

  1. U HubSpot-u, idite na Marketing → Files and Templates → Design Tools.
  2. Otvorite aktivnu temu i fajl main.css ili koristite globalna podešavanja sadržaja.
  3. Alternativno, idite na Settings → Website → Pages → Custom Code.
  4. U polje Head HTML dodajte stilsku datoteku:
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css">
  5. U polje Footer HTML dodajte skriptu i učitavač aplikacije (zamenite 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. Sačuvajte i objavite.

Dodajte komponentu preko prilagođenog HTML modula

Section titled “Dodajte komponentu preko prilagođenog HTML modula”
  1. U Design Tools kreirajte novi modul tipa Rich Text ili HTML.
  2. U podrazumevani sadržaj modula nalepite HTML komponente:
    <wink-content-loader
    layout="HOTEL"
    id="YOUR_LAYOUT_ID"
    ></wink-content-loader>
  3. Sačuvajte modul i prevucite ga u bilo koji šablon stranice ili stranicu koristeći editor stranice.

Dodajte komponentu direktno u editor stranice

Section titled “Dodajte komponentu direktno u editor stranice”

Ako ne želite da kreirate modul, možete koristiti sekciju Custom HTML u drag-and-drop editoru:

  1. Otvorite stranicu u HubSpot editoru stranice.
  2. Kliknite na Add i izaberite sekciju Custom HTML ili Embed.
  3. Nalepite tag komponente u HTML polje.
  4. Kliknite na Apply i objavite stranicu.
KomponentaHTML tagNamena
Content loader<wink-content-loader>Prikaz hotelskih kartica, mreža, mapa
Lookup<wink-lookup>Pretraživač destinacija
Search button<wink-search-button>Otvaranje izbora itinerera
Account button<wink-account-button>Prijava / korisnički meni
Itinerary button<wink-itinerary-button>Prikaz trenutnog itinerera
Itinerary picker<wink-itinerary-picker>Kompletan formular itinerera
Shopping cart<wink-shopping-cart-button>Dugme za pregled korpe

Pogledajte Web Components za kompletnu referencu atributa.