Osadzanie na stronie i bezpieczeństwo
Osadzaj interaktywne mapy w Webflow, WordPress, Shopify, Next.js lub na własnych stronach. Chroń zasoby za pomocą białej listy domen.
Metody instalacji: skrypt vs. iframe
Layerpin udostępnia dwie metody instalacji umożliwiające publikację interaktywnej mapy na dowolnej stronie internetowej, systemie CMS lub aplikacji internetowej. Obie metody obsługują płynną reakcję, wielodotykowe przesuwanie w celu powiększenia i dynamiczną zmianę rozmiaru kontenera:
Pojedynczy samoinicjujący się znacznik skryptu. Automatycznie mierzy szerokość kontenera, zarządza dynamiczną wysokością rzutni i zapobiega skumulowanym zmianom układu bez konieczności stosowania niestandardowego CSS.
<script src="https://layerpin.com/embed.v1.js?map=emb_YOUR_MAP_ID&width=100%25&height=640px&minHeight=320px&border=none"></script>Standardowy fragment kodu iframe w trybie piaskownicy. Idealny do rygorystycznych środowisk CMS, piaskownic innych firm i platform, które ograniczają zewnętrzne tagi JavaScript.
<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>Bezpośrednia ochrona adresów URL
Odwiedzanie adresu URL osadzenia bezpośrednio w pasku adresu przeglądarki jest blokowane przez projekt. Layerpin wymaga zweryfikowanego źródła nadrzędnego, aby bezpiecznie renderować mapę w autoryzowanym kontenerze do osadzania.
Ustawienia wysokości i responsywny układ
Szerokość osadzenia zawsze rozciąga się, aby wypełnić 100% bloku zawierającego. Możesz wybierać spośród czterech predefiniowanych ustawień wysokości lub określić niestandardowe wymiary:
Nadaje się do kolumn na pasku bocznym, widżetów ze szczegółami produktów i kompaktowych wkładek do blogów.
Zrównoważone ustawienie domyślne dla stron docelowych, przewodników i list katalogów o pełnej szerokości.
Zaprojektowany do wielopiętrowych projektów architektonicznych, wycieczek po kampusach i schematów o dużej gęstości.
Wypełnia cały obszar przeglądarki na urządzeniach mobilnych i komputerach stacjonarnych, idealny do dedykowanych aplikacji eksploratora map.
Tryby ładowania i elementy sterujące przeglądarki
Skonfiguruj sposób ładowania osadzonej mapy i elementy sterujące dostępne dla odwiedzających:
Leniwy (domyślnie): Defers map initialization until the visitor scrolls near the container, maximizing page speed scores. Chętny: Ładuje się natychmiast po początkowej analizie HTML sekcji głównych.
Włącza przycisk rozwijania pełnoekranowego w przeglądarce. Odwiedzający mogą rozszerzyć mapę na cały monitor w celu dokładnej kontroli bez konieczności opuszczania witryny.
Przełącz plakietkę atrybucji platformy w osadzonej przeglądarce. Płatne plany mogą ukryć branding, zapewniając płynną prezentację wizualną z całkowicie białą etykietą.
Przekaż parametr zapytania językowego (np. ?lang=ja) w ramce iframe źródło to pre-select the locale on regional pages. Learn more in the Przewodnik wielojęzyczny.
Dozwolone źródła i domena na białej liście
Dzięki białej liście domen Twoje interaktywne mapy będą mogły być umieszczane tylko w witrynach, które zatwierdzisz. Nieautoryzowane domeny próbujące utworzyć ramkę iframe na Twojej mapie otrzymają powiadomienie o odmowie dostępu.
Zasady bezpieczeństwa pochodzenia
- Wymagany protokół HTTPS: Embed origins require secure connections. Enter domains with or without protocol (e.g.,
https://mycompany.comormojafirma.com). - Żadnych ścieżek, zapytań ani skrótów: Do not include subpaths or parameters (e.g., use
https://store.example.com, nothttps://store.example.com/map?view=1). - Dopasowanie subdomeny z symbolami wieloznacznymi (Premium): Add
https://*.mycompany.comto authorize all staging branches, regional microsites, and dynamic subdomains under a single origin rule. - Surowe zasady dotyczące osób polecających: Iframes must include
referrerpolicy="ścisłe-pochodzenie-w przypadku-pochodzenia krzyżowego"so the browser sends the parent origin header to our authorization validator.
Warunki wstępne umożliwiające osadzanie
Mapa musi być opublikowany i mieć co najmniej jedno ważne źródło wymienione przed włączeniem osadzania witryn internetowych.
Mapy próbne to prywatne wersje robocze i nie można ich umieszczać publicznie, dopóki nie zostanie wybrany aktywny plan map.
Osadź unieważnienie i rotację identyfikatora
Jeśli kod do osadzenia przypadkowo wycieknie do publicznego repozytorium kodu lub zakończy się przekazanie agencji zewnętrznej, możesz natychmiast obrócić token:
Na pasku stanu aktywnego po prawej stronie strony Konfiguracja osadzania kliknij Wygeneruj ponownie identyfikator. Layerpin instantly creates a brand new unique embed token (e.g., osadzić_...).
Podgląd na żywo na wielu urządzeniach
Przed opublikowaniem kodu w witrynie produkcyjnej przetestuj osadzone na żywo doświadczenie bezpośrednio w panelu Layerpin:
Symuluje standardowe monitory stacjonarne i rzutnie panoramiczne.
Testuje układy iPada i tabletu z responsywnymi szufladami interfejsu użytkownika.
Sprawdza nawigację dotykową, wyskakujące arkusze i funkcję przybliżania przez szczypanie w telefonach.
Bezpłatne podglądy pulpitu nawigacyjnego
Wyświetlenia map wygenerowane na karcie Podgląd w panelu kontrolnym nie wliczają się do miesięcznego limitu wyświetlania map. Możesz swobodnie sprawdzać zmiany układu i testować filtry kategorii.
Kreatory stron internetowych i przewodniki CMS
Interaktywne mapy Layerpin działają natywnie ze wszystkimi głównymi kreatorami stron internetowych. Wybierz poniżej platformę, aby uzyskać dostosowane zalecenia dotyczące konfiguracji:
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.
Szczegółowy samouczek
Potrzebujesz zrzutów ekranu krok po kroku dla Webflow, WordPress, Wix, Squarespace lub Framer?
Limity pochodzenia i pojemność planu
Dozwolona pojemność Origin i obsługa symboli wieloznacznych zależy od Twojego aktywnego planu subskrypcji:
| Plan | Dozwolone pochodzenie | Domeny z symbolami wieloznacznymi (*.) | Uwzględnione miesięczne wyświetlenia | Opublikowane mapy |
|---|---|---|---|---|
| Trial | Private only | Nieobsługiwane | Draft testing only | 0 (Draft only) |
| Basic | 10 origins | Nieobsługiwane | 5,000 views | 3 maps |
| Pro | 25 origins | Nieobsługiwane | 25,000 views | 15 maps |
| Premium | 50 origins | Utrzymany | 100,000 views | 50 maps |