Cómo instalar Notiondesk Messenger con React y Next.js

Notiondesk proporciona un SDK oficial de JavaScript para instalar Messenger en aplicaciones React y Next.js.

Utilice el SDK en lugar del fragmento estándar Messenger <script> cuando su sitio web esté construido con React, Next.js u otra aplicación de una sola página.

Antes de empezar

Necesitas:

• Un mensajero configurado en tu espacio de trabajo

• Tu ID de Messenger

• Una aplicación React o Next.js

• Acceso al código fuente de su aplicación

Puedes encontrar tu ID de Messenger y las opciones de instalación en la configuración de Messenger de Notiondesk .

Instala el SDK de Messenger

Instale el paquete oficial:

Con hilo:

Con pnpm:

El paquete oficial está disponible en npm .

Instalar Messenger en React

Importa NotiondeskProvider y envuelve la parte de tu aplicación donde Messenger debería estar disponible.

Para la mayoría de las aplicaciones, coloque el proveedor cerca de la raíz de su aplicación:

Reemplace YOUR_MESSENGER_ID con el ID de Messenger de su espacio de trabajo Notiondesk.

Messenger ya está disponible para los componentes renderizados dentro de NotiondeskProvider.

Abrir Messenger desde un componente React

Utilice el gancho useNotiondesk cuando necesite controlar Messenger desde su interfaz.

Por ejemplo, puedes crear tu propio botón de soporte:

El componente que utiliza useNotiondesk debe renderizarse dentro de NotiondeskProvider.

Instalar Messenger en Next.js

Notiondesk Messenger se ejecuta en el navegador, por lo que la integración de Messenger debe inicializarse desde un componente del cliente.

El siguiente ejemplo utiliza el enrutador de aplicaciones de Next.js.

1. Crea un componente cliente Notiondesk

Crea un componente como notiondesk-setup.tsx:

Reemplaza YOUR_MESSENGER_ID con tu ID de 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. Agrega el proveedor a tu diseño.

Renderiza el componente cliente desde tu diseño raíz:

Al colocar NotiondeskSetup en el diseño raíz, Messenger estará disponible en toda la aplicación.

Si Messenger solo debe estar disponible en partes específicas de su aplicación, coloque al proveedor en un diseño o página más específica.

Controlar Messenger mediante programación

El hook de React expone controles de Messenger que puedes usar desde tus componentes.

Por ejemplo:

Puedes utilizar estos métodos para conectar Messenger a tus propios botones, navegación, menús de soporte u otra interfaz de usuario de la aplicación.

El SDK también admite configuraciones y controles adicionales, como el cambio de idioma o tema.

Carga condicional de Messenger

Puedes impedir que Messenger se cargue para los usuarios que no deberían tener acceso a él con la opción enabled:

Deja que la lógica de permisos de tu aplicación sea la responsable de decidir si se debe habilitar Messenger.

Esto resulta útil cuando Messenger solo debe estar disponible para clientes que hayan iniciado sesión, planes específicos o áreas particulares de su aplicación.

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 a los usuarios que han iniciado sesión.

Notiondesk Messenger puede identificar a los usuarios autenticados mediante un token de usuario firmado generado por su backend.

Pasa el token al proveedor:

Nunca expongas tu secreto de aplicación Notiondesk en React u otro código de navegador.

La clave secreta de la aplicación debe permanecer en tu servidor. Tu interfaz de usuario solo debe recibir el token de usuario firmado y de corta duración generado por tu servidor.

Verificar la instalación

Después de instalar el SDK:

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

1. Inicie o implemente su aplicación.

2. Abrir una página renderizada dentro de NotiondeskProvider

3. Confirma que Messenger se carga correctamente.

4. Si agregaste un botón de soporte personalizado, haz clic en él y confirma que Messenger se abre.

5. Prueba la navegación entre páginas en tu aplicación.

6. Comprueba la consola del navegador para detectar errores de JavaScript.

Para Next.js, también conviene probar una versión de producción, ya que el comportamiento de renderizado del cliente/servidor puede diferir del del desarrollo local.

Solución de problemas

"use client";

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

const { show } = useNotiondesk();

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