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

Publicar em 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.

No Wix? Veja o guia dedicado Publicar no Wix — instale o aplicativo Navi+ do Wix App Market e ele se incorpora automaticamente, sem código. A incorporação manual abaixo é apenas para Squarespace, Webflow e sites personalizados.

Esta página cobre o método de incorporação de script manual, que é o caminho correto para 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. Incorpore o 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 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 mobile.

Seletores CSS comuns para esta opção:

  • header — funciona na maioria das plataformas
  • .header-wrapper — algumas plataformas
  • .mobile-header — plataformas com um elemento de cabeçalho mobile dedicado

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.

No mobile, a maioria das plataformas agrupa o menu mobile dentro do cabeçalho ou de um toggle hambúrguer, então pode não haver um elemento autônomo para substituir. Inserir Antes ou Inserir Depois é recomendado em vez disso.

Se a sua plataforma tiver um elemento de menu mobile dedicado que você quer substituir, use Modo Debug ou Browser DevTools para encontrar o Seletor CSS dele.

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(M) — insere ou substitui somente no móvel
  • header(D) — insere ou substitui somente no desktop
  • header — insere ou substitui em ambas as plataformas

Para menus mobile, usar o sufixo (M) garante que o menu apareça apenas em dispositivos móveis e não interfira no layout 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.