Pāriet uz saturu

HubSpot CMS

HubSpot CMS atbalsta pielāgotus HTML moduļus un vietnes līmeņa galvenes/kājene koda ievadi, padarot vienkāršu Wink komponentu iegulšanu mārketinga lapās un galvenajās lapās.

  1. HubSpot dodieties uz Marketing → Files and Templates → Design Tools.
  2. Atveriet sava aktīvā tēmas main.css vai izmantojiet globālos satura iestatījumus.
  3. Alternatīvi, dodieties uz Settings → Website → Pages → Custom Code.
  4. Laukā Head HTML pievienojiet stila lapu:
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css">
  5. Laukā Footer HTML pievienojiet skriptu un lietotnes ielādētāju (aizvietojiet 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. Saglabājiet un publicējiet.

Pievienot komponentu, izmantojot pielāgotu HTML moduli

Section titled “Pievienot komponentu, izmantojot pielāgotu HTML moduli”
  1. Design Tools izveidojiet jaunu moduli ar tipu Rich Text vai HTML.
  2. Moduļa noklusējuma saturā ielīmējiet komponenta HTML:
    <wink-content-loader
    layout="HOTEL"
    id="YOUR_LAYOUT_ID"
    ></wink-content-loader>
  3. Saglabājiet moduli un velciet to jebkurā lapas veidnē vai lapā, izmantojot lapas redaktoru.

Pievienot komponentu tieši lapas redaktorā

Section titled “Pievienot komponentu tieši lapas redaktorā”

Ja nevēlaties izveidot moduli, varat izmantot Custom HTML sadaļu vilkšanas un nomešanas redaktorā:

  1. Atveriet lapu HubSpot lapas redaktorā.
  2. Noklikšķiniet uz Add un izvēlieties Custom HTML vai Embed sadaļu.
  3. Ielīmējiet komponenta tagu HTML laukā.
  4. Noklikšķiniet uz Apply un publicējiet lapu.
KomponentsHTML tagsMērķis
Satura ielādētājs<wink-content-loader>Rāda viesnīcu kartītes, režģus, kartes
Meklēšana<wink-lookup>Meklēšanas josla galamērķiem
Meklēšanas poga<wink-search-button>Atver maršruta izvēlētāju
Konta poga<wink-account-button>Pieslēgšanās / lietotāja izvēlne
Maršruta poga<wink-itinerary-button>Rāda pašreizējo maršrutu
Maršruta izvēlētājs<wink-itinerary-picker>Pilna maršruta forma
Iepirkumu groza poga<wink-shopping-cart-button>Groza kopsavilkuma poga

Skatiet Web Components pilnu atribūtu atsauci.