Chatvio – AI Webchat: Fügen Sie einen Chat-Button zu Ihrer Website hinzu (2026)
Das Chatvio-Plugin ist ein kostenloses WordPress-Plugin, das einen schwebenden Chat-Button zu Ihrer Website hinzufügt – und es öffnet ein echtes Chat-Fenster, keinen Link. Besucher klicken, tippen und ihre Nachricht landet in Ihrem Team-Posteingang. Das Plugin ist kostenlos, und die Kombination mit einem kostenlosen Konto auf der The Tech Pad-Plattform – keine Kreditkarte, kein kostenpflichtiger Plan – schaltet alles frei: Fügen Sie Ihren veröffentlichbaren Schlüssel in das Plugin ein und Sie sind live. In diesem Leitfaden von 2026: warum ein Chat-Button einen einfachen Link schlägt, jede Option, die das Plugin bietet, und die sechs Schritte zur Einrichtung.
Warum ein Chat-Button einem Link überlegen ist
Ein einfacher WhatsApp-Button – der Typ, der wa.me in einem neuen Tab öffnet – leitet den Besucher weg. Ein Chat-Button hält ihn auf Ihrer Seite. Sie stellen eine Frage, bekommen eine Antwort und surfen weiter – kein App-Wechsel, kein Tab-Wechsel, kein Hindernis.
Dieser Unterschied ist wichtig, weil Chat der Ort ist, an dem Kunden tatsächlich reagieren. WhatsApp-Nachrichten haben eine Öffnungsrate von 98% im Vergleich zu etwa 20% bei E-Mails, und die mittlere Antwortzeit liegt unter 90 Sekunden. Wenn ein Besucher auf Ihrer Website eine Frage hat, ist es besser, diesen Moment in einem Chat-Fenster zu erfassen, als darauf zu hoffen, dass er Ihnen später eine Nachricht sendet.
Ein Chat-Button signalisiert auch, dass Hilfe verfügbar ist, und verwandelt eine statische Seite in ein Gespräch – genau darauf ist die Plattform The Tech Pad aufgebaut: gemeinsames Team-Postfach, Automatisierungen, Kampagnen und KI-Co-Pilot. Besucher benötigen nie ein Konto; sie tippen einfach.
Sind Sie sich nicht sicher, ob Sie dies oder einen einfachen WhatsApp-Link benötigen? Unser Leitfaden zum 3 Möglichkeiten, eine WhatsApp-Schaltfläche zu WordPress hinzuzufügen vergleicht die Ansätze, und unser besten WordPress-WhatsApp-Plugins für 2026 verschafft Ihnen den vollständigen Überblick.
Was das Chatvio-Plugin Ihnen bietet
Das Plugin integriert das The Tech Pad-Web-Chat-Widget mit der eingebauten Blase versteckt und fügt dann seinen eigenen Startknopf hinzu, der das Chatfenster öffnet. Einfach ausgedrückt: Sie steuern den Knopf, The Tech Pad betreibt den Chat. Hier ist das komplette Paket auf einen Blick:
| Was Sie erhalten | Was es macht |
|---|---|
| Schwebender Chat-Knopf | Öffnet das Tech Pad-Chatfenster direkt auf Ihrer Seite |
| Echtes Chat-Fenster | Besucher tippen, Nachrichten landen in Ihrem Team-Postfach — kein Konto erforderlich |
| WhatsApp + Web-Chat | Ein Posteingang für beides, plus ein optionales grünes WhatsApp-Schnellstart-Symbol |
| Dashboard-gesteuerter Chat | Begrüßung, Pre-Chat-Formular, Übergaben, Automatisierungen, Kampagnen |
| 8 fertige Icons | Plus benutzerdefinierter Bild-/GIF-Upload, Farbwähler, Formen, Größen |
| Präzise Platzierung | 7 Positionen, benutzerdefinierte Abstände, separate Einstellungen für Desktop und Mobilgeräte |
| Anzeigeregeln | Seiten, Beitragstypen, Geräte, Besucher, Verzögerung, Scrollen, Geschäftszeiten |
| Shortcode | [techpad_ai_chat] für einen Button irgendwo in deinem Inhalt |
Die Anforderungen sind bescheiden: WordPress 6.0+ und PHP 7.4+. Es funktioniert mit jedem Theme und ist kompatibel mit Page Buildern.
So installieren und konfigurieren Sie das Plugin
Sechs Schritte, ein paar Minuten, kein Code.
- Laden Sie das Plugin herunter. Laden Sie das Zip von der Chatvio-Plugin-Seite — chatvio-ai-webchat.zip — oder durchsuchen Sie alle The Tech Pad Plugins.
- Holen Sie sich Ihren veröffentlichbaren Schlüssel. Melden Sie sich kostenlos auf thetechpad.com an (keine Kreditkarte nötig), öffnen Sie die Web-Chat-Einstellungen und kopieren Sie Ihren veröffentlichbaren (öffentlichen) Schlüssel.
- Installieren und aktivieren. Gehen Sie in WordPress zu Plugins → Neu hinzufügen → Plugin hochladen, wählen Sie die ZIP-Datei aus, klicken Sie auf Jetzt installieren und dann auf Aktivieren.
- Den Schlüssel verbinden. Öffnen Sie The Tech Pad → Chatvio – AI Webchat. Unter Verbindung fügen Sie Ihren veröffentlichbaren Schlüssel ein und speichern. Wählen Sie dann Ihr WhatsApp-Ziel aus — entscheiden Sie, was die grüne WhatsApp-Blase neben der Chat-Schaltfläche macht: Ihre The Tech Pad-Nummer (angezeigt, wenn sie verbunden ist), eine andere Nummer (öffnet wa.me, keine Verbindung erforderlich) oder gar kein WhatsApp. Legen Sie Ihren CTA-Text fest und schalten Sie das GA dataLayer-Tracking ein, wenn Sie Google Analytics verwenden.
- Gestalten Sie den Launcher. Wählen Sie eines der acht Symbole aus — oder laden Sie Ihr eigenes Bild oder GIF hoch — wählen Sie Farben, Form und Größe, und legen Sie dann eine Position fest.
- Speichern, Vorschau, veröffentlichen. Verwenden Sie die Vorschau-Taste, um Ihre Einrichtung zu überprüfen, dann öffnen Sie Ihre Seite und klicken Sie auf die Schaltfläche — Ihr Chatfenster öffnet sich.
Alle Optionen erklärt
Verbindung. Der veröffentlichbare Schlüssel ist die einzige erforderliche Einstellung. Er stammt von einem kostenlosen Tech Pad-Konto — keine Kreditkarte erforderlich — und kann sicher eingebettet werden: Er erlaubt nur Besuchern, einen Chat auf Ihrer Website zu öffnen. Erweiterte Einstellungen können die API-URL überschreiben (nützlich für Tests), die „Powered by“-Verknüpfung aktivieren (standardmäßig deaktiviert — auf Ihrer Website wird nichts angezeigt, es sei denn, Sie aktivieren es), den CTA-Text festlegen und das GA dataLayer-Tracking aktivieren.
Launcher & Stil. Acht fertige SVG-Icons decken jede Stimmung ab:
| Icon | Am besten für |
|---|---|
| Chatblase | Der universelle Standard |
| Blase mit Punkten | Ein "jemand tippt" Gefühl |
| Blase mit Textzeilen | Nachrichten auf einen Blick |
| WhatsApp-Logo | Signalisiert WhatsApp-Chat |
| WhatsApp-Blase | WhatsApp + Web-Chat-Hybrid |
| Headset | Support- und Servicedesks |
| Nachrichtenquadrat | Sauber und minimal |
| Papierflieger | Schnelle Nachrichten |
Bevorzugen Sie Ihr eigenes Branding? Laden Sie ein benutzerdefiniertes Bild oder GIF aus der Medienbibliothek hoch. Farbpicker passen Hintergrund und Symbol an, die Form kann rund, abgerundet-quadratisch oder quadratisch sein, und die Größe reicht von 32 bis 120 px.
Beschriftung & Animation. Zeigen Sie beim Hover ein Tooltip, ein immer sichtbares Etikett oder nichts an. Animationen: keine, Puls, Springen, Schütteln oder Ring – dezente Möglichkeiten, den Blick zu lenken.
Position. Sieben Voreinstellungen: unten-rechts, unten-links, unten-mitte, rechts-mitte, links-mitte, oben-rechts und oben-links. Benötigen Sie Pixelkontrolle? Stellen Sie benutzerdefinierte Abstände und Z-Index ein. Position, Abstände und Größe werden sowohl für Desktop als auch für Mobilgeräte (unter 782 px) separat festgelegt, sodass die Schaltfläche auf Handys niemals Ihren Inhalt überdeckt.
Anzeige-Regeln. Zeigen Sie die Schaltfläche auf der gesamten Website, nur auf aufgeführten Seiten oder überall außer auf den aufgeführten Seiten — Seiten-URLs oder IDs, eine pro Zeile. Verbergen Sie sie bei bestimmten Beitragstypen, beschränken Sie sie auf Desktop oder Mobilgerät, schränken Sie sie auf angemeldete Benutzer oder Gäste ein, verzögern Sie sie um Sekunden oder Scroll-Prozentsatz und legen Sie Geschäftszeiten mit Tagen und Uhrzeiten in der Zeitzone Ihrer Website fest.
Erweitert. Jeder Launcher-Stil ist eine Einstellung — Farben, Form, Größe, Position, Beschriftung und Animation. Für alles darüber hinaus verwenden Sie den CSS-Editor, den WordPress bereits mitliefert (Design → Anpassen → Zusätzliches CSS): WordPress überprüft, was Sie einfügen, und es bleibt mit Ihrem Theme. Sie benötigen eine Schaltfläche an einer bestimmten Stelle innerhalb Ihres Inhalts? Der [techpad_ai_chat]-Shortcode akzeptiert die Attribute Beschriftung, Größe, Symbol und Farbe.
Was das Chat-Fenster Ihnen gibt
Wenn ein Besucher auf Ihre Schaltfläche klickt, öffnet sich das Tech Pad-Chat-Fenster direkt auf der Seite. Sie schreiben eine Nachricht, die in Ihrem Team-Posteingang neben Ihren WhatsApp-Konversationen landet — ein Posteingang, eine Historie, kein Kopieren und Einfügen.
Alles, was Besucher in diesem Fenster sehen, wird von Ihrem Dashboard aus verwaltet, nicht vom Plugin:
- Begrüßung. Die erste Nachricht, die Besucher erhalten, einmal geschrieben und überall verwendet.
- Vor-Chat-Formular. Sammeln Sie Name, E-Mail oder andere Informationen, bevor der Chat beginnt.
- Übergaben. Leiten Sie Gespräche an den richtigen Teamkollegen oder die richtige Abteilung weiter.
- Automatisierungen & Kampagnen. Willkommensfolgen, Antworten außerhalb der Geschäftszeiten und WhatsApp-Kampagnen laufen im selben Posteingang.
Deshalb bleibt das Plugin einfach: Der Button ist Ihr Job, die Konversations-Engine gehört The Tech Pad. Zwei Nachrichtenvorlagen, um Ihnen den Einstieg zu erleichtern — die erste als Begrüßung, die zweite als automatische Antwort außerhalb der Geschäftszeiten:
Hallo {{1}}! Danke, dass du {{2}} besucht hast — wie können wir dir heute helfen? 👋
Danke für deine Nachricht, {{1}}! Unser Team ist momentan offline und wird in Kürze antworten. Wenn es dringend ist, tippe auf das grüne WhatsApp-Symbol, um uns dort zu erreichen.
Wähle die WhatsApp-Nummer, die deine Besucher verwenden
Die Chat-Schaltfläche öffnet immer das The Tech Pad-Chatfenster auf Ihrer Website. Die grüne WhatsApp-Blase daneben ist optional – und seit Version 1.1.0 können Sie entscheiden, auf welche Nummer sie zeigt, ganz ohne Code. Öffnen Sie The Tech Pad → Chatvio – AI Webchat → Verbindung → WhatsApp-Button und wählen Sie eine von drei:
| Einstellung | Was Besucher sehen | Für wen es geeignet ist |
|---|---|---|
| Meine Tech Pad WhatsApp-Nummer | WhatsApp-Blase, die einen Chat mit der Nummer öffnet, die in Ihrem Tech Pad-Dashboard verbunden ist (mit Meta verifiziert) | Bereits verbundene Unternehmen — Webchat und WhatsApp landen in einem gemeinsamen Posteingang, KI-Antworten enthalten |
| Eine weitere WhatsApp-Nummer | WhatsApp-Blase, die wa.me mit jeder von Ihnen eingegebenen Nummer öffnet — keine Tech Pad-Verbindung erforderlich | Jeder, der die WhatsApp-Verknüpfung heute möchte und die Nummer später verbinden kann |
| WhatsApp nicht anzeigen | Nur die Chat-Schaltfläche | Web-Chat-First-Teams |
Tipp: Noch nicht verbunden, aber geplant? Wählen Sie Eine weitere WhatsApp-Nummer und geben Sie die Nummer ein, zu der Sie später verbinden möchten. Besucher chatten während der gesamten Zeit mit derselben Nummer — auf ihrer Seite ändert sich nichts, wenn Sie die Einstellung nach dem Verbinden ändern.
FAQ
Brauche ich ein The Tech Pad-Konto für das Chatvio-Plugin? Ja — der Chat läuft auf der Plattform The Tech Pad. Melden Sie sich kostenlos auf thetechpad.com an, öffnen Sie die Web-Chat-Einstellungen und kopieren Sie Ihren publizierbaren (öffentlichen) Schlüssel in das Plugin. Besucher benötigen niemals ein Konto.
Ist der öffentliche Schlüssel sicher, um ihn auf meiner Website zu platzieren? Ja. Der veröffentlichbare Schlüssel ist zum Einbetten vorgesehen — er ermöglicht es Besuchern nur, einen Chat auf Ihrer Website zu öffnen. Es ist kein geheimer API-Schlüssel und kann nicht in Ihrem Namen Nachrichten senden.
Können Besucher auch über WhatsApp chatten? Ja. Die grüne WhatsApp-Blase neben der Chat-Schaltfläche öffnet einen WhatsApp-Chat, und jede Unterhaltung landet im selben Tech Pad-Posteingang. Seit Version 1.1.0 können Sie in Einstellungen → Verbindung auswählen, auf welche Nummer sie zeigt: Ihre verbundene Tech Pad-Nummer oder eine andere Nummer über einen einfachen wa.me-Link.
Brauche ich eine Tech Pad WhatsApp-Nummer für die WhatsApp-Blase? Nein. Wähle in den Einstellungen → Verbindung „Eine andere WhatsApp-Nummer“ und gib eine beliebige Nummer ein — Besucher öffnen damit einen normalen WhatsApp-Chat, keine Meta-Verifizierung oder API ist beteiligt. Wenn du diese Nummer später in deinem Tech Pad-Dashboard verbindest, schalte die Einstellung auf deine Tech Pad-Nummer um und diese Chats werden deinem gemeinsamen Posteingang hinzugefügt.
Kann ich den Button nur auf einigen Seiten anzeigen? Ja. Wählen Sie unter Anzeige-Regeln „Nur auf den unten aufgeführten Seiten“ und geben Sie Seiten-URLs oder IDs ein, jeweils eine pro Zeile. Sie können es auch auf bestimmten Beitragstypen ausblenden, auf Desktop- oder Mobilgeräte beschränken, nur für angemeldete Benutzer oder Gäste anzeigen, zeitlich oder beim Scrollen verzögern und Geschäftszeiten festlegen.
Was passiert, wenn ein Besucher auf die Schaltfläche klickt? Das The Tech Pad-Chatfenster öffnet sich direkt auf Ihrer Seite. Der Besucher schreibt eine Nachricht, die in Ihrem Team-Posteingang landet – mit Begrüßung, Pre-Chat-Formular, Agentenübergaben und Automatisierungen, die alle von Ihrem Dashboard aus verwaltet werden.
Holen Sie sich das kostenlose Plugin
Das Chatvio-Plugin ist kostenlos, das Tech Pad-Konto, das es verbindet, ist kostenlos, und es wird nirgendwo im Ablauf eine Kreditkarte benötigt. Herunterladen chatvio-ai-webchat.zip, in ein paar Minuten installieren und heute einen Chat-Button auf Ihrer Website platzieren. Erstellen Sie Ihr kostenloses Konto unter thetechpad.com/wa/ und holen Sie sich Ihren veröffentlichbaren Schlüssel — alles andere ist Punkt und Klick.
Während Sie hier sind: lernen Sie das 3 Möglichkeiten, eine WhatsApp-Schaltfläche zu WordPress hinzuzufügen, oder sehen Sie, wie sich das Chatvio-Plugin in unserem Vergleich schlägt besten WordPress-WhatsApp-Plugins für 2026.