English Tiếng Việt Français Deutsch 中文 日本語 Italiano Português Español
Voir la démo Commencer

Publier sur Wix / Squarespace / Autres

Sur WordPress ? Utilisez le plugin Naviplus Menu Builder au lieu de l’intégration manuelle ci-dessous — pas d’éditions de thème, placez le Mega Menu via shortcode ou bloc Gutenberg.

Sur Shopify ? Installez l’application Shopify dédiée — elle est optimisée pour la plateforme avec des options de publication intégrées.

Cette page couvre la méthode d’intégration de script manuelle, qui est le bon chemin pour Wix, Squarespace, Webflow, Magento, et des sites Web personnalisés construits avec PHP, Node.js, ou du HTML pur. Vous avez les méthodes d’implémentation suivantes :

1. Intégrer Navi+ sur Votre Site Web

Cette méthode d’implémentation convient à tous les types de menus que Navi+ prend actuellement en charge, y compris : Tabbar, Mega menu, Slide menu, FAB, et Grid menu. Ce code n’a besoin d’être utilisé qu’une seule fois pour tous les menus.

<!-- Insérez ce code dans le <head> du site 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;
<!-- Insérez ce code dans le <head> du site Web -->

FAQ (Questions Fréquemment Posées)

Qu'est-ce que le token ?

Chaque compte Navi+ se voit attribuer un token unique. Vous pouvez voir et copier ce token directement depuis l'en-tête de l'application. Le token est utilisé pour publier votre menu de manière sécurisée.

Qu'est-ce que https://live.naviplus.app/start.js ?

C'est l'URL fixe de Navi+ qui contient la logique d'initialisation de l'application. Le script est léger (environ 4 Ko), ce qui lui permet de se charger rapidement sur la plupart des appareils et des conditions réseau. Il est livré via Cloudflare et BunnyCDN pour fournir des performances globales stables et une compatibilité fiable avec les navigateurs modernes.

Utiliser la méthode de chargement asynchrone signifie également qu'elle n'affecte pas le processus de chargement du site Web.

Ce code d'intégration ralentit-il mon site Web ?

Le code ci-dessous est extrêmement léger et peut être inséré dans votre site Web sans affecter la vitesse (ne prenant que 100 à 200 ms pour le premier chargement et 0 ms pour les chargements suivants), l'expérience client, ou les scores SEO

Quel est le meilleur endroit pour insérer ce snippet de code ?

Dans la section head (ou aussi tôt que possible). Pourquoi ? Le site Web chargera séquentiellement les ressources pour rendre l'interface. Placer Navi+ le plus tôt possible dans le code HTML aidera votre menu à être prêt à s'afficher dès que possible en attendant que les conditions soient remplies, puis le menu apparaîtra immédiatement. Cela améliore l'expérience utilisateur.

Comment puis-je savoir si ce code a été intégré avec succès sur mon site Web ?

Il y a deux façons :

Méthode 1 (pour tout le monde) :

Ouvrez votre site Web avec le suffixe #navidebug-on, par exemple : https://domain.com#navidebug-on. Si le site Web passe en mode Debug, l'intégration fonctionne correctement. Le mode Debug vous aide à identifier facilement les sélecteurs CSS. Utilisez #navidebug-off pour l'éteindre.

Méthode 2 (pour les développeurs) :

Ouvrez les outils d'inspection de votre navigateur, allez à l'onglet Console, et cherchez un message vert : "Utilisation de Navi+..". Ce message indique que le code a été intégré avec succès.

2. Publier le menu en utilisant le Sélecteur CSS (recommandé)

Après avoir intégré le script ci-dessus, allez dans l’application Navi+ pour configurer où et comment votre menu apparaît sur la page.

I.1. Comprendre le Sélecteur CSS

Un Sélecteur CSS est un moyen de cibler un élément HTML spécifique sur votre page Web. Navi+ l’utilise pour savoir exactement où placer votre menu — que ce soit pour l’insérer avant ou après un élément, ou pour remplacer complètement un existant.

Vous n’avez pas besoin d’être développeur pour l’utiliser. Navi+ fournit un champ de saisie simple où vous entrez le sélecteur, et il s’occupe du reste.

Pour trouver le Sélecteur CSS correct pour votre site Web, vous pouvez utiliser :

  • Mode Debug — l’outil intégré de Navi+ : survolez n’importe quel élément de votre page et copiez instantanément son sélecteur
  • Browser DevTools — une méthode manuelle utilisant l’inspecteur intégré de votre navigateur

I.2. Trois options de publication

Étape 1 : Cliquez sur le bouton Publier sur le site Web dans l’application Navi+.

Étape 2 : Activez le toggle “Publier le menu par méthode d’Insertion/Remplacement”.

Étape 3 : Entrez votre Sélecteur CSS et choisissez l’une des trois options de publication ci-dessous.

Option 1 : Insérer Avant

Insère le menu Navi+ immédiatement avant l'élément sélectionné.

Exemple : Sélecteur CSS main → le menu apparaît au-dessus de la zone de contenu principal de la page.

Sélecteurs CSS courants pour cette option :

  • main — fonctionne sur la plupart des plateformes (Webflow, Magento, sites personnalisés)
  • #main — certaines plateformes et thèmes personnalisés
  • .main-content — diverses plateformes

Pas dans cette liste ? Vous pouvez discuter avec un supporter de Navi+ pour obtenir de l'aide instantanée, ou utiliser Mode Debug ou Browser DevTools pour le trouver vous-même.

Option 2 : Insérer Après

Insère le menu Navi+ immédiatement après l'élément sélectionné.

Exemple : Sélecteur CSS header → le menu apparaît juste en dessous de l'en-tête.

C'est la configuration la plus courante pour un Mega Menu de bureau.

Sélecteurs CSS courants pour cette option :

  • header — fonctionne sur la plupart des plateformes
  • .header-wrapper — certaines plateformes
  • .site-header — diverses plateformes

Pas dans cette liste ? Vous pouvez discuter avec un supporter de Navi+ pour obtenir de l'aide instantanée, ou utiliser Mode Debug ou Browser DevTools pour le trouver vous-même.

Option 3 : Remplacer

Remplace complètement l'élément sélectionné par le menu Navi+. L'élément original est masqué et Navi+ prend sa place.

Exemple : Sélecteur CSS .main-nav → la navigation par défaut du site est masquée et remplacée par votre Mega Menu Navi+.

Sélecteurs CSS courants pour cette option :

  • nav — élément de navigation générique
  • .main-nav — diverses plateformes
  • .site-navigation — diverses plateformes

Remarque : Lors de l'utilisation du mode Remplacer, un bref flash du menu original peut apparaître pendant que Navi+ se charge. Voir I.4 ci-dessous pour éviter cela.

Pas dans cette liste ? Vous pouvez discuter avec un supporter de Navi+ pour obtenir de l'aide instantanée, ou utiliser Mode Debug ou Browser DevTools pour le trouver vous-même.

I.3. Ciblage spécifique aux appareils

Vous pouvez contrôler si le Sélecteur CSS s’applique sur mobile, bureau, ou les deux en ajoutant un suffixe à votre sélecteur :

Suffixe S’applique à
(M) Mobile uniquement
(D) Bureau uniquement
(aucun) Mobile et bureau

Exemples :

  • header(D) — insère ou remplace uniquement sur bureau
  • header(M) — insère ou remplace uniquement sur mobile
  • header — insère ou remplace sur les deux plateformes

I.4. Important ! Optimiser la vitesse du Mega Menu et l’expérience utilisateur (mode Remplacer)

Lorsque vous remplacez un menu par un autre, Navi+ attend que l’ancien menu soit affiché puis l’échange instantanément avec le nouveau. Bien que cela se produise presque immédiatement, il y a encore un bref moment où l’ancien menu apparaît, ce qui peut confondre les utilisateurs.

Avec cette étape, vous pouvez complètement masquer l’ancien menu et montrer un effet de chargement à la place. Cela donne l’impression que le site Web est plus rapide et améliore l’expérience utilisateur. Navi+ fournit une option simple intégrée pour cela dans les paramètres de publication — activez-la et configurez le Sélecteur CSS de l’élément à masquer, avec un suffixe optionnel (M) ou (D) pour un contrôle spécifique à l’appareil.

3. Insérer un Menu Navi+ à Tout Moment sur Votre Site Web

Le code ci-dessous peut être utilisé plusieurs fois sur un site Web avec différentes informations d’insertion (en particulier l’ID Intégré, tel que SF-123456789). Lorsque le site Web est rendu, le menu sera déployé et affiché à l’endroit où le code est inséré lorsque les conditions sont remplies. Ce type de menu convient à : Mega menu, Grid, etc.

<!-- Insérez le code où le menu SF-123456789 apparaît. (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;
<!-- Insérez le code où le menu SF-123456789 apparaît -->

Important: Le code ci-dessus utilise le code d’intégration d’exemple SF-123456789. Assurez-vous de le remplacer par votre code d’intégration de menu réel.