Wix / Squarespace / その他で公開
WordPressをご利用ですか？ 手動埋め込みの代わりに専用のNaviplus Menu Builderプラグインを使用してください — テーマの編集は不要で、Tab Barのショートコードも必要ありません。
Shopifyをご利用ですか？ 専用のShopifyアプリをインストールしてください — プラットフォームに最適化されており、組み込みの公開オプションがあります。
Wixをご利用ですか？ Wix アプリマーケットから Navi+ アプリをインストールした場合、Navi+ はサイトに自動的に埋め込まれます — 以下の手順はスキップできます。Wix アプリをインストールしていない場合でも、以下の手動埋め込みで Navi+ を Wix で利用できます。
このページでは、手動スクリプト埋め込みメソッドについて説明します。これは、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>
<script src="https://live.naviplus.app/start.js" async></script>
<!-- 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>
<script src="https://live.naviplus.app/start.js" async></script>
<!-- Insert the code where the menu SF-123456789 appears -->
重要: 上記のコードはサンプル埋め込みコードSF-123456789を使用しています。実際のメニュー埋め込みコードに置き換えてください。