Zum Inhalt springen
Menü

Website durchsuchen

Tippe, um Anleitungen, Blog, API und Produkt zu durchsuchen.

↑ ↓ zum Wechseln · Enter zum Öffnen · Esc zum Schließen

Kostenlos · Ohne Anmeldung · Passt in jede Website

WhatsApp-Widget für deine Website

Bau dir deine schwebende WhatsApp-Blase, sieh live, wie sie sich verändert, und kopiere den Code. Kostenlos, ohne Anmeldung, und er funktioniert genauso auf deiner Website wie auf der deines Kunden.

Deine WhatsApp-Nummer

Mehr braucht das Widget nicht, um zu funktionieren.

So sieht es aus

Jede Änderung erscheint sofort in der Vorschau daneben.

Farbe des Buttons
Position des Buttons
Stil des Buttons
Texte des Widgets

Kopieren und einfügen

Füge diesen Code direkt vor dem schließenden </body>-Tag der Website ein. Das funktioniert auf deiner eigenen Website genauso wie auf der eines Kunden.

</body>
<script
  src="https://tbit.app/js/whatsapp-button.js"
  async
  onLoad="whatsappButton({
    locale: 'de',
    phoneNumber: '',
    buttonName: 'WhatsApp',
    brandName: 'Deine Marke',
    brandSubtitleText: 'Antwortet in der Regel innerhalb eines Tages',
    callToAction: 'Chat starten',
    welcomeMessage: 'Hallo 👋',
    buttonPosition: 'right',
    buttonStyle: 'icon-with-text'
  })"
></script>

Gib oben deine WhatsApp-Nummer ein, dann erscheint der Code hier.

Keine Anmeldung, keine E-Mail. Der Code entsteht in deinem Browser und gehört dir.

Vorschau

Gerät der Vorschau
Deine MarkeAntwortet in der Regel innerhalb eines Tages

Deine MarkeHallo 👋

Was der Besucher sendet, wenn er auf den Button tippt

Chat starten

Gib deine WhatsApp-Nummer ein, um die Vorschau zu sehen

So installierst du das Widget auf deiner Plattform

Wähle, wo du es einfügst. Auf jeder der fünf dauert es zwei Minuten.

WordPress

1. Geh in deinem WordPress-Dashboard zu „Design“ > „Theme-Datei-Editor“
2. Wähle im Seitenmenü „footer.php“
3. Füge das Script direkt vor dem </body>-Tag ein
4. Speichere die Änderungen

Alternative: Nutze ein Plugin wie „Insert Headers and Footers“ und füge den Code ins Feld „Footer“ ein, ohne Dateien zu bearbeiten.

Shopify

1. Öffne deinen Shopify-Adminbereich
2. Geh zu „Onlineshop“ > „Themes“
3. Klick auf „Aktionen“ > „Code bearbeiten“
4. Wähle im Seitenmenü „theme.liquid“
5. Füge das Script direkt vor dem </body>-Tag ein
6. Speichere die Änderungen

Wix

1. Klick im Wix-Editor in der oberen Leiste auf „Einstellungen“ (⚙️)
2. Wähle „Erweiterte Einstellungen“ > „Benutzerdefinierter Code“
3. Klick auf „+ Benutzerdefinierten Code hinzufügen“
4. Füge das Script ins Codefeld ein
5. Wähle bei „Code platzieren in“ die Option „Body - Ende“
6. Speichere und veröffentliche deine Website

Webflow

1. Öffne dein Projekt in Webflow
2. Geh zu „Site settings“ > „Custom code“
3. Füge das Script unter „Footer code“ ein
4. Veröffentliche deine Website, um die Änderungen zu sehen

Reines HTML

1. Öffne die Datei deiner Seite, zum Beispiel index.html
2. Scroll ans Ende des Dokuments und such das </body>-Tag
3. Füge das Script direkt vor diesem Tag ein
4. Lade die Datei auf deinen Server hoch

Hat deine Website mehrere Seiten, wiederhole den Schritt in der Vorlage, die alle gemeinsam nutzen.

Bring WhatsApp in wenigen Minuten auf deine Website

So fügst du deiner Website einen WhatsApp-Button hinzu

Einen schwebenden WhatsApp-Button auf deine Website zu bringen ist einfach: Du kopierst nur ein kleines HTML-Script und fügst es vor dem schließenden </body> deiner Seite ein. Dieses Chat-Widget erscheint auf all deinen Seiten und lässt deine Besucher dir mit einem einzigen Klick direkt auf WhatsApp schreiben.

Schwebendes WhatsApp-Chat-Widget in HTML

Unser schwebendes WhatsApp-Widget ist mit reinem HTML, CSS und JavaScript gebaut. Es läuft also auf jeder Plattform: WordPress, Shopify, Wix, Webflow oder statisches HTML. Keine Plugins, keine komplizierte Einrichtung: Code einfügen, fertig.

Die bessere Alternative zum Live-Chat

Anders als klassische Live-Chats, die verschwinden, sobald der Nutzer deine Website verlässt, hält WhatsApp das Gespräch offen. Du kannst also weiter verkaufen, Fragen beantworten oder Infos schicken, auch nachdem der Besucher deine Seite verlassen hat.

Chat-Plugin für Shopify, WordPress, Wix und Webflow

Unser WhatsApp-Widget funktioniert wie ein universelles Plugin: kompatibel mit Shopify, WordPress, Wix, Webflow und jedem Website-Baukasten. Du musst keine zusätzlichen Plugins installieren und dir keine Gedanken über Kompatibilität machen: Der Code läuft auf jeder Plattform, die eigenes HTML erlaubt.

Häufige Fragen zum WhatsApp-Widget

Was ist das WhatsApp-Widget?

Eine schwebende Blase auf deiner Website, über die deine Besucher dir mit einem einzigen Klick direkt auf WhatsApp schreiben. Sie müssen weder deine Nummer speichern noch Formulare ausfüllen: Das Gespräch startet sofort.

Wie installiere ich das Widget auf meiner Website?

Gib auf dieser Seite deine Nummer ein, pass Texte und Farbe an und kopiere den Code, der darunter erscheint. Füge ihn direkt vor dem schließenden </body>-Tag deiner Website ein und speichere.

Einmal installiert, erscheint die Blase auf all deinen Seiten, ohne weitere Einstellungen.

Ist es kostenlos? Muss ich mich anmelden?

Der Generator ist kostenlos und verlangt weder Anmeldung noch E-Mail noch Karte. Der Code entsteht in deinem Browser, während du tippst, und du kannst ihn so oft kopieren, wie du willst.

Du brauchst dafür auch kein TBit-Konto: nur eine aktive WhatsApp-Nummer.

Kann ich es auf der Website eines Kunden installieren?

Ja, genau dafür ist es gedacht. Gib die WhatsApp-Nummer deines Kunden ein, pass Markenname, Farbe und Texte an, bis die Vorschau zu seiner Website passt, kopiere den Code und füge ihn in seine Vorlage ein.

Das kannst du für beliebig viele Kunden wiederholen: Jeder Code ist eigenständig und an kein Konto gebunden.

Kann ich das Logo oder die Begrüßungsnachricht anpassen?

Ja. Du kannst das Logo deines Unternehmens neben der Blase anzeigen und die Begrüßungsnachricht festlegen, die deine Besucher sehen, zum Beispiel:

„Hallo! Möchtest du mehr über unsere Produkte erfahren?“

So bleibt die visuelle Identität deiner Marke erhalten, und du bietest vom ersten Kontakt an ein stimmiges Erlebnis.

Warum eine WhatsApp-Blase auf meiner Website?

Weil sie aus Besuchern echte Gespräche macht.

Menschen vertrauen WhatsApp mehr als Formularen oder E-Mails. Mit einem direkten Kanal erhöhst du deine Verkaufschancen, antwortest schneller und baust eine engere Beziehung zu deinen Kunden auf.

Was unterscheidet es von einem klassischen Live-Chat?

Anders als ein Live-Chat, der verschwindet, sobald der Besucher die Seite verlässt, hält WhatsApp das Gespräch auch danach offen.

So kannst du das Gespräch fortsetzen, Infos schicken oder einen Verkauf abschließen, ohne den Kontakt zum Kunden zu verlieren.

Ist das Widget sicher?

Ja. Die gesamte Kommunikation läuft direkt in WhatsApp, die Informationen sind also durch die Verschlüsselung der Plattform geschützt.

TBit speichert weder deine Nachrichten noch deine Gespräche. Der Code wird in deinem Browser mit den Daten erzeugt, die du auf dieser Seite eingibst.

Funktioniert es auf jeder Seite und in jedem Land?

Ja. Das Widget läuft auf jeder Website, die eigenen HTML-Code erlaubt, und in allen modernen Browsern. Du brauchst nur ein aktives WhatsApp-Business- oder Privatkonto.