Karte einbetten

Das Embed Studio

Sie finden es in der App unter Embed Studio. Wählen Sie oben die Karte aus. Daneben sehen Sie, ob sie Live ist oder noch ein Entwurf – Entwürfe sind öffentlich nicht erreichbar.

Links stellen Sie die Einbettung ein, rechts kopieren Sie den Code und sehen eine Live-Vorschau. Speichern Sie Ihre Einstellungen mit Speichern.

Einstellungen

• Breite und Höhe: z. B. 100% und 640px. Für die Höhe gibt es Schnellwahl-Buttons (480, 640, 800 px).
• Sprache: Deutsch oder Englisch. Das betrifft Buttons, Filter, Öffnungszeiten und den Text der Zwei-Klick-Lösung.
• Darstellung dieser Einbettung: Akzentfarbe, Schrift, Ecken, Kartenstil und Dichte. Leer bedeutet: wie in der Karte eingestellt. So passt dieselbe Karte auf verschiedene Websites.
• „Powered by“ anzeigen: kleiner Hinweis auf my-store-locator.com. Ab dem Plan Pro abschaltbar.
• Lazy Loading: Die Karte lädt erst, wenn sie in den sichtbaren Bereich scrollt.
• Karte erst nach Klick laden (DSGVO): die Zwei-Klick-Lösung, siehe unten.
• Erlaubte Websites: Domains, auf denen die Karte eingebettet werden soll.

Variante 1: iframe

Der iframe funktioniert in praktisch jedem CMS und Baukasten. Fügen Sie ihn dort ein, wo die Karte erscheinen soll.

<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>

allow="geolocation" erlaubt die Funktion „Mein Standort“. Der Browser fragt Besucher vorher um Erlaubnis.

Variante 2: JavaScript-Widget

Das Widget besteht aus einem Platzhalter und einem Script:

<div id="mystorelocator" data-token="IHR-TOKEN" data-height="640px" data-lang="de" data-consent="true"></div>
<script src="https://app.my-store-locator.com/widget.js" async defer></script>

Wenn Sie Farbe, Schrift oder Kartenstil pro Website anpassen möchten, nutzen Sie am besten den iframe-Code mit den URL-Parametern unten.

Zwei-Klick-Lösung (Einwilligungsmodus)

Mit „Karte erst nach Klick laden (DSGVO)“ sehen Besucher statt der Karte zuerst einen Platzhalter mit diesem Hinweis:

Erst nach Klick auf „Karte laden“ wird die Karte geladen. Der Button nutzt Ihre Akzentfarbe. Nach dem Einschalten ändert sich der Code – kopieren Sie ihn neu.

Ob Sie die Zwei-Klick-Lösung brauchen, hängt von Ihrer Website und Ihrem Consent-Konzept ab. Hintergründe finden Sie im Ratgeber Store Locator und DSGVO und unter DSGVO & Sicherheit.

URL-Parameter

Die Einstellungen der Einbettung werden als Parameter an die Karten-Adresse gehängt. Das Embed Studio erzeugt sie automatisch; Sie können sie aber auch selbst setzen.

Beispiel:

https://app.my-store-locator.com/#/m/IHR-TOKEN?lang=en&color=1f6fd1&style=dark

Erlaubte Websites

Unter Erlaubte Websites können Sie in der App festlegen, auf welchen Domains Ihre Karte eingebunden werden soll, z. B. www.ihre-firma.de. So behalten Sie den Überblick, wo Ihre Karte im Einsatz ist.

Tragen Sie die Domain genau so ein, wie Ihre Website aufgerufen wird – mit oder ohne „www“. Die Liste ist eine Angabe in Ihrem Konto; sie verhindert derzeit nicht technisch, dass der Einbettungscode auf anderen Websites verwendet wird.

Template wechseln, Code behalten

Jede Karte hat einen festen Token. Wenn Sie das Template, die Farben oder die Standorte ändern, bleibt der Code gleich. Eingebettete Karten übernehmen das neue Aussehen automatisch.

Link und QR-Code

Im Reiter Link & QR finden Sie die direkte Adresse der Karte zum Kopieren oder Öffnen. Dazu gibt es einen QR-Code, den Sie als SVG herunterladen können – z. B. für Flyer, Visitenkarten oder das Schaufenster. Beim Scannen öffnet sich die Karte direkt auf dem Smartphone.

Anleitungen für einzelne Systeme

Schritt für Schritt für WordPress, Shopify, Wix, Webflow, Jimdo und HTML. Ein WordPress-Plugin mit Shortcode ist in Vorbereitung.

Fehlersuche

• „Karte nicht verfügbar“: Die Karte ist ein Entwurf oder wurde gelöscht.
• Leere Fläche im Editor: Viele Editoren zeigen iframes nicht in der Vorschau. Prüfen Sie die veröffentlichte Seite.
• Content Security Policy: Erlauben Sie app.my-store-locator.com unter frame-src (und für das Widget unter script-src).
• Karte abgeschnitten: Der umgebende Container ist niedriger als die eingestellte Höhe.