Как установить Messenger Notiondesk с помощью React и Next.js

Notiondesk предоставляет официальный JavaScript SDK для установки Messenger в приложения React и Next.js.

Используйте SDK вместо стандартного фрагмента кода Messenger <script>, если ваш веб-сайт создан с использованием React, Next.js или другого одностраничного приложения.

Прежде чем начать

Вам потребуется:

• В вашем рабочем пространстве настроен мессенджер Notiondesk.

• Ваш идентификатор в Messenger

• Приложение на React или Next.js

• Доступ к исходному коду вашего приложения

Ваш идентификатор Messenger и параметры установки можно найти в настройках Messenger .

Установите Messenger SDK

Установите официальный пакет:

С помощью пряжи:

С помощью pnpm:

Официальный пакет доступен на npm .

Установите Messenger в React

Импортируйте NotiondeskProvider и оберните им ту часть вашего приложения, где должен быть доступен Messenger.

Для большинства приложений разместите провайдер ближе к корневому каталогу приложения:

Замените YOUR_MESSENGER_ID на идентификатор Messenger из вашей рабочей области Notiondesk.

Функция Messenger теперь доступна компонентам, отображаемым внутри NotiondeskProvider.

Откройте Messenger из компонента React.

Используйте хук useNotiondesk, когда вам нужно управлять Messenger из вашего интерфейса.

Например, вы можете создать собственную кнопку поддержки:

Компонент, использующий useNotiondesk, должен быть отрисован внутри NotiondeskProvider.

Установите Messenger в Next.js

Notiondesk Messenger работает в браузере, поэтому интеграция с Messenger должна быть инициализирована из клиентского компонента.

В следующем примере используется маршрутизатор приложений Next.js.

1. Создайте клиентский компонент Notiondesk

Создайте компонент, например, notiondesk-setup.tsx:

Замените YOUR_MESSENGER_ID на ваш ID в 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. Добавьте поставщика услуг в свой макет.

Отобразите клиентский компонент из корневого макета:

Размещение NotiondeskSetup в корневом шаблоне делает Messenger доступным во всем приложении.

Если Messenger должен быть доступен только в определенных разделах вашего приложения, разместите его на более подходящем макете или странице.

Программное управление мессенджером

Хук React предоставляет доступ к элементам управления Messenger, которые можно использовать из ваших компонентов.

Например:

Эти методы позволяют связать Messenger с вашими собственными кнопками, навигацией, меню поддержки или другими элементами пользовательского интерфейса приложения.

SDK также поддерживает дополнительные настройки и элементы управления, такие как изменение языка или темы оформления.

Условная загрузка мессенджера

Вы можете запретить загрузку Messenger для пользователей, которым не следует иметь к нему доступ, с помощью опции enabled:

Пусть за принятие решения о включении 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 может идентифицировать авторизованных пользователей, используя подписанный токен пользователя, сгенерированный вашей серверной частью.

Передайте токен провайдеру:

Никогда не раскрывайте свой секретный ключ приложения Notiondesk в коде React или другом браузерном коде.

Секретный ключ приложения должен оставаться на вашем сервере. Ваш фронтенд должен получать только подписанный, кратковременный пользовательский токен, сгенерированный вашим бэкендом.

Проверьте установку.

После установки 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>