Weswegen
Tippen, um zu suchen
    Esc zum Schließen · Sofortsuche auf der ganzen Website

    Chat-Website kostenlos erstellen: Widget einbauen oder selbst bauen

    · Weswegen-Redaktion
    Website erstellen

    Zwei völlig verschiedene Dinge werden mit „Chat-Website“ gemeint, und die Verwechslung kostet Sie sonst Stunden. Entweder Sie wollen ein Chat-Fenster in eine bestehende Seite einbauen (Besucher schreiben Ihnen, Sie antworten) – das dauert zehn Minuten und ist gratis. Oder Sie wollen eine eigene Chat-Plattform bauen, auf der sich Nutzer untereinander in Echtzeit unterhalten – das braucht einen Realtime-Dienst und etwas Code, geht aber im kostenlosen Kontingent von Firebase oder Supabase ebenfalls ohne Rechnung. Klären Sie also zuerst, welchen der beiden Fälle Sie brauchen – danach folgen Sie hier dem passenden Weg mit fertigem Code.

    Weg 1: Fertiges Chat-Widget einbetten (10 Minuten)

    Der schnellste Weg ist ein gehosteter Chat-Dienst. Sie kopieren einen JavaScript-Schnipsel in Ihre Seite, fertig. Server, Skalierung und mobile App liefert der Anbieter.

    Tawk.to ist dauerhaft kostenlos, ohne Nutzer- oder Gesprächslimit – finanziert über bezahlte Zusatzleistungen (Branding entfernen, Agenten mieten). Nach der Registrierung erhalten Sie unter Administration → Chat Widget → Widget Code einen Snippet dieser Form:

    <script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
  var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
  s1.async=true;
  s1.src='https://embed.tawk.to/IHRE_PROPERTY_ID/DEFAULT';
  s1.charset='UTF-8';
  s1.setAttribute('crossorigin','*');
  s0.parentNode.insertBefore(s1,s0);
})();
</script>

    Diesen Code fügen Sie direkt vor dem schließenden </body>-Tag ein. In WordPress geht das ohne Plugin über Design → Customizer → Zusätzliches CSS nur für Styles – für Skripte nutzen Sie besser ein Snippet-Plugin oder das offizielle Tawk.to-Plugin. In Astro, Next.js oder einer statischen HTML-Seite gehört der Block ins gemeinsame Layout-Template.

    Ob es sitzt, sehen Sie sofort: Nach dem Neuladen erscheint die Chat-Blase unten rechts. Testen Sie einmal aus einem privaten Browserfenster – so landet Ihre eigene Testnachricht als echter Besucherkontakt im Dashboard, und Sie sehen die Antwortseite so, wie ein Kunde sie erlebt.

    Alternativen mit kostenlosem Einstieg:

    • Crisp – kostenloser Plan mit zwei Postfach-Plätzen, sauberes Design, DSGVO-freundlich (EU-Hosting wählbar).
    • Chatwoot – Open Source. Die Cloud-Version kostet, aber die Community Edition dürfen Sie selbst hosten und damit gratis betreiben (Docker, ein kleiner Server genügt).

    Typischer Fehler bei Weg 1: Das Widget erscheint lokal, aber nicht auf der Live-Seite. Meist blockiert eine restriktive Content-Security-Policy das externe Skript. Prüfen Sie den Content-Security-Policy-Header und ergänzen Sie die Domain des Chat-Anbieters in script-src und connect-src.

    Weg 2: Eigene Chat-Plattform bauen

    Wollen Nutzer untereinander chatten, brauchen Sie eine Technik, die Nachrichten sofort an alle offenen Browser schickt – klassisches HTTP reicht nicht, weil der Server von sich aus nichts senden kann. Die Lösung heißt WebSocket. Sie haben zwei praktikable kostenlose Ansätze.

    Ansatz A: Serverless mit Supabase oder Firebase

    Sie schreiben nur Frontend-Code, den Realtime-Server stellt der Dienst. Supabase (Free Tier) bietet einen Broadcast-Kanal, über den Nachrichten ohne eigene Datenbanklogik verteilt werden:

    import { createClient } from '@supabase/supabase-js'
const supabase = createClient('https://IHR_PROJEKT.supabase.co', 'IHR_ANON_KEY')

const channel = supabase.channel('raum-1')
channel
  .on('broadcast', { event: 'msg' }, ({ payload }) => {
    addMessageToDOM(payload.text)
  })
  .subscribe()

// Nachricht senden
channel.send({ type: 'broadcast', event: 'msg', payload: { text: input.value } })

    Ein wichtiger Punkt: Broadcast-Nachrichten sind flüchtig. Sie erreichen nur, wer gerade verbunden ist, und werden nirgends gespeichert. Wer nachrücken kommt, sieht die bisherige Unterhaltung nicht. Sollen Nachrichten erhalten bleiben, schreiben Sie sie zusätzlich in eine Postgres-Tabelle und abonnieren deren Änderungen per postgres_changes statt (oder zusätzlich zu) broadcast – dann haben Sie zugleich Echtzeit und Verlauf.

    Der Free Tier reicht für Prototypen und kleine Communities. Beachten Sie: Ein Supabase-Projekt wird nach einer Weile Inaktivität pausiert und muss manuell reaktiviert werden.

    Firebase funktioniert analog über die Realtime Database oder Firestore im kostenlosen Spark-Plan samt Gratis-Hosting.

    Ansatz B: Eigener Socket.IO-Server

    Wenn Sie die volle Kontrolle wollen, betreiben Sie einen kleinen Node-Server mit Socket.IO (aktuell Version 4.x). Der Kern ist erstaunlich kurz:

    // server.js
const io = require('socket.io')(3000, { cors: { origin: '*' } });
io.on('connection', socket => {
  socket.on('chat', msg => io.emit('chat', msg)); // an alle weiterleiten
});
    // client.js
const socket = io('https://ihr-server.example');
socket.on('chat', msg => addMessageToDOM(msg));
sendBtn.onclick = () => socket.emit('chat', input.value);

    Gehostet wird das gratis etwa auf Renders kostenlosem Web-Service-Tier. Der Haken: Solche Free-Instanzen werden nach einigen Minuten ohne Traffic schlafen gelegt und brauchen beim nächsten Aufruf einige Sekunden zum Aufwachen (Cold Start). Für eine ernsthafte Community lohnt später ein günstiger Dauerbetrieb.

    Die drei häufigsten Fehler beim Selbstbau

    • Mixed Content: Ihre Seite läuft über https://, verbindet sich aber zu ws:// – der Browser blockiert das. Nutzen Sie immer wss://.
    • CORS blockiert die Verbindung: Setzen Sie auf dem Server die erlaubte Origin (siehe cors-Option oben), statt pauschal * in Produktion.
    • Nur der Absender sieht die Nachricht: Sie senden mit socket.emit statt io.emit. io.emit verteilt an alle, socket.broadcast.emit an alle außer den Absender.

    DSGVO: Chat ist Verarbeitung personenbezogener Daten

    Sobald Besucher schreiben, verarbeiten Sie personenbezogene Daten (Inhalt, oft IP-Adresse, teils Cookies). Das gilt für das eingebettete Widget genauso wie für die Eigenbau-Lösung. Praktisch heißt das:

    • Datenschutzerklärung um den Chat-Dienst ergänzen: welche Daten, welcher Anbieter, welche Speicherdauer.
    • Bei US-Diensten einen Auftragsverarbeitungsvertrag (AVV) abschließen und die Datenübermittlung dokumentieren; EU-gehostete Anbieter wie Crisp oder ein selbst gehostetes Chatwoot vereinfachen das erheblich.
    • Setzt das Widget Cookies, gehört es hinter Ihr Cookie-Consent – es darf erst nach Einwilligung laden. Mehr dazu in unserer DSGVO-Checkliste für Websites.

    Verwandte Anleitungen finden Sie unter Website kostenlos erstellen und, wenn Sie tiefer in die Technik einsteigen, unter WebSocket einfach erklärt.

    FAQ

    Ist ein kostenloser Chat wirklich dauerhaft gratis oder eine Testphase? Kommt auf den Dienst an. Tawk.to ist ein echtes Dauer-Gratis-Modell ohne Zeitlimit. Crisp und Firebase/Supabase haben kostenlose Kontingente mit Obergrenzen; darüber hinaus wird abgerechnet. Chatwoot ist beim Selbst-Hosten gratis – Sie zahlen dann nur den Server.

    Brauche ich Programmierkenntnisse? Für Weg 1 (Widget einbetten) nein – Sie kopieren einen Code-Schnipsel. Für den Selbstbau (Weg 2) sollten Sie JavaScript beherrschen; der Serverless-Ansatz mit Supabase kommt dabei ohne eigenen Server-Code aus.

    Läuft der Chat auch auf dem Smartphone? Ja. Gehostete Widgets sind responsiv und bringen meist Agenten-Apps für iOS und Android mit. Beim Selbstbau müssen Sie das mobile Layout selbst umsetzen – ein einfaches Flexbox-Layout mit 100dvh Höhe genügt für den Anfang.