Comment installer Messenger avec React et Next.js

Notiondesk fournit un SDK JavaScript officiel pour installer Messenger dans les applications React et Next.js.

Utilisez le SDK au lieu de l' extrait de code standard Messenger <script> lorsque votre site Web est construit avec React, Next.js ou une autre application monopage.

Avant de commencer

Vous avez besoin de :

• Un Messenger Notiondesk configuré dans votre espace de travail

• Votre identifiant Messenger

• Une application React ou Next.js

• Accès au code source de votre application

Vous pouvez trouver votre identifiant Messenger et les options d'installation dans vos paramètres Messenger Notiondesk .

Installez le SDK Messenger

Installez le package officiel :

Avec du fil :

Avec pnpm :

Le package officiel est disponible sur npm .

Installer Messenger dans React

Importez NotiondeskProvider et enveloppez la partie de votre application où Messenger doit être disponible.

Pour la plupart des applications, placez le fournisseur près de la racine de votre application :

Remplacez YOUR_MESSENGER_ID par l'ID Messenger de votre espace de travail Notiondesk.

Messenger est désormais disponible pour les composants rendus dans NotiondeskProvider.

Ouvrir Messenger depuis un composant React

Utilisez le hook useNotiondesk lorsque vous devez contrôler Messenger depuis votre interface.

Par exemple, vous pouvez créer votre propre bouton d'assistance :

Le composant utilisant useNotiondesk doit être rendu à l'intérieur de NotiondeskProvider.

Installer Messenger dans Next.js

Notiondesk Messenger s'exécute dans le navigateur, l'intégration de Messenger doit donc être initialisée à partir d'un composant client.

L'exemple suivant utilise le routeur d'applications Next.js.

1. Créez un composant client Notiondesk

Créez un composant tel que notiondesk-setup.tsx :

Remplacez YOUR_MESSENGER_ID par votre identifiant Messenger Notiondesk.

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. Ajoutez le fournisseur à votre mise en page

Affichez le composant client à partir de votre mise en page racine :

L'ajout de NotiondeskSetup dans la structure racine rend Messenger disponible dans toute l'application.

Si Messenger ne doit être disponible que sur certaines parties de votre application, placez le fournisseur dans une mise en page ou une page plus spécifique.

Contrôler Messenger par programmation

Le hook React expose des contrôles Messenger que vous pouvez utiliser depuis vos composants.

Par exemple:

Vous pouvez utiliser ces méthodes pour connecter Messenger à vos propres boutons, menus de navigation, menus d'assistance ou autres interfaces utilisateur d'application.

Le SDK prend également en charge des configurations et des contrôles supplémentaires, tels que la modification de la langue ou du thème.

Charger Messenger de manière conditionnelle

Vous pouvez empêcher le chargement de Messenger pour les utilisateurs qui ne devraient pas y avoir accès grâce à l'option enabled :

Laissez la logique d'autorisation de votre application décider si Messenger doit être activé.

Ceci est utile lorsque Messenger ne doit être accessible qu'aux clients connectés, à certains forfaits ou à certaines parties de votre application.

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>

Identifier les utilisateurs connectés

Notiondesk Messenger peut identifier les utilisateurs authentifiés en utilisant un jeton d'utilisateur signé généré par votre backend.

Transmettez le jeton au fournisseur :

Ne jamais exposer votre secret d'application Notiondesk dans React ou tout autre code de navigateur.

La clé secrète de l'application doit rester sur votre serveur. Votre interface utilisateur ne doit recevoir que le jeton utilisateur signé et éphémère généré par votre serveur.

Vérifiez l'installation

Après l'installation du SDK :

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

1. Démarrez ou déployez votre application.

2. Ouvrir une page rendue dans NotiondeskProvider

3. Vérifiez que Messenger se charge correctement.

4. Si vous avez ajouté un bouton d'assistance personnalisé, cliquez dessus et vérifiez que Messenger s'ouvre.

5. Testez la navigation entre les pages de votre application.

6. Vérifiez la console du navigateur pour les erreurs JavaScript.

Pour Next.js, testez également une version de production car le comportement de rendu client/serveur peut différer du développement local.

Dépannage

"use client";

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

const { show } = useNotiondesk();

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