Incorporação web e segurança
Incorpore mapas interativos no Webflow, WordPress, Shopify, Next.js ou sites personalizados. Proteja seus ativos visuais com a lista de origens autorizadas.
Métodos de instalação: Script vs. iframe
Layerpin oferece dois métodos de instalação para publicar seu mapa interativo em qualquer site, CMS ou aplicativo da web. Ambos os métodos suportam capacidade de resposta fluida, pinça para zoom multitoque e redimensionamento dinâmico de contêiner:
Uma única tag de script de inicialização automática. Ele mede automaticamente a largura do contêiner, gerencia a altura dinâmica da janela de visualização e evita mudanças cumulativas de layout sem exigir 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>Snippet de iframe padrão em sandbox. Ideal para ambientes CMS rigorosos, sandboxes de terceiros e plataformas que restringem tags 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>Proteção direta de URL
Visitar o URL incorporado diretamente na barra de endereço do navegador é bloqueado por design. Layerpin requer uma origem pai verificada para renderizar o mapa com segurança dentro de um contêiner de incorporação autorizado.
Predefinições de altura e layout responsivo
A largura incorporada sempre se estende para preencher 100% do bloco que o contém. Você pode selecionar entre quatro predefinições de altura predefinidas ou especificar dimensões personalizadas:
Adequado para colunas de barra lateral, widgets de detalhes de produtos e inserções compactas de blog.
O padrão balanceado para páginas iniciais, guias e listagens de diretórios de largura total.
Projetado para projetos arquitetônicos de vários andares, passeios em campus e esquemas de alta densidade.
Preenche toda a janela de visualização do navegador em dispositivos móveis e desktops, ideal para aplicativos exploradores de mapas dedicados.
Modos de carregamento e controles do visualizador
Configure como o mapa incorporado é carregado e quais controles estão disponíveis para os visitantes:
Preguiçoso (padrão): Defers map initialization until the visitor scrolls near the container, maximizing page speed scores. Ansioso: Carrega imediatamente na análise HTML inicial para seções hero.
Ativa um botão de expansão de tela cheia dentro do visualizador. Os visitantes podem expandir o mapa por todo o monitor para uma inspeção profunda sem sair do seu site.
Alterne o selo de atribuição da plataforma dentro do visualizador incorporado. Os planos pagos podem ocultar a marca para uma apresentação visual perfeita e totalmente branca.
Passe um parâmetro de consulta de idioma (por exemplo ?lang=ja) no iframe fonte to pre-select the locale on regional pages. Learn more in the Guia multilíngue.
Origens permitidas e lista de permissões de domínio
A lista de permissões de domínio garante que seus mapas interativos só possam ser incorporados em sites que você aprovar. Domínios não autorizados que tentarem criar um iframe em seu mapa receberão um aviso de acesso negado.
Regras de segurança de origem
- Protocolo HTTPS necessário: Embed origins require secure connections. Enter domains with or without protocol (e.g.,
https://mycompany.comorminhaempresa.com). - Sem caminhos, consultas ou hashes: Do not include subpaths or parameters (e.g., use
https://store.example.com, nothttps://store.example.com/map?view=1). - Correspondência de subdomínio curinga (Premium): Add
https://*.mycompany.comto authorize all staging branches, regional microsites, and dynamic subdomains under a single origin rule. - Política de referência estrita: Iframes must include
referrerpolicy = "origem estrita quando origem cruzada"so the browser sends the parent origin header to our authorization validator.
Pré-requisitos para ativar a incorporação
O mapa deve ser publicado e ter pelo menos uma origem válida listada antes que a incorporação do site possa ser ativada.
Os mapas de teste são rascunhos privados e não podem ser incorporados publicamente até que um plano de mapa ativo seja selecionado.
Revogação e rotação de ID incorporado
Se um código incorporado vazar acidentalmente em um repositório de código público ou se uma transferência de agência externa for concluída, você poderá alternar o token instantaneamente:
Na barra de status ao vivo no lado direito da página Configuração incorporada, clique em Regenerar ID. Layerpin instantly creates a brand new unique embed token (e.g., incorporar_...).
Visualização ao vivo em vários dispositivos
Teste a experiência incorporada ao vivo diretamente no painel do Layerpin antes de publicar o código em seu site de produção:
Simula monitores de desktop padrão e viewports widescreen.
Testa layouts de iPad e tablet com gavetas de UI responsivas.
Valida a navegação por toque, planilhas pop-up e pinçar para aplicar zoom em telefones.
Pré-visualizações gratuitas do painel
As impressões de mapa geradas na guia Visualização do painel não contam para sua cota mensal de visualização de mapa. Você pode inspecionar alterações de layout e testar filtros de categoria livremente.
Construtores de sites e guias de CMS
Os mapas interativos Layerpin funcionam nativamente com todos os principais construtores de sites. Escolha sua plataforma abaixo para recomendações de configuração 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 detalhado
Precisa de capturas de tela passo a passo para Webflow, WordPress, Wix, Squarespace ou Framer?
Limites de origem e capacidade do plano
A capacidade de origem permitida e o suporte a curingas são determinados pelo seu plano de assinatura ativo:
| Plano | Origens permitidas | Domínios curinga (*.) | Visualizações mensais incluídas | Mapas publicados |
|---|---|---|---|---|
| Trial | Private only | Não compatível | Draft testing only | 0 (Draft only) |
| Basic | 10 origins | Não compatível | 5,000 views | 3 maps |
| Pro | 25 origins | Não compatível | 25,000 views | 15 maps |
| Premium | 50 origins | Suportado | 100,000 views | 50 maps |