WordPress / WooCommerce / Wix / その他で公開

Shopifyにウェブサイトを展開する場合は、こちらに専用のShopifyアプリをインストールしてください: https://apps.shopify.com/pronavi-navigation-design - このプラットフォームに最適化されており、便利な組み込みオプションが多数用意されています。

他のプラットフォーム（WordPress, WooCommerce, Wix, Squarespace, Webflow, Magento, およびPHP、Node.js、または純粋なHTMLで構築されたカスタムウェブサイトなど）にウェブサイトを展開する場合、以下の実装方法があります:

1. ウェブサイトにNavi+を埋め込む

この実装方法は、Navi+が現在サポートしているすべてのメニュータイプ（Tabbar、Mega menu、Slide menu、FAB、Grid menu）に適しています。このコードは、すべてのメニューに対して一度だけ使用する必要があります。

<!-- Insert this code to the <head> of website. (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;
<!-- Insert this code to the <head> of website -->

FAQ (よくある質問)

トークンとは何ですか？

各Navi+アカウントには一意のトークンが割り当てられています。このトークンは、アプリケーションのヘッダーから直接表示およびコピーできます。トークンは、メニューを安全に公開するために使用されます。

https://live.naviplus.app/start.jsとは何ですか？

これは、アプリケーションの初期化ロジックを含むNavi+の固定URLです。このスクリプトは軽量（約4KB）で、ほとんどのデバイスやネットワーク条件で迅速に読み込むことができます。CloudflareとBunnyCDNを介して配信され、安定したグローバルパフォーマンスと最新のブラウザとの信頼性のある互換性を提供します。

非同期読み込み方式を使用することで、ウェブサイトの読み込みプロセスに影響を与えません。

この埋め込みコードはウェブサイトを遅くしますか？

以下のコードは非常に軽量で、速度（初回読み込みに約100-200ms、以降の読み込みは0ms）や顧客体験、SEOスコアに影響を与えることなく、ウェブサイトに挿入できます。

このコードスニペットを挿入するのに最適な場所はどこですか？

ヘッダーセクション（またはできるだけ早い段階）です。なぜなら、ウェブサイトはインターフェースをレンダリングするためにリソースを順次読み込むからです。HTMLコード内でNavi+を最初に配置することで、条件が満たされるとすぐにメニューが表示されるようになります。これにより、ユーザー体験が向上します。

このコードがウェブサイトに正常に埋め込まれたかどうかを確認するにはどうすればよいですか？

2つの方法があります：

方法1（誰でも）：

ウェブサイトを#navidebug-onのサフィックスで開きます。例えば：https://domain.com#navidebug-on。ウェブサイトがデバッグモードに切り替わる場合、埋め込みは正常に機能しています。デバッグモードは、CSSセレクタを簡単に特定するのに役立ちます。#navidebug-offを使用してオフにします。

方法2（開発者向け）：

ブラウザの検査ツールを開き、コンソールタブに移動し、緑色のメッセージ「Using Navi+..」を探します。このメッセージは、コードが正常に埋め込まれたことを示しています。

2. ウェブサイトの任意のポイントにNavi+メニューを挿入する

以下のコードは、異なる挿入情報（特に埋め込みID、例えばSF-123456789）を使用して、ウェブサイトで複数回使用できます。ウェブサイトがレンダリングされると、条件が満たされると、コードが挿入された位置にメニューが展開され、表示されます。このメニュータイプは、Mega menu、Gridなどに適しています。

<!-- Insert the code where the menu SF-123456789 appears. (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;
<!-- Insert the code where the menu SF-123456789 appears -->

重要: 上記のコードはサンプル埋め込みコードSF-123456789を使用しています。実際のメニュー埋め込みコードに置き換えてください。