Navi+をあなたのウェブサイトや外部アプリと統合する
ここでは、Navi+を他のアプリ（チャットツール、ロイヤリティなど）と接続する方法に関するガイドを見つけることができます。メニュー項目として追加したり、Navi+から直接アプリを開いたりして、すべてがスムーズに連携することを確認できます。
1. 他のスティッキーアプリを単一のNavi+メニュー項目に統合する
Navi+は複数のアプリ（チャットボックス、ロイヤリティ、ソーシャルプルーフ、プロモバーなど）をメニュー項目に統合し、ウェブサイトをクリーンに保ち、重複を防ぎます。特に画面スペースが限られているモバイルデバイスでは非常に価値があります。
これを実現するには、次の2つのステップに従ってください：
• ステップ1：CSSを使用してスティッキーアプリアイコンを隠します。詳細はこちら
• ステップ2：メニュー項目にJavaScriptを使用して、クリックするとそれぞれのアプリパネルが開くようにします。
Tidiチャット統合の例を見てください。これは比較的高度な設定ですので、サポートが必要な場合はNavi+サポートにお問い合わせください。
2. JavaScriptトリガー – 外部アプリと対話する
Navi+は、ユーザーがクリックしたときにメニュー項目からJavaScript関数を実行することを許可します（javascript:Function）。TidioチャットをNavi+メニュー項目として統合するために2つのJavaScript関数を使用する方法を理解するために、Tidiチャット統合の例を見てください：
- Tidioアイコンを隠す：Tidioがレンダリングされるのを待ってから隠すグローバル関数
- openTidio()：ユーザーが”Chat with us”メニュー項目をクリックするとTidioのチャットパネルを開きます
Navi+は、他のアプリケーションやJavaScriptコードとの対話を可能にするために、クラスと属性の割り当てを定義することもサポートしています（例えば、id=”menu-item-1”の形式で）。クラスや属性を介してメニュー項目に直接アクセスするためにJavaScript関数を使用できます。例えば、ウォークスルーチュートリアルを作成するために。
3. 外部CSSでNavi+インターフェースをカスタマイズする
各Navi+メニューは、id=”SF-123456789”（埋め込まれたid）を持つdiv要素によって定義されています。メニューインターフェースをカスタマイズするためのCSSコードを書くために、Navi+メニューのHTML/CSS構造フレームワークをこちらで確認してください。
例えば、レベル2メニュー項目の色を変更するには、次のCSSを書くことができます：
#SF-123456789 ul li ul.children li .name { color: red; }
Navi+は、他のアプリケーションやJavaScriptコードとの対話を可能にするために、クラスと属性の割り当てを定義することもサポートしています（例えば、id=”menu-item-1”の形式で）。クラス名や属性を使用して各メニュー項目のスタイルを設定できます。
4. Navi+メニュー間の通信
Navi+メニュー項目から、次の構文を使用して別のNavi+スライドメニューを開くことができます：open:NaviMenu.
この構文を使用すると、スライドメニューが他のスライドメニューを呼び出すことによって、メニューのレベルを無限に拡張できます。
5. ウェブサイトのどこからでもスライドメニューを開く
スライドメニューを使用すると、他のNavi+メニューからメニュー項目を介して開くことに加えて、JavaScript関数を呼び出すことによってNavi+スライドメニューをトリガーすることもできます：naviman.openNaviMenu()。
例えば：HTMLとCSSを使用して浮遊ボタンを作成し、そのクリックアクションをNavi+スライドメニューを開くように割り当てると、すぐにプロフェッショナルな外観のメニューが得られます。
6. ユーザーアクションをシミュレートする（クリック、フォーカス、スクロールなど）
Navi+は、メニュー項目がクリックされたときにトリガーされるいくつかの関数を提供します：
open:clickToは、HTML CSSセレクタをクリックすることをシミュレートします。これは、Navi+メニューがデフォルトのハンバーガーメニュー、検索ツール、カートパネル、言語ドロップダウンをトリガーしたり、他のアプリからチャットツールをアクティブにしたりするのに非常に役立ちます。open:focusToは、HTML CSSセレクタにフォーカスを合わせることをシミュレートします。これは、検索ツールやメール購読フィールドのクリックをシミュレートするのに非常に便利です。scroll:Top、scroll:Bottom、scroll:OnPageは、ウェブページを目的のエリアにスクロールします。これは、異なるページに移動するのではなく、ページ上のターゲットセクションにスクロールしたいときに非常に便利です。
7. サイトのエンゲージメントを共有し改善するために
Navi+は、メニュー項目がクリックされたときにトリガーされるいくつかの関数を提供します：
open:ShareMeは、ウェブサイトのリンクを共有しますshare:CopyUrlは、現在のURLをデバイスのクリップボードにコピーしますshare:Facebookは、現在のURLをFacebookに共有しますshare:Tweetは、現在のURLをTwitter（X）に共有します
8. 他のデバイスアプリとの統合（電話など）
Navi+は、メニュー項目がクリックされたときにトリガーされるいくつかの関数を提供します：
tel:+[国コード][電話]は、番号に電話をかけますsms:+[国コード][電話]?body=[テキスト]は、設定された内容（オプション）で番号にSMSメッセージを送信しますmailto:[アドレス]は、メールを送信しますhttps://m.me/[あなたの名前]は、Facebook Messengerでチャットしますhttps://wa.me/[電話]は、WhatsAppでチャットしますhttps://lin.ee/[line-code]は、Lineでチャットしますhttps://zalo.me/+[国コード][電話]は、Zaloでチャットします
9. Shopify専用
Navi+は、メニュー項目がクリックされたときにトリガーされるいくつかの関数を提供します：
open:ChangeLanguageは、ウェブサイトがShopifyを使用している場合に言語を変更します- Shopify Inbox：Shopify Inboxアイコンを隠し、クリックでチャットパネルを開くNavi+メニューに統合します。詳細はこちら
- ハンバーガーメニューまたはカート、検索パネルを開く：詳細はこちら
リストに見当たらない？
統合リクエストをお気軽にお送りください。お手伝いできることを嬉しく思いますし、Navi+の成長にも貢献します。