Intégration React

Créez un provider qui charge le widget une fois l’utilisateur connecté. Le script est chargé dynamiquement côté client, donc compatible avec Next.js, Remix, React Router v7 et toute config SSR.

Variables d’environnement

Dans votre .env :

VITE_SUPPORTDESK_APP_ID=votre-app-id
VITE_SUPPORTDESK_PUBLIC_KEY=pk_live_xxxxxxxxxxxx
VITE_SUPPORTDESK_WIDGET_URL=https://supportdesk-widget.vercel.app/v1/supportdesk-widget.js

Le provider

src/providers/SupportDeskProvider.tsx

import { useEffect, useRef } from 'react';
import { useAuth } from '@/hooks/useAuth'; // votre hook d'auth

declare global {
  interface Window {
    SupportDesk?: {
      init: (config: any) => void;
      destroy: () => void;
      open: () => void;
      close: () => void;
      toggle: () => void;
      isOpen: () => boolean;
      onUnreadChange: (cb: (n: number) => void) => () => void;
    };
  }
}

const WIDGET_URL = import.meta.env.VITE_SUPPORTDESK_WIDGET_URL;
const APP_ID = import.meta.env.VITE_SUPPORTDESK_APP_ID;
const PUBLIC_KEY = import.meta.env.VITE_SUPPORTDESK_PUBLIC_KEY;

export function SupportDeskProvider({ children }: { children: React.ReactNode }) {
  const { user } = useAuth();
  const scriptLoadedRef = useRef(false);
  const currentUserIdRef = useRef<string | null>(null);

  useEffect(() => {
    if (!user || !WIDGET_URL) return;

    const init = () => {
      window.SupportDesk?.destroy();
      window.SupportDesk?.init({
        appId: APP_ID,
        apiKey: PUBLIC_KEY,
        customer: {
          externalId: user.id,
          email: user.email,
          name: user.name,
        },
        theme: { primaryColor: '#2563eb', showButton: false },
      });
      currentUserIdRef.current = user.id;
    };

    if (scriptLoadedRef.current && window.SupportDesk) {
      if (currentUserIdRef.current !== user.id) init();
      return;
    }

    const script = document.createElement('script');
    script.src = WIDGET_URL;
    script.async = true;
    script.onload = () => {
      scriptLoadedRef.current = true;
      init();
    };
    document.head.appendChild(script);
  }, [user]);

  return <>{children}</>;
}

Utilisation

Enveloppez votre app avec le provider :

src/App.tsx

import { SupportDeskProvider } from './providers/SupportDeskProvider';

export default function App() {
  return (
    <SupportDeskProvider>
      <YourRoutes />
    </SupportDeskProvider>
  );
}

Bouton personnalisé

Avec showButton: false, le bouton flottant par défaut est masqué. Utilisez votre propre UI pour ouvrir le widget :

function SupportButton() {
  return (
    <button onClick={() => window.SupportDesk?.toggle()}>
      Contacter le support
    </button>
  );
}

Badge messages non-lus

const [unread, setUnread] = useState(0);

useEffect(() => {
  const unsubscribe = window.SupportDesk?.onUnreadChange(setUnread);
  return () => unsubscribe?.();
}, []);