Como instalar o Messenger Notiondesk com React e Next.js

Notiondesk fornece um SDK JavaScript oficial para instalar o Messenger em aplicações React e Next.js.

Use o SDK em vez do snippet padrão do Messenger <script> quando seu site for desenvolvido com React, Next.js ou outro aplicativo de página única.

Antes de começar

Você precisa de:

• Um mensageiro Notiondesk configurado em seu espaço de trabalho

• Seu ID do Messenger

• Uma aplicação React ou Next.js

• Acesso ao código-fonte do seu aplicativo

Você pode encontrar seu ID do Messenger e opções de instalação nas configurações do Messenger .

Instale o SDK do Messenger

Instale o pacote oficial:

Com fio:

Com pnpm:

O pacote oficial está disponível no npm .

Instalar o Messenger no React

Importe NotiondeskProvider e envolva a parte do seu aplicativo onde o Messenger deve estar disponível.

Para a maioria das aplicações, coloque o provedor próximo à raiz do seu aplicativo:

Substitua YOUR_MESSENGER_ID pelo ID do Messenger do seu espaço de trabalho Notiondesk.

O Messenger agora está disponível para componentes renderizados dentro de NotiondeskProvider.

Abra o Messenger a partir de um componente React.

Use o gancho useNotiondesk quando precisar controlar o Messenger a partir da sua interface.

Por exemplo, você pode criar seu próprio botão de suporte:

O componente que usa useNotiondesk deve ser renderizado dentro de NotiondeskProvider.

Instalar o Messenger no Next.js

Notiondesk O Messenger é executado no navegador, portanto, a integração do Messenger deve ser inicializada a partir de um componente cliente.

O exemplo a seguir utiliza o App Router do Next.js.

1. Crie um componente cliente Notiondesk

Crie um componente como notiondesk-setup.tsx:

Substitua YOUR_MESSENGER_ID pelo seu ID do 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. Adicione o provedor ao seu layout.

Renderize o componente cliente a partir do seu layout raiz:

Colocar NotiondeskSetup no layout raiz torna o Messenger disponível em todo o aplicativo.

Se o Messenger só deve estar disponível em partes específicas do seu aplicativo, coloque o provedor em um layout ou página mais específica.

Controlar o Messenger programaticamente

O hook do React expõe controles do Messenger que você pode usar em seus componentes.

Por exemplo:

Você pode usar esses métodos para conectar o Messenger aos seus próprios botões, navegação, menus de suporte ou outras interfaces de usuário do aplicativo.

O SDK também oferece suporte a configurações e controles adicionais, como a alteração do idioma ou do tema.

Carregar o Messenger condicionalmente

Você pode impedir que o Messenger seja carregado para usuários que não devem ter acesso a ele com a opção enabled:

Mantenha a lógica de permissões do seu aplicativo responsável por decidir se o Messenger deve ser ativado.

Isso é útil quando o Messenger deve estar disponível apenas para clientes conectados, planos específicos ou áreas específicas do seu aplicativo.

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>

Identificar usuários conectados

Notiondesk O Messenger pode identificar usuários autenticados usando um token de usuário assinado gerado pelo seu backend.

Envie o token ao provedor:

Nunca exponha o segredo do seu aplicativo Notiondesk no React ou em outros códigos de navegador.

O segredo do aplicativo deve permanecer no seu servidor. Seu frontend deve receber apenas o token de usuário assinado e de curta duração gerado pelo seu backend.

Verifique a instalação.

Após instalar o SDK:

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

1. Inicie ou implemente sua aplicação.

2. Abra uma página renderizada dentro de NotiondeskProvider

3. Confirme se o Messenger está carregando corretamente.

4. Se você adicionou um botão de suporte personalizado, clique nele e confirme se o Messenger abriu.

5. Teste a navegação entre páginas em seu aplicativo.

6. Verifique o console do navegador em busca de erros de JavaScript.

Para o Next.js, teste também uma versão de produção, pois o comportamento de renderização do cliente/servidor pode ser diferente do ambiente de desenvolvimento local.

Solução de problemas

"use client";

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

const { show } = useNotiondesk();

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