English Tiếng Việt Français Deutsch 中文 日本語 Italiano Português Español
Ver demo Comece agora

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 a Grade 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>
&lt;script src="https://live.naviplus.app/start.js" async&gt;&lt;/script&gt;
<!-- 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á recursos sequencialmente 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 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 Grid aparece acima da área de conteúdo principal da página, exibido como uma seção completa.

Esta é a configuração mais comum para um Menu Grid em plataformas que não são Shopify.

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 Grid aparece logo abaixo do cabeçalho.

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 é ocultado e o Navi+ ocupa seu lugar.

A maioria das plataformas não possui um Menu Grid integrado, então o modo Substituir raramente é aplicável para este tipo de menu. Inserir Antes main é a abordagem recomendada.

Se sua plataforma tiver um elemento de navegação em estilo grid que você deseja substituir, use Modo Debug ou Browser DevTools para encontrar seu Seletor CSS.

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:

  • main(D) — insere somente no desktop
  • main(M) — insere somente no móvel
  • main — insere em ambas as plataformas

Isso é útil quando você deseja que o Menu Grid apareça apenas em certos dispositivos, ou quando você precisa de diferentes posicionamentos em móvel vs. desktop.

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>
&lt;script src="https://live.naviplus.app/start.js" async&gt;&lt;/script&gt;
<!-- 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.