Añadir un widget de terceros a una app React es donde muchos equipos hunden sin querer sus Core Web Vitals — un script síncrono en el sitio equivocado bloquea la hidratación. La buena noticia: un widget de soporte debería ser lo último que carga, y React te da formas limpias de hacer justo eso. Aquí tienes cómo añadir uno a Next.js (App Router y Pages Router) y a una app React normal.
Next.js — App Router (app/)
Usa next/script con strategy="lazyOnload" para que el widget cargue después de que la página sea interactiva. Añádelo una vez en tu layout raíz:
// 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="tu-api-key"
strategy="lazyOnload"
/>
</body>
</html>
);
}
lazyOnload es la clave: el botón de soporte no está por encima del pliegue y no necesita bloquear nada.
Next.js — Pages Router (pages/)
La misma idea en 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="tu-api-key"
strategy="lazyOnload"
/>
</>
);
}
React puro (Vite, CRA, etc.)
¿Sin next/script? Inyecta el script una vez al montar y protégete contra la doble carga (importante con el Strict Mode de React 18, que monta los efectos dos veces en desarrollo):
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", "tu-api-key");
s.async = true;
document.body.appendChild(s);
}, []);
return null;
}
Renderiza <SupportWidget /> una vez cerca de la raíz de tu árbol.
Una nota para las SPA
El widget monta un único botón flotante y gestiona su propio DOM, así que sobrevive a los cambios de ruta del lado del cliente — no necesitas reinicializarlo al navegar. Cárgalo una vez y déjalo en paz.
Mantén tu API key segura para el público
La data-key es una clave de widget publicable, limitada a crear tickets desde tu dominio autorizado — está pensada para vivir en el código cliente, como una clave publicable de Stripe. Configura tu dominio en el panel para que la clave solo funcione desde tu web.
Eso es toda la integración: un script, cargado de forma diferida, y cada solicitud de soporte de tu app se convierte en un ticket registrado. Empieza gratis — 100 tickets al mes, sin tarjeta.