ReactとNext.jsを使ってNotiondesk Messengerをインストールする方法

Notiondesk は、React および Next.js アプリケーションに Messenger をインストールするための公式 JavaScript SDK を提供します。

ウェブサイトが React、Next.js、またはその他のシングルページアプリケーションで構築されている場合は、標準の Messenger <script>スニペットの代わりに SDK を使用してください。

始める前に

必要なもの：

• ワークスペースに設定されている Notiondesk Messenger

• あなたのメッセンジャーID

• ReactまたはNext.jsアプリケーション

• アプリケーションのソースコードへのアクセス

Messenger IDとインストールオプションは、Notiondesk Messengerの設定で確認できます。

Messenger SDKをインストールしてください。

公式パッケージをインストールしてください。

毛糸を使って：

pnpmを使用する場合：

公式パッケージはnpmで入手可能です。

ReactにMessengerをインストールする

NotiondeskProvider をインポートし、Messenger を利用可能にするアプリケーションの部分をラップします。

ほとんどのアプリケーションでは、プロバイダをアプリのルートディレクトリ付近に配置してください。

YOUR_MESSENGER_ID を、Notiondesk ワークスペースの Messenger ID に置き換えてください。

Messenger は、NotiondeskProvider 内にレンダリングされるコンポーネントで使用できるようになりました。

Reactコンポーネントからメッセンジャーを開く

インターフェースからMessengerを制御する必要がある場合は、useNotiondeskフックを使用してください。

例えば、独自のサポートボタンを作成できます。

useNotiondesk を使用するコンポーネントは、NotiondeskProvider の内部でレンダリングされなければなりません。

Next.jsにMessengerをインストールする

Messengerはブラウザ上で動作するため、Messenger統合はクライアントコンポーネントから初期化する必要があります。

以下の例では、Next.jsのApp Routerを使用しています。

1. Notiondesk クライアントコンポーネントを作成します。

notiondesk-setup.tsx のようなコンポーネントを作成します。

YOUR_MESSENGER_ID をあなたの Notiondesk Messenger ID に置き換えてください。

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

yarn add @notiondesk-so/messenger-js-sdk

pnpm add @notiondesk-so/messenger-js-sdk

import { NotiondeskProvider } from "@notiondesk-so/messenger-js-sdk/react";

export function App({ children }) {
  return (
    <NotiondeskProvider messengerId="YOUR_MESSENGER_ID">
      {children}
    </NotiondeskProvider>
  );
}

import { useNotiondesk } from "@notiondesk-so/messenger-js-sdk/react";

export function SupportButton() {
  const { show } = useNotiondesk();

  return (
    <button onClick={() => void show()}>
      Contact support
    </button>
  );
}

"use client";

import {
  NotiondeskProvider,
  useNotiondesk,
} from "@notiondesk-so/messenger-js-sdk/react";
import type { ReactNode } from "react";

function SupportButton() {
  const { show } = useNotiondesk();

  return (
    <button onClick={() => void show()}>
      Contact support
    </button>
  );
}

export function NotiondeskSetup({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <NotiondeskProvider messengerId="YOUR_MESSENGER_ID">
      {children}
      <SupportButton />
    </NotiondeskProvider>
  );
}

2. プロバイダーをレイアウトに追加します

ルートレイアウトからクライアントコンポーネントをレンダリングします。

ルートレイアウトに NotiondeskSetup を配置すると、アプリケーション全体で Messenger が利用できるようになります。

Messengerをアプリケーションの特定の部分でのみ利用可能にする必要がある場合は、プロバイダーをより具体的なレイアウトまたはページに配置してください。

Messengerをプログラムで制御する

Reactフックを使用すると、コンポーネントから使用できるMessengerコントロールが公開されます。

例えば：

これらの方法を使用すると、Messengerを独自のボタン、ナビゲーション、サポートメニュー、またはその他のアプリケーションUIに接続できます。

SDKは、言語やテーマの変更など、追加の設定や制御もサポートしています。

条件付きでメッセンジャーをロードする

enabled オプションを使用すると、Messenger へのアクセス権を持たないユーザーが Messenger を読み込まないようにすることができます。

Messengerを有効にするかどうかは、アプリケーション独自の権限ロジックで判断するようにしてください。

これは、Messengerをログイン済みの顧客、特定のプランのユーザー、またはアプリケーションの特定の領域のみに利用可能にしたい場合に役立ちます。

import { NotiondeskSetup } from "./notiondesk-setup";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <NotiondeskSetup>
          {children}
        </NotiondeskSetup>
      </body>
    </html>
  );
}

const notiondesk = useNotiondesk();

await notiondesk.show();
await notiondesk.hide();
await notiondesk.toggle();

<NotiondeskProvider
  messengerId="YOUR_MESSENGER_ID"
  enabled={currentUser.canUseSupportWidget}
>
  {children}
</NotiondeskProvider>

ログインしているユーザーを識別する

Notiondesk Messenger は、バックエンドで生成された署名付きユーザー トークンを使用して、認証済みユーザーを識別できます。

トークンをプロバイダーに渡します。

React やその他のブラウザ コードで Notiondesk アプリ シークレットを公開しないでください。

アプリシークレットはサーバー上に保持する必要があります。フロントエンドは、バックエンドで生成された署名済みの有効期限の短いユーザートークンのみを受け取るようにしてください。

インストールを確認する

SDKをインストールした後：

<NotiondeskProvider
  messengerId="YOUR_MESSENGER_ID"
  userToken={userToken}
>
  {children}
</NotiondeskProvider>

1. アプリケーションを起動またはデプロイします。

2. NotiondeskProvider 内にレンダリングされたページを開きます

3. Messengerが正しく読み込まれることを確認してください。

4. カスタムサポートボタンを追加した場合は、それをクリックしてMessengerが開くことを確認してください。

5. アプリケーション内のページ間のナビゲーションをテストする

6. JavaScriptエラーがないかブラウザのコンソールを確認してください。

Next.jsの場合、クライアント/サーバーのレンダリング動作はローカル開発環境とは異なる可能性があるため、本番環境用のビルドもテストしてください。

トラブルシューティング

"use client";

<NotiondeskProvider messengerId="YOUR_MESSENGER_ID">
  <SupportButton />
</NotiondeskProvider>

const { show } = useNotiondesk();

<button onClick={() => void show()}>
  Contact support
</button>