ウェブサイトにNotiondeskメッセンジャーをインストールする方法

Notiondesk Messenger は、Notiondesk ヘルプセンターを Web サイトまたは Web アプリケーションに直接組み込みます。

訪問者はMessengerを使って、ウェブサイトから離れることなく、ヘルプセンターの検索、記事の閲覧、AIアシスタントとのチャット、変更履歴の更新情報の確認、チームへの問い合わせを行うことができます。

このガイドでは、標準的なウェブサイトに Notiondesk Messenger をインストールする方法を説明します。

始める前に

Notiondesk Messenger をインストールする前に、以下のものを用意してください。

• Notiondesk ヘルプセンター

• Notiondesk で設定されたメッセンジャー

• ウェブサイトのコードまたはサイト全体のカスタムコード設定へのアクセス

• あなた独自の Notiondesk Messenger インストール スニペット

Messenger内で訪問者がAIアシスタントを使用できるようにするには、Notiondesk AIチャットボットも設定してください。AI チャットボットの設定と有効化を参照してください。

インストール方法を選択してください

ご使用のウェブサイトに合ったインストール方法を選択してください。

ほとんどの従来型ウェブサイトでは、JavaScriptスニペットが最も簡単なインストール方法です。

標準的なウェブサイトにメッセンジャーをインストールする

1. Messengerのインストールコードをコピーしてください。

Notiondesk でMessenger の設定を開き、「インストール」セクションを探してください。

Messenger用に生成されたインストールスニペットをコピーしてください。

コードの形式は次のとおりです。

YOUR_MESSENGER_ID は、ウェブサイトに読み込むべきメッセンジャーを識別します。

他のウェブサイトやアカウントからメッセンジャーIDをコピーするのではなく、自分のNotiondeskダッシュボードからスニペットをコピーしてください。

2. スニペットをウェブサイトに追加する

Messengerのスニペットを、閉じタグ</body>の直前に貼り付けてください。

ウェブサイトで共有レイアウト、テンプレート、フッター、またはサイト全体のカスタムコードセクションを使用している場合は、そこにスニペットを一度追加することで、ウェブサイト全体でMessengerが読み込まれるようになります。

Messengerを特定のページにのみ表示させたい場合は、そのページにのみスニペットを含めてください。

3. 変更内容を公開する

スニペットを追加したら、ウェブサイトを保存してデプロイまたは公開してください。

Messengerのコードは、公開されているウェブサイト上に必ず設置する必要があります。ローカル環境や非公開バージョンにのみコードを追加しても、訪問者はMessengerを利用できません。

<script
  async
  src="https://static.notiondesk.help/messenger/widget.js"
  data-messenger-id="YOUR_MESSENGER_ID">
</script>

<body>
  <!-- Your website -->

  <script
    async
    src="https://static.notiondesk.help/messenger/widget.js"
    data-messenger-id="YOUR_MESSENGER_ID">
  </script>
</body>

インストールを確認する

公開されているウェブサイトをブラウザで開いてください。

インストールが正常に完了すると、インストールコードを含むページで Notiondesk Messenger ランチャーが読み込まれます。

Messengerを開き、期待されるNotiondeskというコンテンツが表示されることを確認してください。

以下の項目をテストできます。

• Messengerの起動と終了

• ヘルプセンターを検索

• 記事を開く

• AIチャットボットが有効になっている場合は、AIとの会話を開始します。

• 有効にしている他のメッセンジャーセクションを開く

Messengerが表示されない場合は、ブラウザの開発者ツールを開き、ウィジェットが正常に読み込まれているかどうかを確認してください。

React、Next.js、Vue、Nuxt、およびSPA

React、Next.js、Vue、Nuxt、およびその他のシングルページアプリケーションでは、標準のスクリプトスニペットを手動で追加する代わりに、公式の@notiondesk-so/messenger-js-sdkパッケージを使用する必要があります。

パッケージのインストール方法：

Yarnまたはpnpmを使ってインストールすることもできます。

SDKは、以下の専用の統合機能を提供します。

npm install @notiondesk-so/messenger-js-sdk

• JavaScriptとTypeScript

• React

• Next.js

• Vue

• ヌクスト

SDKには、Messengerの表示、非表示、切り替え、設定、および破棄を行うためのメソッドも用意されています。

フレームワーク統合では、クライアント側で Notiondesk Messenger を初期化する必要があります。サーバー側レンダリング中は Messenger SDK を初期化しないでください。

意図的に別々のメッセンジャーインスタンスを管理する場合を除き、標準のメッセンジャースニペットとSDKの両方を同じアプリケーションにインストールしないでください。

フレームワークの完全なセットアップについては、 「React と Next.js を使用して Notiondesk Messenger をインストールする」ガイドを参照してください。

トラブルシューティング