Le Widget de Chat Construit pour
Développeurs Next.js
Ajoutez le chat en direct à votre app Next.js sans packages npm, configurations de build ou pénalités Lighthouse. Une balise script. Terminé.
Pourquoi les Développeurs Next.js Choisissent Ce Widget
Zéro Impact sur le Build
Aucun package npm. Aucune configuration webpack. Aucune surcharge au moment du build. Juste une balise script qui se charge de manière asynchrone.
Compatible Lighthouse
3 KB compressé, chargement asynchrone, pas de layout shift. Vos Core Web Vitals restent verts.
Confidentialité d'Abord
Aucun cookie. Aucun suivi. Conforme GDPR par défaut. Parfait pour les apps Next.js soucieuses de la confidentialité.
Installation
Ajoutez à votre layout.tsx ou _app.tsx. C'est tout.
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://cdn.thechatwidget.com/widget.js"
data-site-id="YOUR_SITE_ID"
strategy="lazyOnload"
/>
</body>
</html>
)
}import Script from 'next/script'
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Script
src="https://cdn.thechatwidget.com/widget.js"
data-site-id="YOUR_SITE_ID"
strategy="lazyOnload"
/>
</>
)
}En utilisant strategy="lazyOnload" garantit aucun impact sur le chargement initial de la page.
Comment Il Se Compare
La plupart des widgets de chat nuisent aux performances de votre app Next.js. Celui-ci non.
| Fonctionnalité | The Chat Widget | Intercom | Crisp |
|---|---|---|---|
| Taille du Bundle | 3 KB | ~100 KB | ~180 KB |
| Package npm Requis | Non | Optionnel | Optionnel |
| Impact Lighthouse | Aucun | -5 to -15 pts | -10 to -20 pts |
| Cookies | Aucun | Oui | Oui |
| Prix de Départ | Gratuit | $39/mo | $25/mo |
Questions Fréquemment Posées
Fonctionne-t-il avec Next.js App Router?
Oui. Le widget se charge via une balise script en utilisant le composant Script intégré de Next.js, donc il fonctionne parfaitement avec App Router et Pages Router.
Affectera-t-il mon score Lighthouse?
Non. Avec 3 KB et strategy="lazyOnload", le widget se charge après que la page soit interactive. Zéro impact sur LCP, FID ou CLS.
Dois-je installer un package npm?
Non. Il n'y a pas de package à installer, pas de dépendances à gérer, et pas de configuration de build. Ajoutez simplement la balise Script et c'est fait.
Fonctionne-t-il avec Vercel?
Oui. Le widget est servi depuis un CDN global avec mise en cache edge, donc il se charge rapidement sur les déploiements Vercel dans le monde entier.
Puis-je personnaliser l'apparence du widget?
Oui. Vous pouvez personnaliser la position, les couleurs et le message de bienvenue via votre tableau de bord. Aucune modification de code requise.
Prêt à ajouter le chat à votre app Next.js?
Plan gratuit disponible. Aucune carte de crédit requise. La configuration prend 60 secondes.