Chat Widget für React
Installieren Sie ein 3KB leichtes Chat-Widget in Ihrer React App in 2 Minuten.
Kein Tracking. Keine Cookies. Keine Abhängigkeiten.
Schnellinstallation (2 Minuten)
- 1.
Registrieren Sie sich kostenlos und holen Sie sich Ihre Site ID aus dem Dashboard.
Kostenlos Registrieren → - 2.
Fügen Sie den Script-Tag zu Ihrer HTML-Datei hinzu.
Für Create React App:
public/index.htmlFür Vite:
index.htmlFür Gatsby:
gatsby-ssr.js - 3.
Fügen Sie diesen Code vor dem schließenden
</body>-Tag ein:<script src="https://api.thechatwidget.com/widget.js" data-site="YOUR_SITE_ID" defer></script> - ✓
Fertig! Das Widget erscheint automatisch auf allen Seiten.
Framework-spezifische Anleitungen
Nutzen Sie Next.js? Sehen Sie unsere dedizierte Anleitung Next.js Chat Widget Anleitung →
Create React App (public/index.html)
Direkt zu Ihrer public/index.html Datei hinzufügen.
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<div id="root"></div>
<script src="https://api.thechatwidget.com/widget.js" data-site="YOUR_SITE_ID" defer></script>
</body>
</html>Vite (index.html)
Direkt zu Ihrer index.html Hauptdatei hinzufügen.
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<script src="https://api.thechatwidget.com/widget.js" data-site="YOUR_SITE_ID" defer></script>
</body>
</html>Gatsby (gatsby-ssr.js)
Zu Ihrer gatsby-ssr.js Datei im Hauptverzeichnis hinzufügen.
import React from 'react'
export const onRenderBody = ({ setPostBodyComponents }) => {
setPostBodyComponents([
<script
key="chat-widget"
src="https://api.thechatwidget.com/widget.js"
data-site="YOUR_SITE_ID"
defer
/>
])
}Warum Dies Statt React Chat-Bibliotheken Wählen?
3KB vs schwere npm-Pakete
Die meisten React Chat-Bibliotheken sind 50-200KB+ und vergrößern Ihr Bundle. Dies lädt extern.
Kein Bundle-Ballast
Ein Script-Tag. Kein npm install. Vergrößert nicht Ihr JavaScript-Bundle.
Funktioniert mit SSR/SSG
Perfekt für Gatsby und andere SSR-Frameworks. Keine Hydratisierungsprobleme.
DSGVO-konform von Haus aus
Kein Tracking, keine Cookies. Kein Cookie-Banner nötig. Perfekt für EU-Compliance.
Häufige Fragen
Funktioniert es mit Vite?
Ja! Fügen Sie einfach den Script-Tag zu Ihrer index.html hinzu. Funktioniert perfekt mit Vite + React.
Funktioniert es mit TypeScript?
Ja! Der Script-Tag funktioniert mit TypeScript. Keine Typ-Definitionen nötig - es ist nur ein Script-Tag.
Funktioniert es mit Create React App?
Ja! Fügen Sie den Script-Tag zu Ihrer public/index.html hinzu. Funktioniert mit CRA, ejected oder nicht.
Wird es meine React App verlangsamen?
Nein. Mit 3KB ist es 20-40 mal kleiner als die meisten Chat-Bibliotheken. Lädt asynchron und blockiert nicht das Rendering.
Kann ich es mit React Native nutzen?
Dieses Widget ist für Webbrowser konzipiert. Für React Native bräuchten Sie eine andere Lösung. Kontaktieren Sie uns für Mobile-Support.
Bereit, Chat zu Ihrer React App Hinzuzufügen?
Registrieren Sie sich kostenlos und haben Sie Ihr Chat-Widget in 2 Minuten live. Keine Kreditkarte erforderlich.