Inserción web y seguridad
Incruste mapas interactivos en Webflow, WordPress, Shopify, Next.js o sitios web personalizados. Proteja sus recursos visuales con la lista blanca de orígenes permitidos.
Métodos de instalación: script frente a iframe
Layerpin le ofrece dos métodos de instalación para publicar su mapa interactivo en cualquier sitio web, CMS o aplicación web. Ambos métodos admiten una capacidad de respuesta fluida, pellizco para hacer zoom multitáctil y cambio de tamaño dinámico de contenedores:
Una única etiqueta de script de inicialización automática. Mide automáticamente el ancho del contenedor, administra la altura de la ventana gráfica dinámica y evita cambios de diseño acumulativos sin necesidad de CSS personalizado.
<script src="https://layerpin.com/embed.v1.js?map=emb_YOUR_MAP_ID&width=100%25&height=640px&minHeight=320px&border=none"></script>Fragmento de iframe estándar en espacio aislado. Ideal para entornos CMS estrictos, entornos sandbox de terceros y plataformas que restringen etiquetas JavaScript externas.
<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>Protección de URL directa
La visita a la URL para insertar directamente en la barra de direcciones del navegador está bloqueada por diseño. Layerpin requiere un origen principal verificado para representar el mapa de forma segura dentro de un contenedor de incrustación autorizado.
Ajustes preestablecidos de altura y diseño responsivo
El ancho de inserción siempre se extiende hasta llenar el 100% del bloque que lo contiene. Puede seleccionar entre cuatro ajustes preestablecidos de altura predefinidos o especificar dimensiones personalizadas:
Adecuado para columnas de la barra lateral, widgets de detalles de productos e inserciones compactas de blogs.
El valor predeterminado equilibrado para páginas de destino, guías y listados de directorios de ancho completo.
Diseñado para planos arquitectónicos de varios pisos, recorridos por el campus y esquemas de alta densidad.
Llena toda la ventana gráfica del navegador en dispositivos móviles y de escritorio, ideal para aplicaciones de exploración de mapas dedicadas.
Modos de carga y controles del visor
Configure cómo se carga el mapa integrado y qué controles están disponibles para los visitantes:
Perezoso (predeterminado): Defers map initialization until the visitor scrolls near the container, maximizing page speed scores. Ansioso: Se carga inmediatamente en el análisis HTML inicial de las secciones principales.
Habilita un botón de expansión de pantalla completa dentro del visor. Los visitantes pueden expandir el mapa en todo su monitor para una inspección profunda sin tener que salir de su sitio web.
Alterna la insignia de atribución de la plataforma dentro del visor integrado. Los planes pagos pueden ocultar la marca para una presentación visual perfecta y completamente con etiqueta blanca.
Pase un parámetro de consulta de idioma (p. ej. ?lang=ja) en el iframe src to pre-select the locale on regional pages. Learn more in the Guía multilingüe.
Orígenes permitidos y lista blanca de dominios
La lista blanca de dominios garantiza que sus mapas interactivos solo se puedan insertar en sitios web que usted apruebe. Los dominios no autorizados que intenten colocar un iframe en su mapa recibirán un aviso de acceso denegado.
Reglas de seguridad de origen
- Protocolo HTTPS requerido: Embed origins require secure connections. Enter domains with or without protocol (e.g.,
https://mycompany.comormiempresa.com). - Sin rutas, consultas ni hashes: Do not include subpaths or parameters (e.g., use
https://store.example.com, nothttps://store.example.com/map?view=1). - Coincidencia de subdominios comodín (Premium): Add
https://*.mycompany.comto authorize all staging branches, regional microsites, and dynamic subdomains under a single origin rule. - Política estricta de referencia: Iframes must include
referrerpolicy="origen-estricto-cuando-origen-cruzado"so the browser sends the parent origin header to our authorization validator.
Requisitos previos para habilitar la incrustación
El mapa debe ser publicado y tener al menos un origen válido en la lista antes de poder activar la inserción del sitio web.
Los mapas de prueba son borradores privados y no se pueden insertar públicamente hasta que se seleccione un plan de mapa activo.
Insertar revocación y rotación de ID
Si un código de inserción se filtra accidentalmente en un repositorio de código público, o se completa una transferencia de una agencia externa, puedes rotar el token al instante:
En la barra de estado en vivo en el lado derecho de la página Configuración integrada, haga clic en Regenerar ID. Layerpin instantly creates a brand new unique embed token (e.g., emb_...).
Vista previa en vivo multidispositivo
Pruebe la experiencia integrada en vivo directamente dentro de su panel de Layerpin antes de publicar el código en su sitio web de producción:
Simula monitores de escritorio estándar y ventanas gráficas de pantalla ancha.
Prueba diseños de iPad y tabletas con cajones de interfaz de usuario responsivos.
Valida la navegación táctil, las hojas emergentes y la función de pellizcar para hacer zoom en los teléfonos.
Vistas previas gratuitas del panel
Las impresiones de mapas generadas dentro de la pestaña Vista previa del panel no cuentan para su cuota mensual de visualización de mapas. Puede inspeccionar los cambios de diseño y probar los filtros de categorías libremente.
Creadores de sitios web y guías de CMS
Los mapas interactivos de Layerpin funcionan de forma nativa con los principales creadores de sitios web. Elija su plataforma a continuación para obtener recomendaciones de configuración personalizadas:
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 detallado
¿Necesita capturas de pantalla paso a paso para Webflow, WordPress, Wix, Squarespace o Framer?
Límites de origen y capacidad del plan
La capacidad de origen permitida y la compatibilidad con comodines están determinadas por su plan de suscripción activo:
| Plan | Orígenes permitidos | Dominios comodín (*.) | Vistas mensuales incluidas | Mapas publicados |
|---|---|---|---|---|
| Trial | Private only | No compatible | Draft testing only | 0 (Draft only) |
| Basic | 10 origins | No compatible | 5,000 views | 3 maps |
| Pro | 25 origins | No compatible | 25,000 views | 15 maps |
| Premium | 50 origins | Apoyado | 100,000 views | 50 maps |