Publicar no Wix / Squarespace / Outros
No WordPress? Use o plugin dedicado Naviplus Menu Builder em vez da incorporação manual abaixo — sem edições de tema, coloque o Mega Menu via shortcode ou bloco Gutenberg.
No Shopify? Instale o aplicativo Shopify dedicado — ele é otimizado para a plataforma com opções de publicação integradas.
Esta página cobre o método de incorporação de script manual, que é o caminho certo para Wix, Squarespace, Webflow, Magento, e sites personalizados construídos com PHP, Node.js, ou HTML puro. Você tem os seguintes métodos de implementação:
1. Incorporar Navi+ no Seu Site
Este método de implementação é adequado para todos os tipos de menu que o Navi+ atualmente suporta, incluindo: Tabbar, Mega menu, Slide menu, FAB, e Grid menu. Este código só precisa ser usado uma vez para todos os menus.
<!-- Insira este código no <head> do site. (c) naviplus.io -->
<script>(window._navi_setting ||= []).push({
token: "NAVI123456"
});</script>
<script src="https://live.naviplus.app/start.js" async></script>
<!-- Insira este código no <head> do site -->
FAQ (Perguntas Frequentes)
O que é token?
Cada conta Navi+ é atribuída um token único. Você pode visualizar e copiar este token diretamente do cabeçalho do aplicativo. O token é usado para publicar seu menu de forma segura.
O que é https://live.naviplus.app/start.js?
Este é o URL fixo do Navi+ que contém a lógica de inicialização do aplicativo. O script é leve (cerca de 4KB), permitindo que ele carregue rapidamente na maioria dos dispositivos e condições de rede. Ele é entregue via Cloudflare e BunnyCDN para fornecer desempenho global estável e compatibilidade confiável com navegadores modernos.
Usar o método de carregamento assíncrono também significa que não afeta o processo de carregamento do site.
Este código de incorporação desacelera meu site?
O código abaixo é extremamente leve e pode ser inserido no seu site sem afetar a velocidade (levando apenas cerca de 100-200ms para o primeiro carregamento e 0ms para carregamentos subsequentes), a experiência do cliente ou as pontuações de SEO
Qual é o melhor lugar para inserir este trecho de código?
Na seção head (ou o mais cedo possível). Por quê? O site carregará sequencialmente os recursos para renderizar a interface. Colocar o Navi+ o mais cedo possível no código HTML ajudará seu menu a estar pronto para exibir assim que as condições forem atendidas, então o menu aparecerá imediatamente. Isso melhora a experiência do usuário.
Como posso saber se este código foi incorporado com sucesso no meu site?
Existem duas maneiras:
Método 1 (para todos):
Abra seu site com o sufixo #navidebug-on, por exemplo: https://domain.com#navidebug-on. Se o site mudar para o modo Debug, a incorporação está funcionando corretamente. O modo Debug ajuda você a identificar facilmente os seletores CSS. Use #navidebug-off para desligá-lo.
Método 2 (para desenvolvedores):
Abra as ferramentas de inspeção do seu navegador, vá para a aba Console e procure uma mensagem verde: “Usando Navi+..”. Esta mensagem indica que o código foi incorporado com sucesso.
2. Publicar o menu usando Seletor CSS (recomendado)
Após incorporar o script acima, vá para o aplicativo Navi+ para configurar onde e como seu menu aparece na página.
I.1. Entendendo Seletor CSS
Um Seletor CSS é uma maneira de direcionar um elemento HTML específico na sua página da web. O Navi+ o usa para saber exatamente onde colocar seu menu — se deve inseri-lo antes ou depois de um elemento, ou substituir um existente completamente.
Você não precisa ser um desenvolvedor para usar isso. O Navi+ fornece um campo de entrada simples onde você insere o seletor, e ele cuida do resto.
Para encontrar o Seletor CSS correto para o seu site, você pode usar:
- Modo Debug — ferramenta integrada do Navi+: passe o mouse sobre qualquer elemento na sua página e copie instantaneamente seu seletor
- Browser DevTools — um método manual usando o inspetor integrado do seu navegador
I.2. Três opções de publicação
Passo 1: Clique no botão Publicar no site no aplicativo Navi+.
Passo 2: Ative o toggle “Publicar menu pelo método Inserir/Substituir”.
Passo 3: Insira seu Seletor CSS e escolha uma das três opções de publicação abaixo.
Opção 1: Inserir Antes
Insere o menu Navi+ imediatamente antes do elemento selecionado.
Exemplo: Seletor CSS main → o menu aparece acima da área de conteúdo principal da página.
Seletores CSS comuns para esta opção:
main— funciona na maioria das plataformas (Webflow, Magento, sites personalizados)#main— algumas plataformas e temas personalizados.main-content— várias plataformas
Não está nesta lista? Você pode conversar com um suporte do Navi+ para ajuda instantânea, ou usar Modo Debug ou Browser DevTools para encontrá-lo você mesmo.
Opção 2: Inserir Depois
Insere o menu Navi+ imediatamente depois do elemento selecionado.
Exemplo: Seletor CSS header → o menu aparece logo abaixo do cabeçalho.
Esta é a configuração mais comum para um Mega Menu de desktop.
Seletores CSS comuns para esta opção:
header— funciona na maioria das plataformas.header-wrapper— algumas plataformas.site-header— várias plataformas
Não está nesta lista? Você pode conversar com um suporte do Navi+ para ajuda instantânea, ou usar Modo Debug ou Browser DevTools para encontrá-lo você mesmo.
Opção 3: Substituir
Substitui o elemento selecionado completamente pelo menu Navi+. O elemento original é oculto e o Navi+ ocupa seu lugar.
Exemplo: Seletor CSS .main-nav → a navegação padrão do site é oculta e substituída pelo seu Mega Menu Navi+.
Seletores CSS comuns para esta opção:
nav— elemento de navegação genérico.main-nav— várias plataformas.site-navigation— várias plataformas
Nota: Ao usar o modo Substituir, um breve flash do menu original pode aparecer enquanto o Navi+ carrega. Veja I.4 abaixo para evitar isso.
Não está nesta lista? Você pode conversar com um suporte do Navi+ para ajuda instantânea, ou usar Modo Debug ou Browser DevTools para encontrá-lo você mesmo.
I.3. Direcionamento específico para dispositivos
Você pode controlar se o Seletor CSS se aplica em dispositivos móveis, desktop, ou ambos, adicionando um sufixo ao seu seletor:
| Sufixo | Aplica-se a |
|---|---|
(M) |
Somente móvel |
(D) |
Somente desktop |
| (nenhum) | Tanto móvel quanto desktop |
Exemplos:
header(D)— insere ou substitui somente no desktopheader(M)— insere ou substitui somente no móvelheader— insere ou substitui em ambas as plataformas
I.4. Importante! Otimize a velocidade do Mega Menu e a experiência do usuário (modo Substituir)
Quando você substitui um menu por outro, o Navi+ espera até que o menu antigo seja exibido e então o troca instantaneamente pelo novo. Embora isso aconteça quase imediatamente, ainda há um breve momento em que o menu antigo aparece, o que pode confundir os usuários.
Com este passo, você pode ocultar completamente o menu antigo e mostrar um efeito de carregamento em vez disso. Isso faz com que o site pareça mais rápido e melhora a experiência do usuário. O Navi+ fornece uma opção simples integrada para isso nas configurações de publicação — ative-a e configure o Seletor CSS do elemento a ser ocultado, com um sufixo opcional (M) ou (D) para controle específico do dispositivo.
3. Inserir um Menu Navi+ em Qualquer Ponto do Seu Site
O código abaixo pode ser usado várias vezes em um site com diferentes informações de inserção (especialmente o ID Embutido, como SF-123456789). Quando o site é renderizado, o menu será implantado e exibido na posição onde o código é inserido quando as condições forem atendidas. Este tipo de menu é adequado para: Mega menu, Grid, etc.
<!-- Insira o código onde o menu SF-123456789 aparece. (c) naviplus.io -->
<div class="naviman_app section_naviman_app" id="SF-123456789-container"></div>
<script>(window._navi_setting ||= []).push({
token: "NAVI123456",
embed_id: "SF-123456789"
});</script>
<script src="https://live.naviplus.app/start.js" async></script>
<!-- Insira o código onde o menu SF-123456789 aparece -->
Importante: O código acima usa o código de incorporação de exemplo SF-123456789. Certifique-se de substituí-lo pelo seu código de incorporação de menu real.