Publier sur WordPress / WooCommerce / Wix / Autres

Si vous déployez votre site Web sur Shopify, veuillez installer l’application dédiée Shopify ici : https://apps.shopify.com/pronavi-navigation-design - Elle est optimisée pour cette plateforme, permettant un déploiement stable avec de nombreuses options intégrées utiles.

Si vous déployez votre site Web sur d’autres plateformes (telles que WordPress, WooCommerce, 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 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 recherchez 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>
&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.