So passen Sie die Position und Größe des Zendesk Web Widgets an

Die korrekte Positionierung Ihres Zendesk Web Widgets kann den Unterschied zwischen einem hilfreichen Kundensupport-Kanal und einer lästigen Ablenkung ausmachen. Ob Sie es ordentlich in der Ecke verstauen oder prominent anzeigen möchten, die Positionierungsoptionen variieren je nachdem, welchen Widget-Typ Sie verwenden.

Hier erfahren Sie genau, wie Sie die Position und Größe für jede Zendesk-Widget-Variante anpassen können.

Welches Zendesk-Widget haben Sie?

Bevor Sie die Positionierung anpassen können, müssen Sie wissen, mit welchem Widget Sie arbeiten. Zendesk bietet drei Haupt-Widget-Typen an, und jeder hat unterschiedliche Anpassungsmöglichkeiten.

Web Widget (Messaging) ist der aktuelle Standard für Konten mit Zendesk Suite oder Support + Chat in Team-Plänen und höher, bei denen Messaging aktiviert ist. Es verfügt über eine moderne Chat-Oberfläche mit Konversationsblasen und unterstützt persistente Konversationen über Sitzungen hinweg.

Web Widget (Classic) ist die Legacy-Option für Konten, die Messaging nicht aktiviert haben. Es kombiniert die Suche im Help Center, Kontaktformulare und optionalen Live-Chat in einer traditionellen Oberfläche. Diese Version bietet die umfangreichste JavaScript-API für die Anpassung.

Chat-only Web Widget (Classic) wird angezeigt, wenn Sie nur das Chat-Produkt ohne Support haben. Es ist im Wesentlichen die Chat-Komponente ohne Ticketing-Funktionen.

Um Ihr Widget zu identifizieren, überprüfen Sie Ihr Admin Center. Wenn Sie Kanäle > Messaging und Social > Messaging sehen, haben Sie das Messaging Web Widget. Wenn Sie Kanäle > Classic > Web Widget sehen, verwenden Sie die Classic-Version.

Quelle: Zendesk Widget Identifizierungsanleitung

Positionierung des Web Widgets (Messaging)

Das Messaging Web Widget bietet einfache Positionierungskontrollen über die Admin Center-Oberfläche.

So greifen Sie auf die Positionseinstellungen zu:

1. Öffnen Sie das Admin Center
2. Klicken Sie in der Seitenleiste auf Kanäle
3. Wählen Sie Messaging und Social > Messaging
4. Klicken Sie auf den Kanalnamen, den Sie bearbeiten möchten
5. Öffnen Sie die Registerkarte Stil

Positionsoptionen:

Das Messaging-Widget unterstützt zwei Positionen: Unten rechts (Standard) oder Unten links. Im Gegensatz zum Classic-Widget können Sie es über die Benutzeroberfläche nicht oben auf der Seite platzieren.

Offset-Konfiguration:

Sie können die genaue Platzierung mithilfe von Offset-Werten feinabstimmen. Der Standardwert beträgt 16 Pixel von der von Ihnen gewählten Kante. Erhöhen Sie diese Werte, um das Widget von der Ecke nach innen zu bewegen, oder verringern Sie sie, um es näher an die Kante zu bringen.

Erscheinungsbild-Anpassung:

Obwohl dies nicht unbedingt eine Positionierung ist, beeinflussen diese Einstellungen den visuellen Fußabdruck des Widgets:

• Border-Radius (Rahmenradius): Anpassen von 0px (scharfe Ecken) bis 20px (vollständig abgerundet)
• Launcher-Form: Wählen Sie Quadrat (mit einstellbarer Kurve), Kreis oder benutzerdefinierten Launcher
• Größenelemente: Die Größe der Launcher-Schaltfläche ist festgelegt, aber Sie können optionalen Text hinzufügen, der ihre Breite erhöht

Mobile Überlegungen:

Aktivieren Sie Auf Mobilgeräten anzeigen, um den Launcher-Text in mobilen SDKs anzuzeigen. Das Widget passt seine Größe automatisch an kleinere Bildschirme an, aber die Position bleibt an der von Ihnen gewählten Ecke verankert.

Quelle: Konfigurieren des Erscheinungsbilds des Web Widgets

Positionierung des Web Widgets (Classic)

Das Classic-Widget bietet mehr Positionierungsflexibilität als sein Messaging-Pendant, einschließlich der Möglichkeit, es in jeder Ecke des Bildschirms zu platzieren.

So greifen Sie auf die Positionseinstellungen zu:

1. Öffnen Sie das Admin Center
2. Klicken Sie in der Seitenleiste auf Kanäle
3. Wählen Sie Classic > Web Widget
4. Suchen Sie die Position-Komponente

Vier-Ecken-Positionierung:

Das Classic-Widget unterstützt alle vier Ecken:

• Oben links
• Oben rechts
• Unten links
• Unten rechts

Wenn es oben positioniert ist, erweitert sich das Widget beim Öffnen nach unten. Wenn es unten positioniert ist, erweitert es sich nach oben.

Grundlegende Offset-Anpassung:

Die Position-Komponente enthält Offset-Steuerelemente, um die Platzierung von der ausgewählten Ecke aus feinabzustimmen. Dies ist nützlich, um Konflikte mit anderen festen Elementen auf Ihrer Seite zu vermeiden.

Erweiterte JavaScript-Anpassung:

Für eine präzise Steuerung akzeptiert das Classic-Widget eine JavaScript-Konfiguration über window.zESettings. Mit diesem Ansatz können Sie genaue Pixelwerte festlegen und die Positionierung sogar dynamisch basierend auf dem Seiteninhalt ändern.

Quelle: Neupositionierung des Web Widgets

Positionierung des Legacy-Chat-Widgets

Wenn Sie ein Legacy-Chat-only-Konto verwenden, befinden sich Ihre Widget-Einstellungen an einem anderen Ort.

So greifen Sie auf die Positionseinstellungen zu:

1. Öffnen Sie Ihr Chat-Dashboard
2. Navigieren Sie zu Einstellungen > Widget
3. Suchen Sie das Dropdown-Menü Widget-Position

Verfügbare Optionen:

Das Legacy-Chat-Widget unterstützt die gleichen vier Ecken wie das Classic Web Widget. Die Anpassungsoptionen sind jedoch eingeschränkter. Sie haben keinen Zugriff auf die umfangreiche JavaScript-API, die das Classic-Widget bietet.

Wichtiger Hinweis: Viele Konten, die zuvor das eigenständige Chat-Widget verwendet haben, haben ihre Einstellungen jetzt in der Web Widget (Classic)-Konfiguration im Support-Produkt verwaltet. Wenn Sie keine Positionseinstellungen in Chat sehen, überprüfen Sie stattdessen Admin Center > Kanäle > Classic > Web Widget.

Quelle: Legacy Chat Widget Anpassung

Erweiterte Positionierung mit JavaScript-API

Für Entwickler, die eine präzise Steuerung benötigen, bietet die Web Widget (Classic) JavaScript-API umfangreiche Positionierungsfunktionen.

Die Grundlage:

Alle Anpassungen erfolgen über das window.zESettings-Objekt, das vor dem Laden des Widget-Skripts definiert werden muss:

window.zESettings = {
  webWidget: {
    position: {
      vertical: 'top',
      horizontal: 'right'
    },
    offset: {
      horizontal: '20px',
      vertical: '100px'
    }
  }
};

Positionseigenschaften:

Häufige Positionierungsszenarien:

Oben rechts mit etwas Freiraum:

window.zESettings = {
  webWidget: {
    position: { vertical: 'top', horizontal: 'right' },
    offset: { horizontal: '30px', vertical: '80px' }
  }
};

Unten links, um eine Fußzeile zu vermeiden:

window.zESettings = {
  webWidget: {
    position: { vertical: 'bottom', horizontal: 'left' },
    offset: { horizontal: '20px', vertical: '100px' }
  }
};

zIndex-Steuerung:

Wenn Ihr Widget hinter anderen Elementen wie Navigationsleisten oder Modalen angezeigt wird, erhöhen Sie den zIndex-Wert in Ihren JavaScript-Einstellungen:

window.zESettings = {
  webWidget: {
    zIndex: 999999
  }
};

Eingebetteter Modus:

Für die vollständige Kontrolle über die Platzierung können Sie das Widget in einen bestimmten Container auf Ihrer Seite einbetten, anstatt es schweben zu lassen. Dies erfordert zusätzliches JavaScript und wird typischerweise verwendet, wenn Sie möchten, dass das Widget als Teil Ihres Seitenlayouts und nicht als Overlay angezeigt wird.

Quelle: Web Widget API Einführung

Best Practices für die Widget-Positionierung

Bei der richtigen Positionierung geht es um mehr als nur die Auswahl einer Ecke. Hier sind praktische Richtlinien für eine effektive Widget-Platzierung.

Berücksichtigen Sie Ihr Inhaltslayout:

Platzieren Sie das Widget so, dass es keine wichtige Navigation oder Inhalte behindert. Unten rechts ist beliebt, weil die meisten Benutzer Rechtshänder sind und viele Websites in diesem Bereich weniger kritische Inhalte haben. Wenn Ihre Website jedoch eine Sticky-Fußzeile oder wichtige CTAs unten rechts hat, sollten Sie eine Positionierung unten links oder oben in Betracht ziehen.

Mobile Responsivität:

Testen Sie Ihre gewählte Position auf tatsächlichen Mobilgeräten, nicht nur durch Ändern der Browsergröße. Der Widget-Launcher sollte keine Navigationsmenüs, Cookie-Zustimmungsbanner oder schwebende Aktionsschaltflächen verdecken. Auf kleineren Bildschirmen benötigen Sie möglicherweise größere Offset-Werte, um eine Überlappung mit der nativen Browser-UI zu vermeiden.

Barrierefreiheitsüberlegungen:

Das Widget passt die Farben automatisch an, um die WCAG-Kontrastrichtlinien zu erfüllen, aber die Positionierung ist auch für die Barrierefreiheit wichtig. Stellen Sie sicher, dass der Launcher keine Fokusindikatoren oder Skip-to-Content-Links verdeckt. Benutzer, die mit der Tastatur navigieren, sollten das Widget ohne übermäßiges Tabben erreichen können.

Wann sollte ein benutzerdefinierter Launcher verwendet werden:

Beide Widget-Typen unterstützen das Ausblenden des Standard-Launchers und das Erstellen Ihres eigenen Triggers. Dies ist nützlich, wenn Sie möchten, dass sich das Widget über eine bestimmte Schaltfläche in Ihrer Navigation öffnet, oder wenn der schwebende Launcher mit Ihrem Designsystem in Konflikt steht. Denken Sie daran, dass die Verwendung eines benutzerdefinierten Launchers zusätzlichen Entwicklungsaufwand erfordert, um Open/Close-Zustände zu verarbeiten.

Testempfehlungen:

• Überprüfen Sie die Positionierung auf verschiedenen Bildschirmgrößen (320px Mobil bis 1920px Desktop)
• Stellen Sie sicher, dass sich das Widget nicht mit Cookie-Bannern, Altersverifizierungs-Modalen oder Werbe-Popups überschneidet
• Testen Sie mit Ihren tatsächlichen Website-Inhalten, nicht nur mit einer leeren Seite
• Berücksichtigen Sie, wie die Position mit dem Scrollverhalten Ihrer Website funktioniert

Fehlerbehebung bei häufigen Positionierungsproblemen

Auch bei klaren Einstellungen funktioniert die Widget-Positionierung manchmal nicht wie erwartet. Hier erfahren Sie, wie Sie die häufigsten Probleme beheben können.

Widget wird nicht an der erwarteten Position angezeigt:

Überprüfen Sie zunächst, ob Sie die Einstellungen für den richtigen Widget-Typ bearbeiten. Änderungen am Messaging-Widget wirken sich nicht auf das Classic-Widget aus und umgekehrt. Leeren Sie Ihren Browser-Cache und überprüfen Sie das Widget in einem Inkognito-Fenster, um zwischengespeichertes JavaScript auszuschließen.

z-Index-Konflikte:

Wenn das Widget hinter anderen Elementen wie Navigationsleisten oder Modalen angezeigt wird, erhöhen Sie den zIndex-Wert in Ihren JavaScript-Einstellungen. Beginnen Sie mit 999999 und passen Sie ihn nach unten an, wenn dies andere Probleme verursacht. Einige Drittanbieter-Tools verwenden extrem hohe z-Index-Werte, daher müssen Sie möglicherweise experimentieren.

Mobile Positionierungsprobleme:

Mobile Browser verarbeiten Viewport-Einheiten anders als Desktop-Browser. Wenn Ihre Offset-Werte auf dem Desktop, aber nicht auf dem Handy funktionieren, versuchen Sie, eine prozentuale Positionierung zu verwenden oder testen Sie verschiedene Pixelwerte speziell für mobile Viewports. Das Messaging-Widget verfügt über eine spezielle Mobile-Einstellung, aber das Classic-Widget erfordert CSS-Media-Queries für eine mobile-spezifische Positionierung.

Änderungen werden nicht auf Ihrer Website angezeigt:

Es kann einige Minuten dauern, bis Widget-Einstellungen übernommen werden. Wenn Sie gewartet haben und immer noch keine Änderungen sehen, überprüfen Sie, ob Sie eine Seite betrachten, auf der das Widget tatsächlich installiert ist. Der Widget-Snippet muss auf der Seite vorhanden sein, damit alle Einstellungen wirksam werden.

Cache- und CDN-Überlegungen:

Wenn Sie ein CDN (Content Delivery Network) oder eine Caching-Schicht verwenden, wird Ihr Widget-JavaScript möglicherweise zwischengespeichert. Leeren Sie Ihren CDN-Cache, nachdem Sie Positionierungsänderungen vorgenommen haben. Für das Classic-Widget werden Änderungen an window.zESettings sofort beim Laden der Seite wirksam, sodass das Caching weniger ein Problem darstellt als bei Änderungen im Admin Center.

Verbessern Sie Ihr Zendesk-Widget mit KI

Sobald Sie Ihr Widget perfekt positioniert haben, sollten Sie überlegen, wie KI Ihnen helfen kann, die eingehenden Konversationen zu verarbeiten. Während Zendesk integrierte KI-Funktionen bietet, benötigen Sie möglicherweise mehr Flexibilität bei der Automatisierung von Antworten und der Weiterleitung von Konversationen.

Hier kann ein KI-Teamkollege Ihre Widget-Strategie ergänzen. Anstatt nur Tickets zu sammeln, können Sie einen KI-Agenten haben, der häufige Probleme direkt in der Konversation löst. Die KI lernt aus Ihren vergangenen Tickets und Help-Center-Inhalten, sodass die Antworten Ihrer Markenstimme und Ihren Richtlinien entsprechen.

Wenn Sie über die grundlegende Chatbot-Funktionalität hinausgehen möchten, sollten Sie KI-gestützte Support-Optionen in Betracht ziehen, die in Zendesk integriert werden. Das richtige KI-Setup kann Routinefragen automatisch beantworten und gleichzeitig komplexe Probleme nahtlos an Ihr menschliches Team eskalieren.

Für Teams, die eine komplette KI-Lösung wünschen, kann ein KI-Chatbot, der auf Ihrer spezifischen Wissensdatenbank trainiert wurde, genauere Antworten liefern als generische Alternativen. Sehen Sie sich die Preisoptionen an, um zu sehen, was zu Ihrem Supportvolumen passt.