So beheben Sie Probleme mit Zendesk-Designs: Eine vollständige Anleitung zur Fehlerbehebung

Ein defektes Help Center-Design ist für alle frustrierend. Ihre Kunden finden keine Antworten, Ihr Support-Team bearbeitet unnötige Tickets, und Sie versuchen herauszufinden, was schiefgelaufen ist.

Die gute Nachricht? Die meisten Zendesk-Designprobleme folgen vorhersehbaren Mustern. Sobald Sie wissen, wie Sie sie diagnostizieren können, sind die Korrekturen in der Regel unkompliziert. Diese Anleitung führt Sie Schritt für Schritt durch die Identifizierung und Behebung häufiger Designprobleme.

Grundlegendes zu Zendesk-Designtypen und ihren Einschränkungen

Bevor Sie mit der Fehlerbehebung beginnen, müssen Sie verstehen, mit welcher Art von Design Sie arbeiten. Zendesk bietet drei Designkategorien an, die jeweils Aktualisierungen und Support unterschiedlich handhaben.

Standarddesigns (Copenhagen) sind in Ihrem Help Center vorinstalliert. Sie werden von Zendesk verwaltet, erhalten automatische Aktualisierungen und werden vollständig unterstützt. Der Kompromiss? Sie können den zugrunde liegenden Code nicht bearbeiten. Sie können Farben, Schriftarten und Branding über das Einstellungsfeld anpassen, sind aber auf das beschränkt, was Zendesk zulässt.

Benutzerdefinierte Designs sind der Punkt, an dem die Dinge flexibler werden. Dies sind Designs, die Sie durch Bearbeiten von Vorlagen, CSS oder JavaScript geändert haben. Sie haben die vollständige Kontrolle über das Aussehen und die Funktionalität. Aber hier ist der Haken: Sobald Sie Anpassungen vornehmen, sind Sie auf sich allein gestellt. Zendesk unterstützt keinen benutzerdefinierten Code, und Aktualisierungen werden nicht automatisch angewendet. Alle neuen Funktionen, die Zendesk veröffentlicht, müssen manuell zu Ihrem Design hinzugefügt werden.

Marketplace-Designs liegen irgendwo dazwischen. Dies sind Designs von Drittanbietern, die Sie im Zendesk Marketplace kaufen oder testen. Sie bieten oft mehr Designoptionen als das Standarddesign, aber die Qualität variiert erheblich. Der Support erfolgt vom Designentwickler, nicht von Zendesk. Einige Marketplace-Designs sind ausgezeichnet, andere sind schlecht codiert und von ihren Erstellern aufgegeben worden.

Die Kenntnis des Typs bestimmt Ihren Ansatz zur Fehlerbehebung. Probleme mit Standarddesigns sind in der Regel Plattformfehler. Probleme mit benutzerdefinierten Designs sind in der Regel codebezogen. Probleme mit Marketplace-Designs können beides sein, zuzüglich potenzieller Probleme, die durch den Drittanbieterentwickler verursacht werden.

Schritt 1: Isolieren Sie das Problem mit Tests im abgesicherten Modus

Die erste Frage, die beantwortet werden muss: Handelt es sich um ein Zendesk-Plattformproblem oder um etwas in Ihrem benutzerdefinierten Code?

Zendesk bietet eine einfache Möglichkeit, dies herauszufinden. Fügen Sie ?safe_mode=1 an Ihre Help Center-URL an. Dadurch werden alle benutzerdefinierten JavaScript- und CSS-Dateien deaktiviert und nur das Basisdesign geladen. Wenn das Problem im abgesicherten Modus verschwindet, ist Ihr benutzerdefinierter Code die Ursache. Wenn es weiterhin besteht, haben Sie ein Plattformproblem, das Zendesk-Support benötigt.

Für einen gründlicheren Test versuchen Sie die Copenhagen-Designmethode:

1. Gehen Sie zu Knowledge Admin und klicken Sie auf Design anpassen (Customize design)
2. Klicken Sie auf Design hinzufügen (Add theme) und wählen Sie Copenhagen-Design hinzufügen (Add Copenhagen theme)
3. Suchen Sie das neue Copenhagen-Design in Ihrer Bibliothek und klicken Sie auf Anpassen (Customize)
4. Klicken Sie auf Vorschau (Preview) und prüfen Sie, ob das Problem auftritt

Wenn das Problem im Standarddesign Copenhagen besteht, wenden Sie sich an den Zendesk-Kundensupport. Wenn es nur in Ihrem benutzerdefinierten Design auftritt, liegt das Problem in Ihrem Code.

Schritt 2: Beheben Sie häufige Anzeige- und Layoutprobleme

Anzeigeprobleme sind die häufigsten Designprobleme. Schaltflächen, die nicht ausgerichtet sind, Inhalte, die ihren Container überlaufen, oder Layouts, die auf mobilen Geräten zusammenbrechen. Diese lassen sich in der Regel auf CSS-Konflikte oder fehlende Responsive-Design-Regeln zurückführen.

Öffnen Sie zunächst die Entwicklertools Ihres Browsers (F12 in den meisten Browsern). Untersuchen Sie das problematische Element und sehen Sie sich die berechneten Stile an. Werden Ihre benutzerdefinierten Stile von etwas anderem überschrieben? Überprüfen Sie die CSS-Kaskade, um zu sehen, wer den Spezifitätskampf gewinnt.

Häufige CSS-Korrekturen umfassen:

• Überlaufprobleme (Overflow issues): Fügen Sie overflow: hidden oder overflow: auto zu Containern hinzu, die Inhalte abschneiden
• Ausrichtungsprobleme (Alignment problems): Überprüfen Sie Ihre Flexbox- oder Grid-Eigenschaften. Fehlendes display: flex oder falsche justify-content-Werte sind häufige Ursachen
• Mobile Reaktionsfähigkeit (Mobile responsiveness): Stellen Sie sicher, dass Sie Media Queries verwenden. Testen Sie an gängigen Haltepunkten (768px für Tablets, 480px für Mobilgeräte)
• Z-Index-Stapelung (Z-index stacking): Elemente, die hinter anderen erscheinen, benötigen oft explizite Z-Index-Werte mit korrekter Positionierung (relativ, absolut oder fixiert)

Wenn Sie benutzerdefiniertes CSS über den Designeditor hinzugefügt haben, überprüfen Sie, ob es korrekt geladen wird. Manchmal werden CSS-Dateien aggressiv zwischengespeichert. Versuchen Sie, einen Versionsparameter zu Ihrer CSS-URL hinzuzufügen oder Ihren Browser-Cache zu leeren.

Bei JavaScript-bezogenen Anzeigeproblemen überprüfen Sie die Browserkonsole auf Fehler. Ein einzelner JavaScript-Fehler kann verhindern, dass nachfolgende Skripte ausgeführt werden, wodurch interaktive Elemente wie Dropdown-Menüs oder Suchvorschläge unterbrochen werden.

Schritt 3: Beheben Sie Probleme mit Vorlagen und Codebearbeitung

Vorlagenprobleme sind kniffliger, da sie die Curlybars-Vorlagensprache von Zendesk beinhalten. Wenn Ihre Codeänderungen nicht in der Vorschau oder im Live-Design angezeigt werden, können verschiedene Dinge passieren.

Überprüfen Sie zunächst, ob Sie die richtige Vorlagendatei bearbeiten. Zendesk-Designs verwenden bestimmte Dateinamen für verschiedene Seitentypen:

• home_page.hbs für die Help Center-Homepage
• article_page.hbs für einzelne Artikel
• category_page.hbs und section_page.hbs für Navigationsseiten
• header.hbs und footer.hbs für globale Elemente

Ein häufiger Fehler ist das Bearbeiten von home_page.hbs, wenn Sie tatsächlich category_page.hbs für Abschnittsauflistungen ändern müssen.

Syntaxfehler in Curlybars können auch dazu führen, dass Vorlagen im Hintergrund fehlschlagen. Achten Sie auf:

• Fehlende schließende Tags für Helfer wie {{#if}} oder {{#each}}
• Falsche Variablennamen (sie sind Groß- und Kleinschreibungsempfindlich)
• Nicht maskiertes HTML, das dreifache Klammern verwenden sollte: {{{content}}} anstelle von {{content}}

Wenn Ihre Vorschau keine Änderungen anzeigt, versuchen Sie eine Hard Refresh (Strg+F5 oder Cmd+Shift+R). Die Vorschau von Zendesk kann aggressiv mit der Zwischenspeicherung sein. Stellen Sie außerdem sicher, dass Sie die Vorschau mit der richtigen Benutzerrolle anzeigen. Einige Inhalte werden nur angemeldeten Benutzern oder bestimmten Organisationen angezeigt.

Bei anhaltenden Vorschauproblemen überprüfen Sie den Community-Beitrag über Vorlagenbearbeitungen, die nicht funktionieren. Manchmal besteht die einzige Lösung darin, eine neue Kopie des Designs zu erstellen und Ihre Änderungen zu migrieren.

Schritt 4: Behandeln Sie Designaktualisierungen und Versionskonflikte

Designaktualisierungen können eine Quelle unerwarteter Probleme sein, insbesondere bei Marketplace-Designs. Wenn ein Entwickler ein Update veröffentlicht, wird möglicherweise eine Benachrichtigung auf Ihrer Designs-Seite angezeigt. Aber das Aktualisieren ist nicht immer einfach.

Wenn Sie ein Marketplace-Design angepasst haben, werden Ihre Änderungen durch das Aktualisieren überschrieben. Dies ist beabsichtigt, um Sie vor dem Verlust von Arbeit zu schützen. Dies bedeutet jedoch, dass Sie eine Strategie für den Umgang mit Aktualisierungen benötigen.

Die empfohlene Vorgehensweise:

1. Erstellen Sie vor dem Anpassen eines Marketplace-Designs eine Kopie
2. Wenden Sie Ihre Anpassungen auf die Kopie an, nicht auf das Original
3. Lassen Sie das Originaldesign unverändert, damit es Aktualisierungen erhalten kann
4. Wenn ein Update verfügbar ist, überprüfen Sie die Versionshinweise
5. Aktualisieren Sie das Originaldesign und führen Sie dann die Änderungen manuell in Ihre angepasste Kopie zusammen

Für das Standarddesign Copenhagen erfolgen Aktualisierungen automatisch, es sei denn, Sie haben den Code angepasst. Sobald Sie Vorlagen, CSS oder JavaScript bearbeiten, sind Sie für die Pflege dieser Änderungen verantwortlich. Neue Zendesk-Funktionen, die Designaktualisierungen erfordern, werden in Ihrem benutzerdefinierten Design erst angezeigt, wenn Sie sie manuell hinzufügen.

Prävention: Best Practices für stabile Designs

Der beste Weg, Designprobleme zu beheben, ist, sie zu verhindern. Ein paar Gewohnheiten können Ihnen Stunden der Fehlersuche ersparen.

Testen Sie zuerst in der Sandbox. Zendesk bietet aus gutem Grund eine Sandbox-Umgebung. Größere Designänderungen sollten niemals direkt in die Produktion gehen. Erstellen und testen Sie in der Sandbox und stellen Sie sie dann bereit, wenn Sie zuversichtlich sind.

Verwenden Sie die Versionskontrolle. Laden Sie Ihr Design regelmäßig herunter und speichern Sie es in Git oder einem anderen Versionskontrollsystem. Wenn etwas kaputt geht, können Sie schnell feststellen, was sich geändert hat, und bei Bedarf ein Rollback durchführen.

Holen Sie die Zustimmung der Stakeholder ein. Bevor Sie Designänderungen bereitstellen, holen Sie die Zustimmung der Personen ein, die wichtig sind. Support-Manager, Marketingteams und Customer Success-Leiter haben alle Perspektiven darauf, was das Help Center leisten soll. Das Einholen der Genehmigung im Voraus verhindert Notfall-Rollbacks später.

Haben Sie einen Rollback-Plan. Wissen Sie genau, wie Sie zum vorherigen Design zurückkehren, wenn etwas schief geht. Bewahren Sie das alte Design in Ihrer Bibliothek auf, bereit zur Aktivierung. Entscheiden Sie im Voraus, welches Ausmaß des Problems einen sofortigen Rollback gegenüber einem Fix-Forward-Ansatz rechtfertigt.

Dokumentieren Sie Ihre Anpassungen. Wenn Sie ein Design ändern, hinterlassen Sie Kommentare in Ihrem Code, in denen Sie erklären, was Sie geändert haben und warum. Das zukünftige Ich (oder Ihr Nachfolger) wird es Ihnen bei der Fehlersuche danken.

Wann Sie Alternativen zu benutzerdefinierten Designs in Betracht ziehen sollten

Manchmal überwiegt die Wartungslast benutzerdefinierter Designs die Vorteile. Wenn Sie sich ständig mit Designcode herumschlagen oder Ihr Help Center immer noch nicht das Kundenerlebnis bietet, das Sie sich wünschen, ist es möglicherweise an der Zeit, Ihren Ansatz zu überdenken.

Benutzerdefinierte Designs sind leistungsstark, aber sie sind nicht der einzige Weg, um den Self-Service zu verbessern. Moderne KI-Tools können Kundenfragen direkt beantworten und so den Druck auf Ihr Help Center-Design verringern, die gesamte schwere Arbeit zu leisten.

Bei eesel AI verfolgen wir einen anderen Ansatz. Anstatt Wochen damit zu verbringen, Designs anzupassen und Code zu beheben, können Sie einen KI-Teamkollegen einladen, der Ihr Unternehmen in wenigen Minuten kennenlernt. Unser KI-Agent lässt sich direkt in Zendesk integrieren und bearbeitet eigenständig Frontline-Support-Tickets. Er lernt aus Ihren vergangenen Tickets, Help Center-Artikeln und Makros, um genaue, markenkonforme Antworten zu geben.

Der Unterschied? Sie konfigurieren kein Tool, Sie stellen einen Teamkollegen ein. Beginnen Sie damit, dass KI Entwürfe für die Überprüfung durch den Agenten erstellt, und steigen Sie dann zur vollständigen Autonomie auf, sobald sich die KI bewährt hat. Keine Designanpassung erforderlich.

Für kundenorientierten Support ohne die Designkopfschmerzen betten Sie unseren KI-Chatbot auf Ihrer Website ein und beantworten Sie Fragen sofort, basierend auf Ihren vorhandenen Inhalten. Er arbeitet neben Ihrem Help Center, nicht abhängig davon.

Wenn Sie es leid sind, mit Zendesk-Designproblemen zu kämpfen, und herausfinden möchten, wie KI Ihre Abhängigkeit von komplexen Anpassungen reduzieren kann, sehen Sie eesel in Aktion.