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

Pubblica su Wix / Squarespace / Altri

Su WordPress? Usa il plugin dedicato Naviplus Menu Builder invece dell’embed manuale qui sotto — nessuna modifica al tema, posiziona il Grid tramite shortcode o blocco Gutenberg.

Su Shopify? Installa l’app dedicata Shopify app — è ottimizzata per la piattaforma con opzioni di pubblicazione integrate.

Questa pagina copre il metodo embed manuale dello script, che è il percorso giusto per Wix, Squarespace, Webflow, Magento, e siti web personalizzati costruiti con PHP, Node.js, o puro HTML. Hai i seguenti metodi di implementazione:

1. Incorpora Navi+ nel Tuo Sito Web

Questo metodo di implementazione è adatto per tutti i tipi di menu che Navi+ attualmente supporta, inclusi: Tabbar, Mega menu, Slide menu, FAB, e Grid menu. Questo codice deve essere utilizzato solo una volta per tutti i menu.

<!-- Inserisci questo codice nell'<head> del sito web. (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;
<!-- Inserisci questo codice nell'<head> del sito web -->

FAQ (Domande Frequenti)

Che cos'è il token?

Ogni account Navi+ è assegnato a un token unico. Puoi visualizzare e copiare questo token direttamente dall'intestazione dell'applicazione. Il token viene utilizzato per pubblicare il tuo menu in modo sicuro.

Che cos'è https://live.naviplus.app/start.js?

Questo è l'URL fisso di Navi+ che contiene la logica di inizializzazione dell'applicazione. Lo script è leggero (circa 4KB), permettendo un caricamento rapido su la maggior parte dei dispositivi e condizioni di rete. Viene fornito tramite Cloudflare e BunnyCDN per garantire prestazioni globali stabili e compatibilità affidabile con i browser moderni.

Utilizzare il metodo di caricamento asincrono significa anche che non influisce sul processo di caricamento del sito web.

Questo codice di incorporamento rallenta il mio sito web?

Il codice qui sotto è estremamente leggero e può essere inserito nel tuo sito web senza influire sulla velocità (richiedendo solo circa 100-200ms per il primo caricamento e 0ms per i caricamenti successivi), sull'esperienza del cliente o sui punteggi SEO

Qual è il posto migliore per inserire questo frammento di codice?

Nella sezione head (o il prima possibile). Perché? Il sito web caricherà sequenzialmente le risorse per rendere l'interfaccia. Posizionare Navi+ per primo nel codice HTML aiuterà il tuo menu a essere pronto per essere visualizzato il prima possibile, aspettando che le condizioni siano soddisfatte, quindi il menu apparirà immediatamente. Questo migliora l'esperienza dell'utente.

Come posso sapere se questo codice è stato incorporato con successo nel mio sito web?

Ci sono due modi:

Metodo 1 (per tutti):

Apri il tuo sito web con il suffisso #navidebug-on, ad esempio: https://domain.com#navidebug-on. Se il sito web passa alla modalità Debug, l'incorporamento funziona correttamente. La modalità Debug ti aiuta a identificare facilmente i selettori CSS. Usa #navidebug-off per disattivarlo.

Metodo 2 (per sviluppatori):

Apri gli strumenti di ispezione del tuo browser, vai alla scheda Console e cerca un messaggio verde: “Utilizzando Navi+..”. Questo messaggio indica che il codice è stato incorporato con successo.

2. Pubblica il menu utilizzando il Selettore CSS (raccomandato)

Dopo aver incorporato lo script sopra, vai all’app Navi+ per configurare dove e come appare il tuo menu sulla pagina.

I.1. Comprendere il Selettore CSS

Un Selettore CSS è un modo per mirare a un elemento HTML specifico sulla tua pagina web. Navi+ lo utilizza per sapere esattamente dove posizionare il tuo menu — se inserirlo prima o dopo un elemento, o sostituire completamente uno esistente.

Non è necessario essere uno sviluppatore per usarlo. Navi+ fornisce un semplice campo di input dove inserisci il selettore, e gestisce il resto.

Per trovare il corretto Selettore CSS per il tuo sito web, puoi utilizzare:

  • Modalità Debug — lo strumento integrato di Navi+: passa il mouse su qualsiasi elemento sulla tua pagina e copia istantaneamente il suo selettore
  • Browser DevTools — un metodo manuale utilizzando l’ispezione integrata del tuo browser

I.2. Tre opzioni di pubblicazione

Passo 1: Clicca sul pulsante Pubblica sul sito web nell’app Navi+.

Passo 2: Attiva l’interruttore “Pubblica menu tramite metodo Inserisci/Sostituisci”.

Passo 3: Inserisci il tuo Selettore CSS e scegli una delle tre opzioni di pubblicazione qui sotto.

Opzione 1: Inserisci Prima

Inserisce il menu Navi+ immediatamente prima dell'elemento selezionato.

Esempio: Selettore CSS main → il Grid Menu appare sopra l'area principale del contenuto della pagina, visualizzato come una sezione completa.

Questa è la configurazione più comune per un Grid Menu su piattaforme non-Shopify.

Selettori CSS comuni per questa opzione:

  • main — funziona sulla maggior parte delle piattaforme (Webflow, Magento, siti personalizzati)
  • #main — alcune piattaforme e temi personalizzati
  • .main-content — varie piattaforme

Non è in questa lista? Puoi chattare con un sostenitore di Navi+ per assistenza immediata, o utilizzare Modalità Debug o Browser DevTools per trovarlo tu stesso.

Opzione 2: Inserisci Dopo

Inserisce il menu Navi+ immediatamente dopo l'elemento selezionato.

Esempio: Selettore CSS header → il Grid Menu appare appena sotto l'intestazione.

Selettori CSS comuni per questa opzione:

  • header — funziona sulla maggior parte delle piattaforme
  • .header-wrapper — alcune piattaforme
  • .site-header — varie piattaforme

Non è in questa lista? Puoi chattare con un sostenitore di Navi+ per assistenza immediata, o utilizzare Modalità Debug o Browser DevTools per trovarlo tu stesso.

Opzione 3: Sostituisci

Sostituisce completamente l'elemento selezionato con il menu Navi+. L'elemento originale è nascosto e Navi+ prende il suo posto.

La maggior parte delle piattaforme non ha un Grid Menu integrato, quindi la modalità Sostituisci è raramente applicabile per questo tipo di menu. Inserire Prima main è l'approccio raccomandato.

Se la tua piattaforma ha un elemento di navigazione in stile griglia che desideri sostituire, utilizza Modalità Debug o Browser DevTools per trovare il suo Selettore CSS.

I.3. Targeting specifico per dispositivo

Puoi controllare se il Selettore CSS si applica su mobile, desktop, o entrambi aggiungendo un suffisso al tuo selettore:

Suffisso Si applica a
(M) Solo mobile
(D) Solo desktop
(nessuno) Sia mobile che desktop

Esempi:

  • main(D) — inserisce solo su desktop
  • main(M) — inserisce solo su mobile
  • main — inserisce su entrambe le piattaforme

Questo è utile quando desideri che il Grid Menu appaia solo su determinati dispositivi, o quando hai bisogno di un posizionamento diverso su mobile rispetto a desktop.

3. Inserisci un Menu Navi+ in Qualsiasi Punto del Tuo Sito Web

Il codice qui sotto può essere utilizzato più volte su un sito web con diverse informazioni di inserimento (soprattutto l’ID Incorporato, come SF-123456789). Quando il sito web viene renderizzato, il menu verrà distribuito e visualizzato nella posizione in cui il codice è inserito quando le condizioni sono soddisfatte. Questo tipo di menu è adatto per: Mega menu, Grid, ecc.

<!-- Inserisci il codice dove appare il menu SF-123456789. (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;
<!-- Inserisci il codice dove appare il menu SF-123456789 -->

Importante: Il codice sopra utilizza il codice di incorporamento di esempio SF-123456789. Assicurati di sostituirlo con il tuo codice di incorporamento del menu reale.