Custom Launcher: eigener Knopf statt Standard-Blase

Werkstück ausprobieren →

Die runde Standard-Blase passt selten zum Rest der Seite. Mit der Widget-API wird jedes Element zum Launcher: ein Button im Header, ein Zahnrad unten rechts, ein Menüpunkt.

Voraussetzung im Admin Center

Bevor Code ins Spiel kommt: Im Admin Center unter Kanäle → Messaging → Web Widget die Launcher-Form auf «Custom Launcher» stellen. Damit erscheint die Standard-Blase gar nicht erst. Die Einstellung gilt kontoweit. Auf Seiten mit Embedded Mode ist das egal (dort gibt es ohnehin keine Blase); auf Floating-Seiten übernimmt dein eigener Knopf.

Der Preis: keine Proactive Messages

Diese kontoweite Umstellung hat eine Kehrseite, die vor den Einbau gehört: Custom Launcher und proaktive Nachrichten schliessen sich aus. Wer die Standard-Blase abschaltet, verliert die von Zendesk ausgelösten proaktiven Ansprachen — sie hängen am nativen Launcher. Das ist eine Entscheidung fürs ganze Konto, nicht pro Seite: eigener Knopf oder proaktive Ansprache.

Kontoweite Kröte: Der eigene Launcher deaktiviert die proaktiven Nachrichten. Vor dem Umstellen mit dem Marketing/CRM klären, ob die noch gebraucht werden.

Öffnen, schliessen, Zustand spiegeln

meinKnopf.addEventListener('click', () =>
  zE('messenger', istOffen ? 'close' : 'open')
);

zE('messenger:on', 'open', () => setzeZustand(true));
zE('messenger:on', 'close', () => setzeZustand(false));

Die Events feuern auch, wenn jemand das Widget über dessen eigenes UI schliesst. Der Knopf bleibt also synchron (aria-expanded nicht vergessen).

Der Ungelesen-Zähler

zE('messenger:on', 'unreadMessages', (anzahl) => {
  badge.textContent = String(anzahl);
  badge.hidden = anzahl === 0;
});

Antwortet das Team, während das Widget geschlossen ist, zählt der Badge mit. Eine kleine Shake-Animation macht ihn sichtbar, hinter prefers-reduced-motion: no-preference.

close-on-load: das unterschätzte Detail

Das Widget merkt sich seinen Zustand über Seitenwechsel hinweg. War es auf der letzten Seite offen, startet es auf der nächsten wieder offen, am eigenen Launcher vorbei. Das offizielle Muster schliesst deshalb direkt nach dem Laden:

zE('messenger', 'close');

Danach entscheidet nur noch dein Knopf, wann der Chat erscheint.

← Zurück zur Demo