HubSpot CMS

HubSpot CMS podporuje vlastní HTML moduly a kód hlavičky/patičky pro celý web, což usnadňuje vložení komponent Wink na marketingové stránky a vstupní stránky.

Načtení skriptů Wink pro celý web

V HubSpotu přejděte na Marketing → Soubory a šablony → Nástroje pro návrh.
Otevřete aktivní téma main.css nebo použijte globální nastavení obsahu.
Alternativně přejděte na Nastavení → Web → Stránky → Vlastní kód.

Do pole Head HTML přidejte stylopis:

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

Do pole Footer HTML přidejte skript a načítač aplikace (nahraďte 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>

Uložte a publikujte.

Přidání komponenty pomocí vlastního HTML modulu

V Nástrojích pro návrh vytvořte nový modul typu Rich Text nebo HTML.

Do výchozího obsahu modulu vložte HTML komponenty:

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

Uložte modul a přetáhněte ho do libovolné šablony stránky nebo stránky pomocí editoru stránek.

Přidání komponenty přímo v editoru stránek

Pokud nechcete vytvářet modul, můžete použít sekci Custom HTML v editoru drag-and-drop:

Otevřete stránku v editoru HubSpot.
Klikněte na Přidat a vyberte sekci Custom HTML nebo Embed.
Vložte značku komponenty do pole HTML.
Klikněte na Použít a publikujte stránku.

Dostupné komponenty

Komponenta	HTML značka	Účel
Content loader	`<wink-content-loader>`	Zobrazení hotelových karet, mřížek, map
Lookup	`<wink-lookup>`	Vyhledávací lišta pro destinace
Search button	`<wink-search-button>`	Otevření výběru itineráře
Account button	`<wink-account-button>`	Přihlášení / uživatelské menu
Itinerary button	`<wink-itinerary-button>`	Zobrazení aktuálního itineráře
Itinerary picker	`<wink-itinerary-picker>`	Kompletní formulář itineráře
Shopping cart	`<wink-shopping-cart-button>`	Tlačítko souhrnu košíku

Podívejte se na Web Components pro úplný přehled atributů.