Das Chat-Widget über deinen eigenen Button öffnen

Blende die Chat-Bubble aus und öffne den Live-Chat mit window.deskwootWidget.open() über deinen eigenen Button oder Link.

Aktualisiert am 30. September 2026Auch verfügbar auf: English, Português

Du kannst die runde Chat-Bubble deines Live-Chats ausblenden und den Chat stattdessen über deinen eigenen Button oder Link öffnen. Schalte in den Einstellungen deines Live-Chat-Posteingangs Chat-Bubble ausblenden ein und ruf dann in deinem Button window.deskwootWidget.open() auf. Der Widget-Code bleibt auf deiner Seite, nur die Bubble ist ausgeblendet. Ohne Bubble öffnet nichts anderes mehr den Chat, deine Seite braucht also diesen Button.

Einrichten

  1. Geh zu Einstellungen > Posteingänge und klicke bei deinem Live-Chat-Posteingang auf Konfigurieren.
  2. Such im Tab Einstellungen den Bereich Chat-Bubble und schalte Chat-Bubble ausblenden ein. Der Schalter speichert sofort.
  3. Lass den Widget-Code auf deiner Website. Du findest ihn im selben Tab unter Widget installieren. Ist das Widget noch nicht eingebaut, hilft dir Das Widget einbinden.
  4. Füge einen Button oder Link hinzu, der den Chat öffnet:
<button onclick="window.deskwootWidget.open()">Contact support</button>

Ein Link funktioniert genauso:

<a href="#" onclick="window.deskwootWidget.open(); return false;">Contact support</a>

Was du noch tun kannst

  • window.deskwootWidget.close() schließt den Chat, und window.deskwootWidget.toggle() öffnet oder schließt ihn. So kann ein einziger Button beides.
  • Mit window.deskwootWidget.open({ anchor: this }) wächst der Chat aus deinem Button heraus statt aus der Ecke der Seite. Auch ein CSS-Selektor wie "#support-button" funktioniert als Anker.
  • window.__deskwootUnread enthält die Zahl der neuen Antworten von deinem Team oder deinem KI-Bot, die eingetroffen sind, während der Chat geschlossen war. Damit kannst du ein Badge an deinem Button anzeigen. Wenn der Chat geöffnet wird, springt der Wert zurück auf 0. Jede Änderung löst außerdem das Event deskwoot:unread auf window aus.
  • window.deskwoot ist dasselbe Objekt wie window.deskwootWidget.

Die vollständige Referenz steht in der Widget-Dokumentation. Farben und Texte des Chats selbst erklärt Dein Chat-Widget anpassen.

Häufige Fragen

Entfernt das Ausblenden der Bubble den Chat von meiner Website?

Nein. Nur die Bubble ist ausgeblendet. Der Chat lädt weiterhin und öffnet sich, sobald dein Code open() aufruft.

Was passiert, wenn ein Besucher klickt, bevor das Widget geladen ist?

Aufrufe, die kommen, während das Widget noch startet, landen in einer Warteschlange und werden ausgeführt, sobald es bereit ist. Nur Code, der noch vor dem Widget-Code selbst läuft, braucht eine Prüfung wie if (window.deskwootWidget).

Welche Posteingänge haben diese Einstellung?

Live-Chat-Posteingänge (Website). Andere Kanäle haben kein Widget, deshalb erscheint der Bereich Chat-Bubble nur beim Live-Chat.

Kann ich auf manchen Seiten die Bubble zeigen und auf anderen meinen Button?

Chat-Bubble ausblenden gilt für jede Seite, die das Widget dieses Posteingangs nutzt. Wenn du die Bubble auf manchen Seiten haben willst, lass Chat-Bubble ausblenden aus und setz deinen eigenen Button dorthin, wo du ihn brauchst. Bubble und Button öffnen denselben Chat.

Beim Klick auf meinen Button passiert nichts. Was sollte ich prüfen?

Prüf, ob der Widget-Code auf derselben Seite eingebunden ist und ob der Button window.deskwootWidget.open() genau so aufruft, mit den Klammern.

Kann ich anzeigen, wie viele Antworten warten?

Ja. Lies window.__deskwootUnread aus oder hör auf das Event deskwoot:unread auf window und zeig die Zahl an deinem Button an.

Interaktive Deskwoot-Demo