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

Publier sur Squarespace / Autres

Sur WordPress ? Utilisez le plugin Naviplus Menu Builder dédié au lieu de l’intégration manuelle ci-dessous — pas d’éditions de thème, placez le Mega Menu 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.

Sur Wix ? Consultez le guide dédié Publier sur Wix — installez l’application Navi+ depuis le Wix App Market et elle s’intègre automatiquement, pas de code. L’intégration manuelle ci-dessous est réservée à Squarespace, Webflow et sites personnalisés.

Cette page couvre la méthode d’intégration de script manuelle, qui est le bon chemin pour Squarespace, Webflow, Magento, et les 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 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 dans l'onglet Console, et cherchez un message vert : "Using 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 mobile.

Sélecteurs CSS courants pour cette option :

  • header — fonctionne sur la plupart des plateformes
  • .header-wrapper — certaines plateformes
  • .mobile-header — plateformes avec un élément d'en-tête mobile dédié

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.

Sur mobile, la plupart des plateformes incluent le menu mobile dans l'en-tête ou un bouton hamburger, donc il n'y a peut-être pas d'élément autonome à remplacer. Insérer Avant ou Insérer Après est recommandé à la place.

Si votre plateforme dispose d'un élément de menu mobile dédié 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 :

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

Pour les menus mobiles, l’utilisation du suffixe (M) garantit que le menu n’apparaît que sur les appareils mobiles et n’interfère pas avec la mise en page du 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é à 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.