Ajouter un widget tiers à une app React, c’est là que beaucoup d’équipes plombent sans le vouloir leurs Core Web Vitals — un script synchrone au mauvais endroit bloque l’hydratation. La bonne nouvelle : un widget de support devrait être la dernière chose qui se charge, et React vous donne des moyens propres de faire exactement ça. Voici comment en ajouter un à Next.js (App Router et Pages Router) et à une app React classique.
Next.js — App Router (app/)
Utilisez next/script avec strategy="lazyOnload" pour que le widget se charge une fois la page interactive. Ajoutez-le une fois dans votre layout racine :
// app/layout.tsx
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://app.simplesupport.uk/widget/widget.js"
data-key="votre-api-key"
strategy="lazyOnload"
/>
</body>
</html>
);
}
lazyOnload est la clé : le bouton de support n’est pas au-dessus de la ligne de flottaison et n’a besoin de rien bloquer.
Next.js — Pages Router (pages/)
Même idée dans pages/_app.tsx :
import Script from "next/script";
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Script
src="https://app.simplesupport.uk/widget/widget.js"
data-key="votre-api-key"
strategy="lazyOnload"
/>
</>
);
}
React pur (Vite, CRA, etc.)
Pas de next/script ? Injectez le script une fois au montage et protégez-vous du double chargement (important avec le Strict Mode de React 18, qui monte les effets deux fois en dev) :
import { useEffect } from "react";
export function SupportWidget() {
useEffect(() => {
if (document.querySelector("script[data-key][src*='widget.js']")) return;
const s = document.createElement("script");
s.src = "https://app.simplesupport.uk/widget/widget.js";
s.setAttribute("data-key", "votre-api-key");
s.async = true;
document.body.appendChild(s);
}, []);
return null;
}
Rendez <SupportWidget /> une seule fois près de la racine de votre arbre.
Une note pour les SPA
Le widget monte un unique bouton flottant et gère son propre DOM, il survit donc aux changements de route côté client — pas besoin de le réinitialiser à la navigation. Chargez-le une fois, n’y touchez plus.
Gardez votre API key sûre côté public
La data-key est une clé de widget publiable, limitée à la création de tickets depuis votre domaine autorisé — elle est faite pour vivre dans le code client, comme une clé publiable Stripe. Définissez votre domaine dans le tableau de bord pour que la clé ne fonctionne que depuis votre site.
Voilà toute l’intégration : un script, chargé en différé, et chaque demande de support de votre app devient un ticket suivi. Commencez gratuitement — 100 tickets par mois, sans carte bancaire.