Veröffentlichen auf Squarespace / Sonstiges
Auf WordPress? Verwenden Sie stattdessen das dedizierte Naviplus Menu Builder Plugin — keine Theme-Änderungen, kein Shortcode für die Tab Bar erforderlich.
Auf Shopify? Installieren Sie die dedizierte Shopify-App — sie ist für die Plattform optimiert und verfügt über integrierte Veröffentlichungsoptionen.
Auf Wix? Siehe den dedizierten Auf Wix veröffentlichen-Leitfaden — installiere die Navi+ App aus dem Wix App Market und sie bettet sich automatisch ein, kein Code. Die manuelle Einbettung unten ist nur für Squarespace, Webflow und benutzerdefinierte Websites.
Diese Seite behandelt die manuelle Script-Einbettung, die der richtige Weg für Squarespace, Webflow, Magento und benutzerdefinierte Websites, die mit PHP, Node.js oder reinem HTML erstellt wurden, ist. Sie haben die folgenden Implementierungsmethoden:
1. Navi+ auf Ihrer Website einbetten
Diese Implementierungsmethode eignet sich für alle Menütypen, die Navi+ derzeit unterstützt, einschließlich: Tabbar, Mega Menu, Slide Menu, FAB und Grid Menu. Dieser Code muss nur einmal für alle Menüs verwendet werden.
<!-- Fügen Sie diesen Code in den <head> Ihrer Website ein. (c) naviplus.io -->
<script>(window._navi_setting ||= []).push({
token: "NAVI123456"
});</script>
<script src="https://live.naviplus.app/start.js" async></script>
<!-- Fügen Sie diesen Code in den <head> Ihrer Website ein -->
Häufig gestellte Fragen
Was ist ein Token?
Jedem Navi+ Konto wird ein eindeutiger Token zugewiesen. Sie können diesen Token direkt aus dem Kopfbereich der Anwendung anzeigen und kopieren. Der Token wird verwendet, um Ihr Menü sicher zu veröffentlichen.
Was ist https://live.naviplus.app/start.js?
Dies ist die feste URL von Navi+, die die Initialisierungslogik der Anwendung enthält. Das Script ist leicht (etwa 4 KB) und ermöglicht eine schnelle Ladung auf den meisten Geräten und Netzwerkbedingungen. Es wird über Cloudflare und BunnyCDN bereitgestellt, um stabile globale Leistung und zuverlässige Kompatibilität mit modernen Browsern zu bieten.
Die Verwendung der asynchronen Ladefunktion bedeutet auch, dass sich dies nicht auf den Website-Ladeprozess auswirkt.
Verlangsamt dieser Einbettungscode meine Website?
Der Code unten ist äußerst leicht und kann in Ihre Website eingefügt werden, ohne die Geschwindigkeit zu beeinflussen (nur etwa 100-200 ms für das erste Laden und 0 ms für nachfolgende Lade), Kundenerlebnis oder SEO-Bewertungen
Was ist der beste Ort, um diesen Code-Snippet einzufügen?
Im Head-Bereich (oder so früh wie möglich). Warum? Die Website lädt Ressourcen nacheinander, um die Schnittstelle zu rendern. Das Platzieren von Navi+ am Anfang des HTML-Codes hilft Ihrem Menü, so schnell wie möglich angezeigt zu werden, indem es wartet, bis die Bedingungen erfüllt sind. Anschließend wird das Menü sofort angezeigt. Dies verbessert das Benutzererlebnis.
Wie kann ich überprüfen, ob dieser Code erfolgreich in meine Website eingebettet wurde?
Es gibt zwei Möglichkeiten:
Methode 1 (für alle):
Öffnen Sie Ihre Website mit dem Suffix #navidebug-on, zum Beispiel: https://domain.com#navidebug-on. Wenn die Website in den Debug-Modus wechselt, ist die Einbettung korrekt. Der Debug-Modus hilft Ihnen, CSS-Selektoren leicht zu identifizieren. Verwenden Sie #navidebug-off, um ihn auszuschalten.
Methode 2 (für Entwickler):
Öffnen Sie die Inspektionswerkzeuge Ihres Browsers, gehen Sie zur Konsolen-Registerkarte und suchen Sie nach einer grünen Nachricht: "Using Navi+..". Diese Nachricht zeigt an, dass der Code erfolgreich eingebettet wurde.
2. Navi+ Menü an einer beliebigen Stelle auf Ihrer Website einfügen
Der Code unten kann mehrfach auf einer Website mit unterschiedlichen Eingabeinformationen verwendet werden (besonders die Embedded ID, wie SF-123456789). Wenn die Website gerendert wird, wird das Menü an der Position bereitgestellt und angezeigt, an der der Code eingefügt wird. Dieser Menütyp ist geeignet für: Mega Menu, Grid usw.
<!-- Fügen Sie den Code dort ein, wo das Menü SF-123456789 angezeigt wird. (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>
<!-- Fügen Sie den Code dort ein, wo das Menü SF-123456789 angezeigt wird -->
Wichtig: Der obige Code verwendet den Beispiel-Einbettungscode SF-123456789. Stellen Sie sicher, dass Sie ihn durch Ihren tatsächlichen Menü-Einbettungscode ersetzen.