Das Chat Widget Gebaut für
Next.js Entwickler
Fügen Sie Live-Chat zu Ihrer Next.js App hinzu, ohne npm-Pakete, Build-Konfigurationen oder Lighthouse-Strafen. Ein Script-Tag. Fertig.
Warum Next.js Entwickler Dieses Widget Wählen
Kein Build-Impact
Keine npm-Pakete. Keine Webpack-Konfiguration. Keine Build-Zeit-Overhead. Nur ein Script-Tag, das asynchron geladen wird.
Lighthouse-freundlich
3 KB komprimiert, asynchrones Laden, kein Layout-Shift. Ihre Core Web Vitals bleiben grün.
Datenschutz Zuerst
Keine Cookies. Kein Tracking. Standardmäßig DSGVO-konform. Perfekt für datenschutzbewusste Next.js Apps.
Installation
Fügen Sie zu Ihrem layout.tsx oder _app.tsx hinzu. Das war's.
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"
/>
</>
)
}Verwenden von strategy="lazyOnload" stellt sicher, dass keine Auswirkungen auf das anfängliche Laden der Seite bestehen.
Wie Es Vergleicht
Die meisten Chat-Widgets schaden der Leistung Ihrer Next.js App. Dieses nicht.
| Funktion | The Chat Widget | Intercom | Crisp |
|---|---|---|---|
| Bundle-Größe | 3 KB | ~100 KB | ~180 KB |
| npm-Paket Erforderlich | Nein | Optional | Optional |
| Lighthouse-Auswirkung | Keine | -5 to -15 pts | -10 to -20 pts |
| Cookies | Keine | Ja | Ja |
| Startpreis | Kostenlos | $39/mo | $25/mo |
Häufig Gestellte Fragen
Funktioniert es mit Next.js App Router?
Ja. Das Widget lädt über ein Script-Tag mit Next.js's eingebauter Script-Komponente, daher funktioniert es nahtlos mit App Router und Pages Router.
Wird es meinen Lighthouse-Score beeinflussen?
Nein. Bei 3 KB mit strategy="lazyOnload" lädt das Widget nachdem die Seite interaktiv ist. Kein Einfluss auf LCP, FID oder CLS.
Muss ich ein npm-Paket installieren?
Nein. Es gibt kein Paket zu installieren, keine Abhängigkeiten zu verwalten und keine Build-Konfiguration. Fügen Sie einfach das Script-Tag hinzu und Sie sind fertig.
Funktioniert es mit Vercel?
Ja. Das Widget wird von einem globalen CDN mit Edge-Caching bereitgestellt, daher lädt es schnell auf Vercel-Bereitstellungen weltweit.
Kann ich das Erscheinungsbild des Widgets anpassen?
Ja. Sie können die Position, Farben und Willkommensnachricht über Ihr Dashboard anpassen. Keine Code-Änderungen erforderlich.
Bereit, Chat zu Ihrer Next.js App hinzuzufügen?
Kostenloser Plan verfügbar. Keine Kreditkarte erforderlich. Die Einrichtung dauert 60 Sekunden.