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 la grille via un shortcode ou un 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 Grid apparaît au-dessus de la zone de contenu principal de la page, affiché comme une section complète.

C'est la configuration la plus courante pour un Menu Grid sur des plateformes non-Shopify.

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 une 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 Grid apparaît juste en dessous de l'en-tête.

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 une 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 caché et Navi+ prend sa place.

La plupart des plateformes n'ont pas de Menu Grid intégré, donc le mode Remplacer est rarement applicable pour ce type de menu. Insérer Avant main est l'approche recommandée.

Si votre plateforme a un élément de navigation de style grille que vous souhaitez remplacer, utilisez Mode Debug ou Browser DevTools pour trouver son Sélecteur CSS.

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 :

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

Ceci est utile lorsque vous souhaitez que le Menu Grid n’apparaisse que sur certains appareils, ou lorsque vous avez besoin d’un placement différent sur mobile par rapport au bureau.

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 Embarqué, tel que SF-123456789). Lorsque le site Web est rendu, le menu sera déployé et affiché à la position 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.