Wie installiert man Notiondesk Messenger mit React und Next.js?

Notiondesk stellt ein offizielles JavaScript SDK für die Installation von Messenger in React- und Next.js-Anwendungen bereit.

Verwenden Sie das SDK anstelle des standardmäßigen Messenger <script>- Snippets , wenn Ihre Website mit React, Next.js oder einer anderen Single-Page-Anwendung erstellt wurde.

Bevor Sie beginnen

Sie benötigen:

• Ein Notiondesk Messenger ist in Ihrem Arbeitsbereich konfiguriert

• Ihre Messenger-ID

• Eine React- oder Next.js-Anwendung

• Zugriff auf den Quellcode Ihrer Anwendung

Ihre Messenger-ID und Installationsoptionen finden Sie in Ihren Messenger-Einstellungen (Notiondesk) .

Installieren Sie das Messenger SDK

Installieren Sie das offizielle Paket:

Mit Garn:

Mit pnpm:

Das offizielle Paket ist auf npm verfügbar .

Messenger in React installieren

Importieren Sie NotiondeskProvider und umschließen Sie den Teil Ihrer Anwendung, in dem Messenger verfügbar sein soll.

Platzieren Sie den Provider in den meisten Fällen in der Nähe des Stammverzeichnisses Ihrer App:

Ersetzen Sie YOUR_MESSENGER_ID durch die Messenger-ID aus Ihrem Notiondesk-Arbeitsbereich.

Messenger ist jetzt für Komponenten verfügbar, die innerhalb von NotiondeskProvider gerendert werden.

Messenger aus einer React-Komponente öffnen

Verwenden Sie den Hook useNotiondesk, wenn Sie Messenger über Ihre Benutzeroberfläche steuern müssen.

Sie können beispielsweise Ihren eigenen Support-Button erstellen:

Die Komponente, die useNotiondesk verwendet, muss innerhalb von NotiondeskProvider gerendert werden.

Messenger in Next.js installieren

Notiondesk Messenger läuft im Browser, daher muss die Messenger-Integration von einer Clientkomponente aus initialisiert werden.

Das folgende Beispiel verwendet den Next.js App Router.

1. Erstellen Sie eine Notiondesk Clientkomponente

Erstellen Sie eine Komponente wie z. B. notiondesk-setup.tsx:

Ersetzen Sie YOUR_MESSENGER_ID durch Ihre 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. Fügen Sie den Anbieter Ihrem Layout hinzu.

Rendern Sie die Clientkomponente aus Ihrem Root-Layout:

Durch das Einfügen von NotiondeskSetup in das Root-Layout wird Messenger in der gesamten Anwendung verfügbar.

Sollte Messenger nur in bestimmten Bereichen Ihrer Anwendung verfügbar sein, platzieren Sie den Anbieter stattdessen in einem spezifischeren Layout oder auf einer Seite.

Messenger programmatisch steuern

Der React-Hook stellt Messenger-Steuerelemente bereit, die Sie in Ihren Komponenten verwenden können.

Zum Beispiel:

Sie können diese Methoden verwenden, um Messenger mit Ihren eigenen Schaltflächen, Navigationselementen, Support-Menüs oder anderen Anwendungs-UI-Elementen zu verbinden.

Das SDK unterstützt außerdem zusätzliche Konfigurations- und Steuerungsmöglichkeiten wie das Ändern der Sprache oder des Designs.

Messenger bedingt laden

Mit der Option enabled können Sie verhindern, dass Messenger für Benutzer geladen wird, die keinen Zugriff darauf haben sollten:

Die Berechtigungslogik Ihrer Anwendung sollte dafür verantwortlich sein, zu entscheiden, ob Messenger aktiviert werden soll.

Dies ist nützlich, wenn Messenger nur für angemeldete Kunden, bestimmte Tarife oder bestimmte Bereiche Ihrer Anwendung verfügbar sein soll.

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>

Angemeldete Benutzer identifizieren

Notiondesk Messenger kann authentifizierte Benutzer mithilfe eines signierten Benutzertokens identifizieren, das von Ihrem Backend generiert wird.

Übergeben Sie das Token an den Anbieter:

Geben Sie Ihr Notiondesk App-Geheimnis niemals in React- oder anderem Browsercode preis.

Der App-Schlüssel muss auf Ihrem Server verbleiben. Ihr Frontend sollte lediglich das signierte, kurzlebige Benutzertoken erhalten, das von Ihrem Backend generiert wird.

Überprüfen Sie die Installation

Nach der Installation des SDKs:

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

1. Starten oder veröffentlichen Sie Ihre Anwendung.

2. Öffnen Sie eine Seite, die innerhalb von NotiondeskProvider gerendert wurde.

3. Vergewissern Sie sich, dass Messenger korrekt geladen wird.

4. Wenn Sie eine benutzerdefinierte Support-Schaltfläche hinzugefügt haben, klicken Sie darauf und bestätigen Sie, dass sich Messenger öffnet.

5. Testen Sie die Navigation zwischen den Seiten in Ihrer Anwendung.

6. Überprüfen Sie die Browserkonsole auf JavaScript-Fehler.

Testen Sie für Next.js auch einen Produktions-Build, da sich das Rendering-Verhalten von Client und Server vom lokalen Entwicklungsmodell unterscheiden kann.

Fehlerbehebung

"use client";

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

const { show } = useNotiondesk();

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