Incorporamento web e sicurezza
Incorpora mappe interattive in Webflow, WordPress, Shopify, Next.js o siti personalizzati. Proteggi i tuoi contenuti con la whitelist dei domini autorizzati.
Metodi di installazione: script e iframe
Layerpin ti offre due metodi di installazione per pubblicare la tua mappa interattiva su qualsiasi sito web, CMS o applicazione web. Entrambi i metodi supportano la reattività fluida, il pinch-to-zoom multi-touch e il ridimensionamento dinamico del contenitore:
Un singolo tag di script autoinizializzante. Misura automaticamente la larghezza del contenitore, gestisce l'altezza del viewport dinamico e impedisce spostamenti cumulativi del layout senza richiedere CSS personalizzati.
<script src="https://layerpin.com/embed.v1.js?map=emb_YOUR_MAP_ID&width=100%25&height=640px&minHeight=320px&border=none"></script>Snippet iframe standard in modalità sandbox. Ideale per ambienti CMS rigidi, sandbox di terze parti e piattaforme che limitano i tag JavaScript esterni.
<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>Protezione URL diretta
La visita dell'URL di incorporamento direttamente nella barra degli indirizzi del browser è bloccata dalla progettazione. Layerpin richiede un'origine principale verificata per eseguire il rendering della mappa in modo sicuro all'interno di un contenitore di incorporamento autorizzato.
Preimpostazioni di altezza e layout reattivo
La larghezza di incorporamento si estende sempre fino a riempire il 100% del blocco che lo contiene. Puoi scegliere tra quattro altezze predefinite o specificare dimensioni personalizzate:
Adatto per colonne della barra laterale, widget dei dettagli del prodotto e inserti di blog compatti.
L'impostazione predefinita bilanciata per pagine di destinazione, guide ed elenchi di directory a larghezza intera.
Progettato per progetti architettonici multipiano, tour di campus e schemi ad alta densità.
Riempie l'intera finestra del browser su dispositivi mobili e desktop, ideale per applicazioni dedicate all'esplorazione di mappe.
Modalità di caricamento e controlli del visualizzatore
Configura il modo in cui viene caricata la mappa incorporata e quali controlli sono disponibili per i visitatori:
Pigro (predefinito): Defers map initialization until the visitor scrolls near the container, maximizing page speed scores. Desideroso: Si carica immediatamente durante l'analisi HTML iniziale per le sezioni degli eroi.
Abilita un pulsante di espansione a schermo intero all'interno del visualizzatore. I visitatori possono espandere la mappa su tutto il monitor per un'ispezione approfondita senza allontanarsi dal tuo sito web.
Attiva/disattiva il badge di attribuzione della piattaforma all'interno del visualizzatore incorporato. I piani a pagamento possono nascondere il marchio per una presentazione visiva senza interruzioni e completamente in bianco.
Passare un parametro di query della lingua (ad es. ?lang=ja) nell'iframe src to pre-select the locale on regional pages. Learn more in the Guida multilingue.
Origini consentite e whitelist dei domini
La whitelist dei domini garantisce che le tue mappe interattive possano essere incorporate solo nei siti web che approvi. I domini non autorizzati che tentano di eseguire l'iframe sulla tua mappa riceveranno un avviso di accesso negato.
Regole di sicurezza dell'origine
- Protocollo HTTPS richiesto: Embed origins require secure connections. Enter domains with or without protocol (e.g.,
https://mycompany.comormiaazienda.com). - Nessun percorso, query o hash: Do not include subpaths or parameters (e.g., use
https://store.example.com, nothttps://store.example.com/map?view=1). - Corrispondenza sottodominio con caratteri jolly (Premium): Add
https://*.mycompany.comto authorize all staging branches, regional microsites, and dynamic subdomains under a single origin rule. - Politica di riferimento rigorosa: Iframes must include
referrerpolicy="strict-origin-when-cross-origin"so the browser sends the parent origin header to our authorization validator.
Prerequisiti per abilitare l'incorporamento
La mappa deve essere pubblicato e avere almeno un'origine valida elencata prima che l'incorporamento del sito web possa essere attivato.
Le mappe di prova sono bozze private e non possono essere incorporate pubblicamente finché non viene selezionato un piano mappa attivo.
Incorpora revoca e rotazione dell'ID
Se un codice di incorporamento viene accidentalmente divulgato in un repository di codice pubblico o viene completato un trasferimento da parte di un'agenzia esterna, puoi ruotare immediatamente il token:
Nella barra dello stato in tempo reale sul lato destro della pagina Configurazione incorporamento, fare clic su Rigenera ID. Layerpin instantly creates a brand new unique embed token (e.g., incorpora_...).
Anteprima live multidispositivo
Prova l'esperienza incorporata dal vivo direttamente nella dashboard di Layerpin prima di pubblicare il codice sul tuo sito Web di produzione:
Simula monitor desktop standard e viewport widescreen.
Testa i layout di iPad e tablet con cassetti dell'interfaccia utente reattivi.
Convalida la navigazione touch, i fogli popup e l'azione di zoom con le dita sui telefoni.
Anteprime gratuite della dashboard
Le impressioni della mappa generate nella scheda Anteprima della dashboard non vengono conteggiate nella quota mensile di visualizzazione della mappa. Puoi controllare liberamente le modifiche al layout e testare i filtri delle categorie.
Costruttori di siti Web e guide CMS
Le mappe interattive Layerpin funzionano in modo nativo con tutti i principali costruttori di siti Web. Scegli la tua piattaforma qui sotto per consigli di configurazione personalizzati:
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.
Tutorial dettagliato
Hai bisogno di screenshot passo passo per Webflow, WordPress, Wix, Squarespace o Framer?
Limiti di origine e capacità del piano
La capacità di origine consentita e il supporto dei caratteri jolly sono determinati dal tuo piano di abbonamento attivo:
| Piano | Origini consentite | Domini con caratteri jolly (*.) | Visualizzazioni mensili incluse | Mappe pubblicate |
|---|---|---|---|---|
| Trial | Private only | Non supportato | Draft testing only | 0 (Draft only) |
| Basic | 10 origins | Non supportato | 5,000 views | 3 maps |
| Pro | 25 origins | Non supportato | 25,000 views | 15 maps |
| Premium | 50 origins | Supportato | 100,000 views | 50 maps |