Zendesk Web Widget Launcher Optionen: Ein vollständiger Leitfaden für 2026

Was Sie über Widget Launcher Optionen lernen werden

Der Launcher ist das Erste, was Ihre Kunden sehen, wenn Sie Hilfe benötigen. Es ist dieser Button in der Ecke Ihrer Website, der die Tür zum Support öffnet. Aber hier ist die Sache: Zendesk gibt Ihnen mehr Kontrolle über diesen Button, als die meisten Leute realisieren.

Sie haben Optionen, die von einfachen No-Code-Konfigurationen bis hin zu vollständig benutzerdefinierten Implementierungen reichen, die sich nahtlos in Ihre bestehende UI (User Interface, Benutzeroberfläche) einfügen. Egal, ob Sie das moderne Messaging Web Widget oder das ältere Classic Web Widget verwenden, dieser Leitfaden führt Sie durch jede verfügbare Launcher-Option und hilft Ihnen, den richtigen Ansatz für Ihre Bedürfnisse zu wählen.

Lassen Sie uns aufschlüsseln, was Sie tatsächlich mit Ihrem Widget Launcher tun können und wie Sie jede Option implementieren.

Ihre Zendesk Web Widget Launcher Optionen verstehen

Der Standard-Launcher

Out of the Box (Standardmäßig) bietet Ihnen Zendesk drei Launcher-Formen zur Auswahl im Admin Center:

• Quadrat mit einem einstellbaren Eckradius (0px für scharfe Ecken bis zu 20px für vollständig abgerundete)
• Kreis für einen modernen, kompakten Look
• Benutzerdefinierter Launcher, der den Standard-Button ausblendet, sodass Sie Ihren eigenen erstellen können

Die Positionierung ist unkompliziert: unten links oder unten rechts im Browserfenster. Sie können auch Abstands-Offsets von den Rändern festlegen, wenn Sie Konflikte mit anderen UI-Elementen wie Cookie-Bannern oder Chat-Widgets vermeiden müssen.

Der Standard-Launcher unterstützt optionale Textlabels (wie "Hilfe" oder "Chatten Sie mit uns") und Sie können wählen, ob dieser Text auf mobilen Geräten angezeigt werden soll. Für das Branding legen Sie eine Primärfarbe fest, die sowohl für den Launcher-Button als auch für den Widget-Header gilt, sowie Nachrichten- und Aktionsfarben für die Konversationsschnittstelle.

Wann Sie einen benutzerdefinierten Launcher wählen sollten

Der Standard-Launcher funktioniert für die meisten Anwendungsfälle gut. Es gibt aber Situationen, in denen die Erstellung eines benutzerdefinierten Launchers sinnvoll ist:

• Spezifische Branding-Anforderungen: Sie benötigen, dass der Launcher zu einzigartigen Designelementen passt, die die Admin Center Farben nicht erreichen können
• Nicht-Standard-Platzierung: Sie möchten den Launcher an einer anderen Stelle als den unteren Ecken oder in ein bestehendes Navigationselement integriert haben
• Komplexe Trigger: Sie möchten, dass sich das Widget von mehreren Elementen auf der Seite öffnet, wie z. B. einem "Kontaktieren Sie uns"-Link in Ihrem Header und einem schwebenden Button
• Ungelesene Nachrichten-Badges: Sie möchten Benachrichtigungszahlen auf Ihren eigenen UI-Elementen anzeigen

Der Kompromiss ist die Entwicklungszeit. Benutzerdefinierte Launcher erfordern HTML, CSS und JavaScript Kenntnisse. Sie benötigen auch eine laufende Wartung, wenn Zendesk seine API aktualisiert.

Fazit? Beginnen Sie mit dem Standard-Launcher, es sei denn, Sie haben eine spezifische Anforderung, die er nicht erfüllen kann.

Konfigurieren des Standard-Launchers im Admin Center

Schritt 1: Zugriff auf die Web Widget Einstellungen

Navigieren Sie zu Admin Center > Kanäle > Messaging und Social > Messaging und klicken Sie dann auf den Namen Ihres Web Widget Kanals.

Sie sehen mehrere Registerkarten oben: Grundlagen, Stil, Antworten, Präferenzen und Installation. Für die Launcher-Konfiguration benötigen Sie die Registerkarte Stil.

Schritt 2: Anpassen des Launcher-Aussehens

Scrollen Sie in der Registerkarte "Stil" zum Abschnitt Launcher. Hier können Sie Folgendes konfigurieren:

Position im Browserfenster: Wählen Sie unten rechts oder unten links. Berücksichtigen Sie, was sich sonst noch in Ihren Seitenecken befindet. Wenn Sie ein Cookie-Banner oder ein anderes Chat-Tool haben, müssen Sie möglicherweise Offsets anpassen oder die gegenüberliegende Ecke wählen.

Form: Wählen Sie Quadrat, Kreis oder benutzerdefinierten Launcher. Wenn Sie Quadrat wählen, erscheint ein Schieberegler, um den Border-Radius von 0px (scharfe Ecken) bis 20px (vollständig abgerundet) einzustellen.

Text (optional): Fügen Sie ein Label hinzu, das neben dem Launcher-Button erscheint. Etwas wie "Hilfe" oder "Chatten Sie mit uns" kann das Engagement erhöhen, indem es den Zweck des Buttons deutlicher macht.

Auf Mobilgeräten anzeigen: Schalten Sie um, ob das Textlabel auf mobilen Geräten angezeigt wird. Auf kleinen Bildschirmen bevorzugen Sie möglicherweise nur das Symbol, um Platz zu sparen.

Schritt 3: Farben und Branding festlegen

Immer noch in der Registerkarte "Stil" steuert der Abschnitt Frame die visuelle Identität des Widgets:

Primärfarbe: Diese färbt den Launcher-Button und den Widget-Header. Geben Sie einen Hex-Code ein oder verwenden Sie die Farbauswahl. Wenn Sie vom Classic Widget migrieren, werden standardmäßig Ihre vorherigen Branding-Einstellungen verwendet.

Nachrichtenfarbe: Die Hintergrundfarbe der Kunden-Nachrichtenblasen.

Aktionsfarbe: Die Farbe der Buttons und ausgewählten Optionen in der Konversation.

Logo (optional): Laden Sie ein JPG oder PNG hoch, das oben im Widget-Frame angezeigt wird. Dies ist Ihre Chance, die Markenbekanntheit zu stärken.

Titel: Der Text, der oben im Widget erscheint. Dies könnte Ihr Firmenname oder ein Call to Action wie "Kontaktieren Sie uns" sein.

Klicken Sie auf Einstellungen speichern und Ihre Änderungen werden sofort auf jeder Seite mit installiertem Widget live geschaltet.

Erstellen eines benutzerdefinierten Launchers

Vorbereitung für die benutzerdefinierte Implementierung

Bevor Sie Code schreiben, müssen Sie zwei Dinge im Admin Center tun:

1. Navigieren Sie zur gleichen Registerkarte "Stil", die oben beschrieben wurde
2. Setzen Sie Form auf Benutzerdefinierter Launcher

Dadurch wird der Standard-Launcher-Button von Ihrer Website entfernt. Das Widget ist immer noch da, nur versteckt, bis Sie es programmatisch auslösen.

Für die technische Implementierung benötigen Sie:

• Zugriff zum Bearbeiten des HTML und CSS Ihrer Website
• Grundlegende JavaScript Kenntnisse
• Vertrautheit mit der Zendesk Web Widget API

Erstellen des Launchers

Ein benutzerdefinierter Launcher hat drei Komponenten:

1. HTML-Element: Der anklickbare Button oder Link, der das Widget auslöst
2. CSS: Styling, um zu Ihrer Marke zu passen und das Element zu positionieren
3. JavaScript: API-Aufrufe zum Öffnen, Schließen und Überwachen des Widget-Status

Hier ist eine grundlegende Implementierung:

<!-- Ihr benutzerdefinierter Launcher-Button -->
<button id="custom-launcher">Chatten Sie mit uns</button>

<script>
  // Ausblenden des Standard-Launchers (bereits im Admin Center erledigt, aber dies stellt sicher, dass es so ist)
  zE('messenger:set', 'hideLauncher', true);

  // Hinzufügen eines Klick-Handlers zu Ihrem benutzerdefinierten Button
  document.getElementById('custom-launcher').addEventListener('click', function() {
    zE('messenger', 'open');
  });

  // Optional: Aktualisieren des Button-Textes, wenn das Widget geschlossen wird
  zE('messenger:on', 'close', function() {
    console.log('Widget geschlossen');
  });
</script>

Sie können den Button mit CSS gestalten, wie Sie wollen. Positionieren Sie ihn an einer beliebigen Stelle auf der Seite, verwenden Sie Ihre Markenfarben, fügen Sie Hover-Effekte hinzu oder integrieren Sie ihn in die bestehende Navigation.

Code-Beispiel: Einfacher benutzerdefinierter Launcher mit ungelesenem Badge

Ein vollständigeres Beispiel, das die Anzahl der ungelesenen Nachrichten anzeigt:

<button id="custom-launcher">
  Chatten Sie mit uns
  <span id="unread-badge" style="display: none;">0</span>
</button>

<script>
  // Verfolgen ungelesener Nachrichten
  zE('messenger:on', 'unreadMessages', function(count) {
    const badge = document.getElementById('unread-badge');
    if (count > 0) {
      badge.textContent = count;
      badge.style.display = 'inline';
    } else {
      badge.style.display = 'none';
    }
  });

  // Umschalten des Widgets beim Button-Klick
  let isOpen = false;
  document.getElementById('custom-launcher').addEventListener('click', function() {
    if (isOpen) {
      zE('messenger', 'close');
    } else {
      zE('messenger', 'open');
    }
  });

  // Verfolgen des Widget-Status
  zE('messenger:on', 'open', function() { isOpen = true; });
  zE('messenger:on', 'close', function() { isOpen = false; });
</script>

Dies gibt Ihnen einen Launcher, der sich wie der Standard-Launcher verhält, aber mit voller Kontrolle über Aussehen und Platzierung.

Erweiterte Anpassungsoptionen

Theming API für Messaging Widget

Über die Farbeinstellungen im Admin Center hinaus unterstützt das Messaging Widget eine JavaScript Theming API für dynamische Anpassung. Dies ist nützlich, wenn Sie Folgendes möchten:

• Ändern der Farben basierend auf den Benutzereinstellungen (wie z. B. Dark Mode)
• Anwenden verschiedener Themes auf verschiedenen Seiten
• Dynamisches Aktualisieren des Brandings, ohne neu zu laden

Die API verwendet den Befehl set customization (Anpassung festlegen):

zE("messenger:set", "customization", {
  theme: {
    primary: "#FE5E41",
    onPrimary: "#FFFFFF",
    message: "#F3C178",
    onMessage: "#5F0F00",
    action: "#B0DB43",
    onAction: "#000000",
    background: "#DFE0E2",
    onBackground: "#F10404"
  }
})

Wichtige Theme-Eigenschaften:

• primary: Hauptmarkenfarbe für Launcher und Header
• onPrimary: Textfarbe auf primären Elementen
• message: Hintergrund der Kunden-Nachrichtenblase
• onMessage: Textfarbe in Kunden-Nachrichten
• action: Button- und interaktive Elementfarben
• onAction: Textfarbe auf Aktions-Buttons
• background: Widget-Hintergrundfarbe
• onBackground: Textfarbe auf dem Hintergrund

Sie müssen nicht jede Eigenschaft angeben. Alle, die Sie auslassen, verwenden die Standardfarben, was bedeutet, dass Sie nur das überschreiben können, was Sie benötigen.

Quelle: Zendesk Web Widget Customization API

Classic Widget API Unterschiede

Wenn Sie noch Web Widget (Classic) verwenden, ist die API-Struktur anders:

• Befehle verwenden zE('webWidget:*') anstelle von zE('messenger:*')
• Die Einstellungen werden in einem window.zESettings Objekt definiert, bevor das Widget geladen wird
• Die Anpassung ist eingeschränkter: nur Theme-Farbe und Theme-Textfarbe
• Keine Unterstützung für den eingebetteten Modus

Beispiel für einen Classic Widget Befehl:

zE('webWidget', 'show');
zE('webWidget', 'hide');
zE('webWidget', 'open');
zE('webWidget', 'close');

Quelle: Web Widget (Classic) API

Eingebetteter Modus

Anstelle eines schwebenden Launchers können Sie das Widget direkt in ein Seitenelement einbetten. Dies ist nützlich für dedizierte Support-Seiten, auf denen Sie die Konversationsschnittstelle sofort sichtbar machen möchten.

So verwenden Sie den eingebetteten Modus:

1. Fügen Sie ein Container-Element zu Ihrem HTML hinzu:

<div id="my-messenger-container"></div>

2. Deaktivieren Sie das automatische Rendern, bevor das Widget geladen wird:

<script>
  window.zEMessenger = { autorender: false };
</script>

3. Rufen Sie die Render-Methode mit dem eingebetteten Modus auf:

zE("messenger", "render", {
  mode: "embedded",
  widget: {
    targetElement: "#my-messenger-container"
  }
})

Das Widget passt sich automatisch an, um seinen Container zu füllen. Sie können auch nur die Konversationsliste oder das Nachrichtenprotokoll separat rendern, wenn Sie ein Split-View-Layout wünschen.

Quelle: Embedded Mode Documentation

Best Practices für die Launcher-Implementierung

Mobile Responsivität

Testen Sie Ihren Launcher auf tatsächlichen mobilen Geräten, nicht nur mit Browser-Entwicklungstools. Der Standard-Launcher kommt mit Mobile einigermaßen gut zurecht, aber benutzerdefinierte Launcher erfordern sorgfältige Aufmerksamkeit:

• Stellen Sie sicher, dass die Touch-Ziele mindestens 44x44 Pixel groß sind
• Überlegen Sie, ob Textlabels auf kleinen Bildschirmen sinnvoll sind
• Testen Sie, ob das Widget kritische mobile UI nicht verdeckt

Barrierefreiheit

Ihr Launcher sollte für jeden funktionieren:

• Fügen Sie benutzerdefinierten Launchern die richtigen aria-label Attribute hinzu
• Stellen Sie sicher, dass die Tastaturnavigation funktioniert (Tab zum Fokussieren, Eingabe/Leertaste zum Aktivieren)
• Testen Sie mit Screenreadern, um zu überprüfen, ob sich das Widget korrekt ankündigt
• Achten Sie auf ausreichenden Farbkontrast (WCAG AA Minimum)

Vermeidung von UI-Konflikten

Die unteren Ecken von Websites sind überfüllte Immobilien. Bevor Sie Ihren Launcher platzieren:

• Suchen Sie nach Cookie-Einwilligungs-Bannern
• Suchen Sie nach Live-Chat-Tools von anderen Anbietern
• Berücksichtigen Sie Ihre eigenen Navigationselemente
• Verwenden Sie Offset-Einstellungen, um Freiraum zu schaffen

Performance-Auswirkungen

Das Zendesk Widget wird asynchron geladen, sodass es Ihr Seitenrendering nicht blockiert. Aber benutzerdefinierte Launcher, die den Widget-Status überprüfen oder häufig aktualisieren, können Overhead verursachen. Halten Sie Ihre Event-Handler einfach und entprellen Sie alle Rapid-Fire-Updates.

Verbessern Sie Ihr Widget mit eesel AI

Sobald Sie Ihren Launcher konfiguriert haben, ist die nächste Frage, was passiert, wenn Kunden darauf klicken. Hier können wir helfen.

Bei eesel AI integrieren wir uns in Zendesk Messaging, um KI-gestützte Antworten über Ihr Web Widget bereitzustellen. So funktioniert es:

Sie verbinden eesel mit Ihrem Zendesk-Konto und unsere KI lernt aus Ihren vergangenen Tickets, Hilfe-Center-Artikeln, Makros und jeder verbundenen Dokumentation. Wenn Kunden eine Konversation über Ihr Widget starten, kann eesel die erste Antwort bearbeiten, häufig gestellte Fragen beantworten und nur bei Bedarf an menschliche Agenten eskalieren.

Die KI behält Ihre Markenstimme bei, da sie darauf trainiert ist, wie Ihr Team tatsächlich schreibt. Und es lernt weiter: Wenn Sie eine Antwort korrigieren oder Ihre Dokumentation aktualisieren, integriert eesel dieses Feedback automatisch.

Dies funktioniert mit jeder Launcher-Konfiguration, egal ob Sie den Standard-Button oder eine vollständig benutzerdefinierte Implementierung verwenden. Die KI sitzt hinter der Widget-Schnittstelle, die Ihre Kunden sehen, sodass Sie den Vorteil der Automatisierung erhalten, ohne Ihr Frontend-Setup zu ändern.

Für Teams, die das Ticketvolumen reduzieren und gleichzeitig die Qualität aufrechterhalten möchten, kann die Kombination eines gut gestalteten Launchers mit KI-gestützten Antworten die Support-Last erheblich reduzieren. Laut Zendesk's Benchmark-Daten können effektive Self-Service und Automatisierung das Ticketvolumen um bis zu 25 % reduzieren.

Wählen der richtigen Launcher-Option für Ihre Bedürfnisse

Hier ist die Kurzfassung, wie Sie entscheiden:

Verwenden Sie den Standard-Quadrat- oder Kreis-Launcher, wenn:

• Sie ein schnelles Setup mit minimaler Wartung wünschen
• Standard-Branding-Optionen ausreichend sind
• Sie noch nicht sicher sind, was Sie benötigen

Erstellen Sie einen benutzerdefinierten Launcher, wenn:

• Sie spezifische Branding-Anforderungen haben
• Sie eine nicht standardmäßige Platzierung oder mehrere Triggerpunkte benötigen
• Sie benutzerdefinierte Benachrichtigungs-Badges anzeigen möchten

Verwenden Sie den eingebetteten Modus, wenn:

• Sie eine dedizierte Support-Seite erstellen
• Sie die Konversationsschnittstelle sofort sichtbar machen möchten
• Sie ein Split-View-Layout mit Konversationsliste und Nachrichten nebeneinander benötigen

Beginnen Sie einfach. Der Standard-Launcher ist für die meisten Teams in Ordnung und Sie können jederzeit später auf eine benutzerdefinierte Implementierung upgraden. Wichtig ist, dass Sie den Support schnell vor Ihre Kunden bringen und dann basierend auf dem, was Sie lernen, iterieren.

Denken Sie daran: Der Launcher ist nur die Tür. Entscheidend ist, was auf der anderen Seite passiert. Egal, ob Sie bei den Standardeinstellungen bleiben oder etwas völlig Eigenes erstellen, stellen Sie sicher, dass das Konversationserlebnis einen Mehrwert bietet, sobald Kunden durch diese Tür gehen.