WORUM GEHT´S? Einleitung
Um Deinen Gästen die besten Informationen direkt auf den Gastgeber-Websites bereitzustellen, stellen wir Dir verschiedene Karten-Widgets zur Verfügung. Diese Widgets basieren auf unserer interaktiven Karte maps.kleinwalsertal.com und können einfach in jede Website integriert werden.
Die Integration erfolgt über den Contwise Web Component Code, den wir für unterschiedliche Anwendungsfälle bereitstellen. So kannst Du entweder die gesamte Karte anzeigen oder spezifische Themen wie Tourensuche, Infrastruktur oder Shopping hervorheben.
Die technische Basis und alle verfügbaren Parameter sind in der offiziellen Dokumentation von General Solutions beschrieben (Dokumentation Contwise Web Component).
Damit Du nicht in die Tiefe der technischen Doku einsteigen musst, zeigen wir Dir hier die wichtigsten Codeschnipsel und Beispiele.
Widgets-Erklärvideo
einmal alles bitte! Einbindung der gesamten Karte (Root-Ebene)
Die gesamte Karte ohne Vorauswahl einer Kategorie lässt sich mit folgendem Code in die eigene Website einfügen:
<script defer src="https://maps.kleinwalsertal.com/webcomponent.bundle.js" charset="UTF-8"></script>
<contwise-maps
apikey="kleinwalsertal"
language="de"
showsheet="true"
showmaptopcontrols="true"
showmapbottomcontrols="true"
style="display:block; height:650px; width:100%;"
></contwise-maps>
👉 Beispiel ansehen: Karte-Widget
ERKLÄRUNG DER WICHTIGSTEN PARAMETER
- apikey=“kleinwalsertal” → stellt sicher, dass die Karte mit unseren Daten geladen wird.
- language=“de” → legt die Sprache der Karte fest.
- showsheet=“true” → aktiviert die Benutzeroberfläche mit Kategorien und Filtermöglichkeiten.
- showmaptopcontrols=“true” / showmapbottomcontrols=“true” → blendet Navigations- und Steuerungselemente der Karte ein.
- style=“height:650px; width:100%” → definiert die Größe der eingebetteten Karte, hier 650px hoch und volle Breite.
Damit erhältst Du eine vollwertige Karte mit allen Funktionen, die auch auf unserer Hauptkarte sichtbar sind.
Für einzelne Kategorien Code direkt aus der Karte übernehmen
Unter jeder Kategorie in unserer Karte (maps.kleinwalsertal.com) findest Du unten den Hinweis "Liste einbinden".
Mit einem Klick darauf öffnet sich der Code-Editor "Inhalte einbinden". Dort stellst Du Dein Widget ein und lässt Dir den passenden Einbettungs-Code generieren – diesen Code kopierst Du anschließend 1:1 in den Editor Deiner Website (z. B. Pimcore, WordPress, TYPO3 etc.).
Was lässt sich einstellen?
- Ansicht: Karte + Galerie, nur Galerie (Listen/Kachelansicht) oder nur Karte.
- Zeige zuerst: Entscheide, ob auf Deiner Seite zuerst die Karte oder die Galerie sichtbar sein soll.
- Filter/Suche: Filterleiste und Suche anzeigen oder ausblenden.
- Themenfarbe: Hex-Farbwert für Akzente (z. B. #B41D28).
- Höhe der Karte: Höhe in px festlegen (responsiv empfohlen: min. 600–700 px).
- Elemente in der Galerie: Anzahl der Kacheln/Listen-Einträge, die initial geladen werden.
- Scrolloffset (fixed header): Pixel-Versatz, wenn Deine Seite einen fixen Header hat (verhindert „unter den Header scrollen“).
- Sortierung: standard (geschlossen), oder offen/geschlossen für den Startzustand der Kategorien.
MEHR INFOS FÜR DICH Weitere Hinweise
Platzierung auf der Website
- Das Widget kann in beliebigen Inhaltsbereichen eingebunden werden (z. B. Unterseite "Sommeraktivitäten", "Infrastruktur", "Shopping").
- Achte darauf, dass der Bereich breit genug ist – ideal ist eine volle Seitenbreite.
Mobile Optimierung
- Die Karte und die Galerie sind voll responsive und passen sich automatisch an.
- Empfohlene Höhe: mindestens 600 px, auf mobilen Geräten skaliert das Widget entsprechend.
Performance & Ladezeit
- Das Script webcomponent.bundle.js nur einmal pro Seite einbinden. Wenn mehrere Widgets auf einer Seite stehen, genügt ein einziges Script am Anfang.
- Viele Elemente (z. B. alle Touren) können beim ersten Laden etwas Ladezeit brauchen – das ist normal.
Filter & Kategorien
- Du kannst gezielt eine Kategorie einbinden (z. B. nur "Gastronomie" oder "Touren").
- Über die Einstellung Filter anzeigen erhalten Deine Gäste dann direkt eine Such- und Filtermöglichkeit.
Farb- und Design-Anpassung
- Mit dem Parameter themecolor lässt sich das Widget an Dein Corporate Design anpassen.
- Empfehlung: Kontrast prüfen (z. B. weiße Schrift auf rotem Hintergrund).
Usability-Tipp für Gäste
- Der Button "Vollbild öffnen" leitet direkt in die große Karte auf maps.kleinwalsertal.com weiter. Das ist besonders hilfreich, wenn Gäste detailliert stöbern wollen.
Technische Voraussetzungen
- Keine speziellen Plugins nötig – das Widget läuft mit einem einfachen <script>- und <contwise-maps>-Tag.
- Falls die Website ein Content Security Policy (CSP) aktiviert hat, muss maps.kleinwalsertal.com in script-src und frame-src freigegeben sein.
DEIN ANSPRECHPARTNER
Christian Knips
Senior Projekt Manager
📞 +43 5517 5114 435
📧 christian.knips@kleinwalsertal.com