Website-Einbindung & Sicherheit
Binden Sie interaktive Karten auf Webflow, WordPress, Shopify, Next.js oder individuellen Websites ein. Schützen Sie Ihre visuellen Inhalte mit Domain-Whitelisting.
Installationsmethoden: Skript vs. Iframe
Layerpin bietet Ihnen zwei Installationsmethoden zum Veröffentlichen Ihrer interaktiven Karte auf jeder Website, jedem CMS oder jeder Webanwendung. Beide Methoden unterstützen flüssige Reaktionsfähigkeit, Multi-Touch-Pinch-to-Zoom und dynamische Containergrößenänderung:
Ein einzelnes selbstinitialisierendes Skript-Tag. Es misst automatisch die Containerbreite, verwaltet die dynamische Höhe des Ansichtsfensters und verhindert kumulative Layoutverschiebungen, ohne dass benutzerdefiniertes CSS erforderlich ist.
<script src="https://layerpin.com/embed.v1.js?map=emb_YOUR_MAP_ID&width=100%25&height=640px&minHeight=320px&border=none"></script>Standard-Sandbox-Iframe-Snippet. Ideal für strenge CMS-Umgebungen, Sandboxes von Drittanbietern und Plattformen, die externe JavaScript-Tags einschränken.
<iframe
src="https://layerpin.com/embed/emb_YOUR_MAP_ID"
title={t("Interactive map")}
loading="lazy"
referrerpolicy="strict-origin-when-cross-origin"
allow="fullscreen"
allowfullscreen
style="display:block;width:100%;height:640px;min-height:320px;border:0;"
></iframe>Direkter URL-Schutz
Der direkte Besuch der Einbettungs-URL in der Adressleiste eines Browsers ist konstruktionsbedingt blockiert. Layerpin erfordert einen verifizierten übergeordneten Ursprung, um die Karte sicher in einem autorisierten Einbettungscontainer darzustellen.
Höhenvoreinstellungen und reaktionsfähiges Layout
Die Einbettungsbreite wird immer erweitert, um 100 % des enthaltenen Blocks auszufüllen. Sie können aus vier vordefinierten Höhenvoreinstellungen auswählen oder benutzerdefinierte Abmessungen angeben:
Geeignet für Seitenleistenspalten, Produktdetail-Widgets und kompakte Blog-Einfügungen.
Der ausgewogene Standard für Landingpages, Leitfäden und Verzeichnislisten in voller Breite.
Konzipiert für mehrstöckige Architekturpläne, Campus-Touren und Schaltpläne mit hoher Dichte.
Füllt den gesamten Browser-Ansichtsbereich auf Mobilgeräten und Desktops aus, ideal für dedizierte Karten-Explorer-Anwendungen.
Lademodi und Viewer-Steuerelemente
Konfigurieren Sie, wie die eingebettete Karte geladen wird und welche Steuerelemente den Besuchern zur Verfügung stehen:
Faul (Standard): Defers map initialization until the visitor scrolls near the container, maximizing page speed scores. Erpicht: Wird beim ersten HTML-Parse für Heldenabschnitte sofort geladen.
Aktiviert eine Schaltfläche zum Erweitern im Vollbildmodus im Viewer. Besucher können die Karte über ihren gesamten Monitor erweitern, um sie genauer zu betrachten, ohne Ihre Website verlassen zu müssen.
Schalten Sie das Plattformzuordnungs-Badge im eingebetteten Viewer um. Bei kostenpflichtigen Plänen kann das Branding ausgeblendet werden, um eine nahtlose, vollständig weiß gekennzeichnete visuelle Präsentation zu ermöglichen.
Übergeben Sie einen Sprachabfrageparameter (z. B. ?lang=ja) im Iframe src to pre-select the locale on regional pages. Learn more in the Mehrsprachiger Leitfaden.
Zulässige Ursprünge und Domain-Whitelisting
Durch das Domain-Whitelisting wird sichergestellt, dass Ihre interaktiven Karten nur auf von Ihnen genehmigten Websites eingebettet werden können. Nicht autorisierte Domains, die versuchen, Ihre Karte mit einem Iframe zu versehen, erhalten eine Benachrichtigung, dass der Zugriff verweigert wurde.
Origin-Sicherheitsregeln
- HTTPS-Protokoll erforderlich: Embed origins require secure connections. Enter domains with or without protocol (e.g.,
https://mycompany.comormycompany.com). - Keine Pfade, Abfragen oder Hashes: Do not include subpaths or parameters (e.g., use
https://store.example.com, nothttps://store.example.com/map?view=1). - Wildcard-Subdomain-Matching (Premium): Add
https://*.mycompany.comto authorize all staging branches, regional microsites, and dynamic subdomains under a single origin rule. - Strenge Empfehlungsrichtlinie: Iframes must include
referrerpolicy="strict-origin-when-cross-origin"so the browser sends the parent origin header to our authorization validator.
Voraussetzungen zum Aktivieren der Einbettung
Die Karte muss sein veröffentlicht und es muss mindestens ein gültiger Ursprung aufgeführt sein, bevor die Website-Einbettung aktiviert werden kann.
Testkarten sind private Entwürfe und können erst dann öffentlich eingebettet werden, wenn ein aktiver Kartenplan ausgewählt wird.
Einbetten von ID-Widerruf und -Rotation
Wenn ein Einbettungscode versehentlich in ein öffentliches Code-Repository gelangt oder die Übergabe durch eine externe Agentur abgeschlossen ist, können Sie das Token sofort rotieren:
Klicken Sie in der Live-Statusleiste auf der rechten Seite der Seite „Einbettungskonfiguration“ auf ID neu generieren. Layerpin instantly creates a brand new unique embed token (e.g., emb_...).
Live-Vorschau für mehrere Geräte
Testen Sie das live eingebettete Erlebnis direkt in Ihrem Layerpin-Dashboard, bevor Sie Code auf Ihrer Produktionswebsite veröffentlichen:
Simuliert Standard-Desktop-Monitore und Breitbild-Ansichtsfenster.
Testet iPad- und Tablet-Layouts mit responsiven UI-Schubladen.
Überprüft Touch-Navigation, Popup-Blätter und Pinch-to-Zoom auf Telefonen.
Kostenlose Dashboard-Vorschauen
Kartenimpressionen, die auf der Registerkarte „Vorschau“ des Dashboards generiert werden, werden nicht auf Ihr monatliches Kartenansichtskontingent angerechnet. Sie können Layoutänderungen prüfen und Kategoriefilter frei testen.
Website-Builder und CMS-Anleitungen
Die interaktiven Layerpin-Karten funktionieren nativ mit allen großen Website-Buildern. Wählen Sie unten Ihre Plattform aus, um maßgeschneiderte Einrichtungsempfehlungen zu erhalten:
Embed responsive interactive maps into WordPress using Gutenberg Custom HTML blocks, Classic Editor, Elementor, or Divi HTML widgets.
Embed interactive maps in Webflow Designer using the Custom Code Embed element with full support for fluid responsive containers.
Embed full-width or fixed-dimension interactive maps in Wix Studio and Wix Editor using the HTML Embed element.
Install responsive interactive maps into Squarespace 7.1 and Fluid Engine sections using Code blocks.
Add interactive maps directly into Framer canvases using the native Embed component with fluid responsiveness.
Insert responsive interactive maps into Ghost CMS publications, member pages, and posts using HTML cards.
Ausführliches Tutorial
Benötigen Sie Schritt-für-Schritt-Screenshots für Webflow, WordPress, Wix, Squarespace oder Framer?
Ursprungsgrenzen und Plankapazität
Die zulässige Ursprungskapazität und Wildcard-Unterstützung werden durch Ihr aktives Abonnement bestimmt:
| Planen | Zulässige Ursprünge | Wildcard-Domains (*.) | Inklusive monatlicher Ansichten | Veröffentlichte Karten |
|---|---|---|---|---|
| Trial | Private only | Nicht unterstützt | Draft testing only | 0 (Draft only) |
| Basic | 10 origins | Nicht unterstützt | 5,000 views | 3 maps |
| Pro | 25 origins | Nicht unterstützt | 25,000 views | 15 maps |
| Premium | 50 origins | Unterstützt | 100,000 views | 50 maps |