Eigene Schaltfläche zum Öffnen des Chats hinzufügen
Erstellen Sie eine eigene Schaltfläche, die den WhisperBot per Klick an beliebiger Stelle auf Ihrer Website öffnet.
Aktualisiert: 7. Juli 2026
Neben der Standard-Chat-Schaltfläche (Launcher) können Sie eine eigene Schaltfläche erstellen, die den WhisperBot per Klick öffnet. Text und Farbe legen Sie selbst fest, und Whisper generiert einen kurzen HTML-Codeausschnitt, den Sie an beliebiger Stelle auf Ihrer Website einfügen können — zum Beispiel als Call-to-Action auf einer Produktseite, im FAQ-Bereich oder in einem Banner.
Ein hervorragender Anwendungsfall ist Ihre Kontaktseite: Eine Schaltfläche mit dem Text „Ask us" lenkt Besucher dazu, zunächst eine sofortige Antwort von der KI zu erhalten, statt direkt ein Kontaktformular auszufüllen. Das ist besonders nützlich, um Besucher zurückzugewinnen, die mit anderen, weniger hilfreichen Chatbots schlechte Erfahrungen gemacht haben — eine eigene Schaltfläche gibt ihnen eine unkomplizierte Möglichkeit, WhisperBot genau dort auszuprobieren, wo es Sinn ergibt.
Erstellen der Schaltfläche#
Öffnen Sie die Bot-Einstellungen
Klicken Sie im linken Menü auf WhisperBots und wählen Sie Ihren Bot aus.
Öffnen Sie den Bereich Button to open chatbot
In der Navigation der Bot-Einstellungen finden Sie den Bereich Button to open chatbot — er liegt zwischen Placement und Training.
Geben Sie den Text der Schaltfläche ein
Füllen Sie das Feld Button text aus (Standardwert: „Ask us").
Wählen Sie eine Farbe
Wählen Sie die Button color über den Farbwähler oder durch Eingabe eines Hex-Codes. Standardmäßig wird die Farbe Ihres Bots verwendet, und die Textfarbe wird automatisch so berechnet, dass sie mit dem Hintergrund kontrastiert.
Prüfen Sie die Vorschau
In der Preview sehen Sie, wie die Schaltfläche aussehen wird.
Kopieren Sie den Code
Klicken Sie auf Copy script, um den generierten Code in Ihre Zwischenablage zu kopieren.
Einbinden der Schaltfläche#
- Shoptet: Der Code kann auf jeder Seite in Shoptet eingefügt werden. Öffnen Sie die Seite im Shoptet-Editor, klicken Sie auf „Show source code" und fügen Sie den Code dort ein.
- Andere Plattformen: Fügen Sie den Code an beliebiger Stelle im HTML der Seiten ein, auf denen die Schaltfläche erscheinen soll. Auf der jeweiligen Seite muss außerdem bereits das Installations-Skript des Chat-Widgets installiert sein — die Schaltfläche allein lädt das Widget nicht.
Wichtige Verhaltensweisen#
- Wenn Sie das Feld Button text leer lassen, wird kein Code generiert, und es gibt nichts zu kopieren.
- Überflüssige Leerzeichen am Anfang und Ende des Textes werden beim Generieren des Codes automatisch entfernt.
- Der generierte Code ist statisch: Wenn Sie später Text oder Farbe in den Einstellungen ändern, aktualisiert sich der bereits auf Ihrer Website eingefügte Code nicht automatisch. Sie müssen den neuen Code erneut kopieren und auf Ihrer Website ersetzen.
- Sie können die Schaltfläche an beliebig vielen Stellen auf Ihrer Website einfügen — es handelt sich einfach um ein HTML-Snippet, das Sie selbst so oft platzieren können, wie Sie möchten.
- Diese Schaltfläche ist ein zusätzlicher Einstiegspunkt zum Chat — sie ersetzt nicht die schwebende Chat-Schaltfläche (Launcher).