Squarespace

Squarespace unterstützt benutzerdefiniertes HTML und JavaScript, was bedeutet, dass Sie jede Wink-Webkomponente direkt in Ihre Website einbetten können, ohne ein Plugin zu benötigen. Diese Anleitung zeigt Ihnen, wie Sie die Wink-Skripte siteweit laden und dann Komponenten auf einzelnen Seiten platzieren.

Wink-Skripte siteweit laden

Das Hinzufügen der Skripte zum globalen Footer und Header Ihrer Website bedeutet, dass Wink auf jeder Seite verfügbar ist, ohne die Einrichtung zu wiederholen.

Gehen Sie im Squarespace-Editor zu Einstellungen → Erweitert → Code Injection.

Fügen Sie im Feld Header das Stylesheet hinzu:

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

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

Klicken Sie auf Speichern.

Eine Komponente zu einer Seite hinzufügen

Sobald die Skripte global geladen sind, können Sie jede Wink-Komponente mit einem Code Block auf jeder Seite einfügen.

Öffnen Sie die Seite, die Sie bearbeiten möchten.
Klicken Sie auf Bearbeiten und fügen Sie an der gewünschten Stelle einen neuen Code-Block hinzu.

Fügen Sie das HTML der Komponente ein, zum Beispiel einen Content Loader:

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

Klicken Sie auf Anwenden und dann auf Speichern.

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
Konto-Button	`<wink-account-button>`	Anmeldung / Benutzermenü
Reiseplan-Button	`<wink-itinerary-button>`	Zeigt den aktuellen Reiseplan an
Reiseplan-Auswähler	`<wink-itinerary-picker>`	Vollständiges Reiseplan-Formular
Einkaufswagen	`<wink-shopping-cart-button>`	Zusammenfassung des Warenkorbs

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