Veröffentlichen auf WordPress / Woo / Wix / Andere

Wenn Sie Ihre Website auf Shopify bereitstellen, installieren Sie bitte die dedizierte Shopify-App hier: https://apps.shopify.com/pronavi-navigation-design - Sie ist für diese Plattform optimiert und ermöglicht eine stabile Bereitstellung mit vielen nützlichen integrierten Optionen.

Wenn Sie Ihre Website auf anderen Plattformen (wie WordPress, WooCommerce, Wix, Squarespace, Webflow, Magento und benutzerdefinierten Websites, die mit PHP, Node.js oder reinem HTML erstellt wurden…), haben Sie 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> der Website ein. (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;
<!-- Fügen Sie diesen Code in den <head> der Website ein -->

FAQ (Häufig gestellte Fragen)

Was ist ein Token?

Jedes Navi+-Konto erhält ein einzigartiges Token. Sie können dieses Token direkt aus dem Anwendungsheader anzeigen und kopieren. Das 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 Skript ist leichtgewichtig (ca. 4KB), sodass es schnell auf den meisten Geräten und Netzwerkbedingungen geladen werden kann. Es wird über Cloudflare und BunnyCDN bereitgestellt, um eine stabile globale Leistung und zuverlässige Kompatibilität mit modernen Browsern zu gewährleisten.

Die Verwendung der asynchronen Lade-Methode bedeutet auch, dass sie den Ladeprozess der Website nicht beeinflusst.

Verlangsamt dieser Einbettungscode meine Website?

Der folgende Code ist extrem leichtgewichtig und kann in Ihre Website eingefügt werden, ohne die Geschwindigkeit zu beeinträchtigen (er benötigt nur etwa 100-200 ms für den ersten Ladevorgang und 0 ms für nachfolgende Ladevorgänge), die Benutzererfahrung oder die SEO-Werte.

Was ist der beste Ort, um diesen Code-Schnipsel einzufügen?

Im Kopfbereich (oder so früh wie möglich). Warum? Die Website lädt die Ressourcen sequenziell, um die Benutzeroberfläche darzustellen. Wenn Sie Navi+ so früh wie möglich im HTML-Code platzieren, wird Ihr Menü bereit sein, so schnell wie möglich angezeigt zu werden, indem es wartet, bis die Bedingungen erfüllt sind, dann wird das Menü sofort erscheinen. Dies verbessert die Benutzererfahrung.

Wie kann ich feststellen, ob dieser Code erfolgreich auf meiner 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, funktioniert 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 Inspektor-Tools Ihres Browsers, gehen Sie zum Tab Konsole und suchen Sie nach einer grünen Nachricht: „Using Navi+..“. Diese Nachricht zeigt an, dass der Code erfolgreich eingebettet wurde.

2. Fügen Sie ein Navi+-Menü an beliebiger Stelle auf Ihrer Website ein

Der folgende Code kann mehrfach auf einer Website mit unterschiedlichen Einfügeinformationen (insbesondere der Embeded ID, wie SF-123456789) verwendet werden. Wenn die Website gerendert wird, wird das Menü an der Stelle bereitgestellt und angezeigt, an der der Code eingefügt wurde, wenn die Bedingungen erfüllt sind. Dieser Menütetyp eignet sich für: Mega menu, Grid usw.

<!-- Fügen Sie den Code dort ein, wo das Menü SF-123456789 erscheint. (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;
<!-- Fügen Sie den Code dort ein, wo das Menü SF-123456789 erscheint -->

Wichtig: Der obige Code verwendet den Beispiel-Einbettungscode SF-123456789. Stellen Sie sicher, dass Sie ihn durch Ihren tatsächlichen Menü-Einbettungscode ersetzen.