Webflow

Webflow unterstützt benutzerdefiniertes HTML und JavaScript an drei Stellen: im siteweiten <head>, im siteweiten </body> und in Code-Embeds pro Element. Dadurch ist die Integration der Wink Web-Komponenten unkompliziert.

Wink-Skripte siteweit laden

Öffnen Sie im Webflow Designer Project Settings → Custom Code.

Fügen Sie im Abschnitt Head Code das Stylesheet hinzu:

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

Fügen Sie im Abschnitt Footer Code 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>

Klicken Sie auf Save Changes.

Komponente zu einem bestimmten Element hinzufügen

Wählen Sie im Designer das Div oder die Section aus, in der die Komponente erscheinen soll.
Klicken Sie im rechten Bereich auf das </> Embed-Symbol (oder fügen Sie ein HTML Embed-Element aus dem Add-Panel hinzu).

Fügen Sie den HTML-Code der Komponente ein, zum Beispiel:

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

Klicken Sie auf Save & Close.

Seitenbezogener benutzerdefinierter Code

Wenn Sie Wink nur auf bestimmten Seiten benötigen, verwenden Sie die seitenbezogene Code-Einbindung anstelle der siteweiten:

Öffnen Sie die Page Settings der Zielseite (Zahnrad-Symbol im Pages-Panel).
Scrollen Sie zu Custom Code → Before </body> tag.
Fügen Sie das gleiche Skript und den App-Loader wie oben ein.
Speichern Sie die Seiteneinstellungen.

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 Reiseplan-Formular
Warenkorb	`<wink-shopping-cart-button>`	Warenkorb-Zusammenfassung

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