Store Locator in Webflow einbinden

Q: Lädt die Karte die Seite langsamer?

Der Code nutzt loading="lazy". Die Karte wird erst geladen, wenn sie in den sichtbaren Bereich kommt.

Was Sie bekommen

Eine Standortkarte mit Liste, Suche und Filtern, die sich in Ihr Webflow-Layout einfügt. Die Standorte verwalten Sie in My Store Locator, Webflow liefert nur den Rahmen.

Voraussetzungen

Ein Konto bei My Store Locator (kostenlos registrieren)
Eine veröffentlichte Karte (Status „Live“)
Der Einbettungscode aus dem Embed Studio der App
Ein bezahlter Webflow-Site-Plan – das Element „Code Embed“ steht erst damit zur Verfügung

Schritt für Schritt

Kopieren Sie in der App im Embed Studio den Code (Reiter Webflow oder iframe).
Ziehen Sie im Webflow-Designer das Element Code Embed aus dem Add-Panel auf die Seite.
Fügen Sie den Code ein und bestätigen Sie mit Save & Close.
Veröffentlichen Sie die Seite. Die Karte ist nur auf der veröffentlichten Seite sichtbar.

<iframe src="https://app.my-store-locator.com/#/m/IHR-TOKEN" title="Standortkarte" style="width:100%;height:640px;border:0;max-width:100%" loading="lazy" allow="geolocation"></iframe>

Setzen Sie das Code-Embed am besten in einen Container oder eine Section mit der gewünschten Breite. Die Karte füllt dann genau diesen Bereich.

Template wechseln, Code behalten

Der Code enthält einen festen Token. Wenn Sie in der App das Template, die Farben oder die Schrift ändern, müssen Sie in Webflow nichts neu veröffentlichen.

Datenschutz: Zwei-Klick-Lösung

Aktivieren Sie im Embed Studio „Karte erst nach Klick laden (DSGVO)“. Der Code zeigt dann zuerst einen Platzhalter mit Datenschutzhinweis, die Karte lädt erst nach Klick auf „Karte laden“. Ersetzen Sie den Code im Code-Embed durch die neue Fassung.

Höhe und mobile Darstellung

Die Breite passt sich dem umgebenden Element an. Die Höhe stellen Sie im Embed Studio ein. Prüfen Sie in Webflow die Breakpoints für Tablet und Smartphone – auf kleinen Bildschirmen kann eine geringere Höhe oder das Template „Mobile Sheet“ angenehmer sein.

Wenn die Karte nicht erscheint

Nur ein Platzhalter im Designer: Das ist normal. Webflow zeigt eingebetteten Code im Designer nicht vollständig an. Veröffentlichen Sie die Seite und prüfen Sie sie dort.
„Karte nicht verfügbar“: Die Karte ist noch ein Entwurf und muss in der App veröffentlicht werden.
Content Security Policy: Falls Sie eigene Sicherheits-Header setzen, muss frame-src die Domain app.my-store-locator.com erlauben.

Mehr dazu in der Hilfe zum Einbetten.

FAQ

Geht das auch ohne bezahlten Webflow-Plan?

Das Element „Code Embed“ setzt einen bezahlten Site-Plan voraus. Alternativ können Sie die Karte per Link oder QR-Code teilen, die Sie ebenfalls im Embed Studio finden.

Kann ich die Karte in einer CMS-Collection-Seite nutzen?

Ja, ein Code-Embed lässt sich auch in Vorlagen einsetzen. Dann zeigt jede Seite dieser Vorlage dieselbe Karte.

Lädt die Karte die Seite langsamer?

Der Code nutzt loading="lazy". Die Karte wird erst geladen, wenn sie in den sichtbaren Bereich kommt.