Publier sur Wix / 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, le FAB s’affiche sur tout le site automatiquement une fois publié dans l’éditeur.
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 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>
<script src="https://live.naviplus.app/start.js" async></script>
<!-- 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 offrir 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 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 : "Utilisation de Navi+..". Ce message indique que le code a été intégré avec succès.
2. 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>
<script src="https://live.naviplus.app/start.js" async></script>
<!-- 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.