Hoe installeer je Notiondesk Messenger met React en Next.js?

Notiondesk biedt een officiële JavaScript SDK voor het installeren van Messenger in React- en Next.js-applicaties.

Gebruik de SDK in plaats van het standaard Messenger- fragment <script> wanneer uw website is gebouwd met React, Next.js of een andere single-page applicatie.

Voordat je begint

Je hebt nodig:

• Een Notiondesk Messenger geconfigureerd in uw werkruimte

• Je Messenger-ID

• Een React- of Next.js-applicatie

• Toegang tot de broncode van uw applicatie

Je kunt je Messenger-ID en installatieopties vinden in je Messenger-instellingen .

Installeer de Messenger SDK.

Installeer het officiële pakket:

Met garen:

Met pnpm:

Het officiële pakket is beschikbaar op npm .

Installeer Messenger in React

Importeer NotiondeskProvider en omwikkel het gedeelte van uw applicatie waar Messenger beschikbaar moet zijn.

Plaats de provider in de meeste gevallen dicht bij de hoofdmap van uw applicatie:

Vervang YOUR_MESSENGER_ID door de Messenger ID uit uw Notiondesk werkruimte.

Messenger is nu beschikbaar voor componenten die binnen NotiondeskProvider worden weergegeven.

Open Messenger vanuit een React-component.

Gebruik de hook useNotiondesk wanneer je Messenger vanuit je interface wilt bedienen.

Je kunt bijvoorbeeld je eigen ondersteuningsknop maken:

Het component dat gebruikmaakt van useNotiondesk moet binnen NotiondeskProvider worden weergegeven.

Installeer Messenger in Next.js

Messenger draait in de browser, dus de Messenger-integratie moet vanuit een clientcomponent worden geïnitialiseerd.

Het volgende voorbeeld maakt gebruik van de Next.js App Router.

1. Maak een Notiondesk clientcomponent aan.

Maak een component aan zoals notiondesk-setup.tsx:

Vervang YOUR_MESSENGER_ID door uw 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. Voeg de provider toe aan uw lay-out.

Render het clientcomponent vanuit je hoofdlayout:

Door NotiondeskSetup in de hoofdlayout te plaatsen, wordt Messenger in de hele applicatie beschikbaar.

Als Messenger alleen beschikbaar moet zijn in specifieke onderdelen van uw applicatie, plaats de provider dan in een meer specifieke lay-out of op een andere pagina.

Messenger programmatisch besturen

De React-hook ontsluit Messenger-besturingselementen die je vanuit je componenten kunt gebruiken.

Bijvoorbeeld:

Je kunt deze methoden gebruiken om Messenger te koppelen aan je eigen knoppen, navigatie, ondersteuningsmenu's of andere gebruikersinterfaces van de applicatie.

De SDK biedt ook ondersteuning voor extra configuratie- en bedieningsopties, zoals het wijzigen van de taal of het thema.

Messenger voorwaardelijk laden

Je kunt voorkomen dat Messenger wordt geladen voor gebruikers die er geen toegang toe zouden mogen hebben met de optie enabled:

Laat de eigen machtigingslogica van uw applicatie bepalen of Messenger ingeschakeld moet worden.

Dit is handig wanneer Messenger alleen beschikbaar moet zijn voor ingelogde klanten, specifieke abonnementen of bepaalde onderdelen van uw applicatie.

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>

Identificeer ingelogde gebruikers

Messenger kan geauthenticeerde gebruikers identificeren door gebruik te maken van een ondertekend gebruikerstoken dat door uw backend is gegenereerd.

Geef het token door aan de provider:

Geef je Notiondesk app-geheim nooit prijs in React of andere browsercode.

Het App Secret moet op uw server blijven staan. Uw frontend mag alleen het ondertekende, kortstondige gebruikerstoken ontvangen dat door uw backend is gegenereerd.

Controleer de installatie.

Na het installeren van de SDK:

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

1. Start of implementeer uw applicatie.

2. Open een pagina die is weergegeven binnen NotiondeskProvider

3. Controleer of Messenger correct laadt.

4. Als je een aangepaste ondersteuningsknop hebt toegevoegd, klik er dan op en bevestig dat Messenger wordt geopend.

5. Test de navigatie tussen pagina's in uw applicatie.

6. Controleer de browserconsole op JavaScript-fouten.

Test voor Next.js ook een productiebuild, omdat het renderinggedrag aan de client- en serverzijde kan afwijken van de lokale ontwikkelomgeving.

Probleemoplossing

"use client";

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

const { show } = useNotiondesk();

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