Jak zainstalować Notiondesk Messenger za pomocą React i Next.js

Notiondesk udostępnia oficjalny pakiet JavaScript SDK do instalowania Messengera w aplikacjach React i Next.js.

Jeśli Twoja witryna internetowa została zbudowana w React, Next.js lub innej aplikacji jednostronicowej, użyj zestawu SDK zamiast standardowego fragmentu kodu Messenger <script>.

Zanim zaczniesz

Potrzebujesz:

• Komunikator Notiondesk skonfigurowany w Twojej przestrzeni roboczej

• Twój identyfikator Messengera

• Aplikacja React lub Next.js

• Dostęp do kodu źródłowego Twojej aplikacji

Swój identyfikator Messengera i opcje instalacji znajdziesz w ustawieniach Notiondesk Messengera .

Zainstaluj pakiet Messenger SDK

Zainstaluj oficjalny pakiet:

Z włóczką:

Z pnpm:

Oficjalny pakiet jest dostępny na npm .

Zainstaluj Messengera w React

Zaimportuj NotiondeskProvider i opakuj część swojej aplikacji, w której Messenger powinien być dostępny.

W przypadku większości aplikacji należy umieścić dostawcę w pobliżu katalogu głównego aplikacji:

Zastąp YOUR_MESSENGER_ID identyfikatorem Messenger z obszaru roboczego Notiondesk.

Komunikator jest teraz dostępny dla komponentów renderowanych wewnątrz NotiondeskProvider.

Otwórz Messengera z komponentu React

Użyj haka useNotiondesk, gdy musisz sterować programem Messenger ze swojego interfejsu.

Możesz na przykład utworzyć własny przycisk wsparcia:

Komponent używający useNotiondesk musi być renderowany wewnątrz NotiondeskProvider.

Zainstaluj Messenger w Next.js

Notiondesk Messenger działa w przeglądarce, dlatego integrację z Messengerem należy zainicjować z poziomu komponentu klienta.

W poniższym przykładzie użyto aplikacji Next.js App Router.

1. Utwórz komponent klienta Notiondesk

Utwórz komponent taki jak notiondesk-setup.tsx:

Zastąp YOUR_MESSENGER_ID swoim identyfikatorem 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. Dodaj dostawcę do swojego układu

Wyrenderuj komponent klienta z układu głównego:

Umieszczenie NotiondeskSetup w układzie głównym sprawia, że ​​Messenger jest dostępny w całej aplikacji.

Jeśli Messenger ma być dostępny tylko w określonych częściach aplikacji, umieść dostawcę w bardziej szczegółowym układzie lub na bardziej szczegółowej stronie.

Steruj Messengerem programowo

Hak React udostępnia kontrolki Messenger, których możesz używać z poziomu swoich komponentów.

Na przykład:

Za pomocą tych metod możesz połączyć Messengera z własnymi przyciskami, nawigacją, menu pomocy lub innym interfejsem użytkownika swojej aplikacji.

Zestaw SDK obsługuje również dodatkową konfigurację i sterowanie, np. zmianę języka lub motywu.

Warunkowe ładowanie Messengera

Możesz zapobiec załadowaniu Messengera użytkownikom, którzy nie powinni mieć do niego dostępu, korzystając z opcji enabled:

Niech logika uprawnień Twojej aplikacji będzie odpowiedzialna za decyzję o włączeniu Messengera.

Jest to przydatne, gdy aplikacja Messenger ma być dostępna wyłącznie dla zalogowanych klientów, w ramach określonych planów lub konkretnych obszarów aplikacji.

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>

Identyfikuj zalogowanych użytkowników

Notiondesk Messenger może identyfikować uwierzytelnionych użytkowników przy użyciu podpisanego tokena użytkownika wygenerowanego przez zaplecze.

Przekaż token dostawcy:

Nigdy nie ujawniaj swojego sekretu aplikacji Notiondesk w React ani innym kodzie przeglądarki.

Sekret aplikacji musi pozostać na Twoim serwerze. Twój front-end powinien otrzymywać tylko podpisany, krótkotrwały token użytkownika wygenerowany przez back-end.

Zweryfikuj instalację

Po zainstalowaniu zestawu SDK:

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

1. Uruchom lub wdróż swoją aplikację.

2. Otwórz stronę renderowaną wewnątrz NotiondeskProvider

3. Sprawdź, czy Messenger ładuje się prawidłowo

4. Jeśli dodałeś niestandardowy przycisk pomocy, kliknij go i sprawdź, czy Messenger się otwiera

5. Przetestuj nawigację między stronami w swojej aplikacji

6. Sprawdź konsolę przeglądarki pod kątem błędów JavaScript

W przypadku Next.js należy również przetestować wersję produkcyjną, ponieważ sposób renderowania w środowisku klient/serwer może różnić się od sposobu tworzenia lokalnego.

Rozwiązywanie problemów

"use client";

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

const { show } = useNotiondesk();

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