HubSpot CMS

HubSpot CMS unterstützt benutzerdefinierte HTML-Module sowie siteweite Header-/Footer-Codes, was das Einbetten von Wink-Komponenten auf Marketingseiten und Landingpages einfach macht.

Wink-Skripte siteweit laden

Gehen Sie in HubSpot zu Marketing → Dateien und Vorlagen → Design-Tools.
Öffnen Sie die main.css Ihres aktiven Themes oder verwenden Sie die globalen Inhaltseinstellungen.
Alternativ gehen Sie zu Einstellungen → Website → Seiten → Benutzerdefinierter Code.

Fügen Sie im Feld Head HTML das Stylesheet hinzu:

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

Fügen Sie im Feld Footer HTML das Skript und den Anwendungs-Loader hinzu (ersetzen Sie 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>

Speichern und veröffentlichen.

Komponente über ein benutzerdefiniertes HTML-Modul hinzufügen

Erstellen Sie in den Design-Tools ein neues Modul vom Typ Rich Text oder HTML.

Fügen Sie im Standardinhalt des Moduls den Komponenten-HTML-Code ein:

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

Speichern Sie das Modul und ziehen Sie es in eine beliebige Seitenschablone oder Seite im Seiteneditor.

Komponente direkt im Seiteneditor hinzufügen

Wenn Sie kein Modul erstellen möchten, können Sie im Drag-and-Drop-Editor eine Benutzerdefinierte HTML-Sektion verwenden:

Öffnen Sie die Seite im HubSpot-Seiteneditor.
Klicken Sie auf Hinzufügen und wählen Sie eine Benutzerdefinierte HTML- oder Embed-Sektion.
Fügen Sie den Komponenten-Tag in das HTML-Feld ein.
Klicken Sie auf Übernehmen und veröffentlichen Sie die Seite.

Verfügbare Komponenten

Komponente	HTML-Tag	Zweck
Content Loader	`<wink-content-loader>`	Anzeige von Hotelkarten, Raster, Karten
Lookup	`<wink-lookup>`	Suchleiste für Reiseziele
Suchbutton	`<wink-search-button>`	Öffnet den Reiseplan-Auswähler
Account-Button	`<wink-account-button>`	Anmeldung / Benutzermenü
Reiseplan-Button	`<wink-itinerary-button>`	Zeigt den aktuellen Reiseplan
Reiseplan-Auswähler	`<wink-itinerary-picker>`	Vollständiges Reiseplanformular
Warenkorb	`<wink-shopping-cart-button>`	Warenkorb-Zusammenfassungsknopf

Siehe Web Components für die vollständige Attributreferenz.