zendesk-app-location-sidebar-ticket
eesel Team
Last edited March 2, 2026
{
"title": "So erstellen Sie eine Zendesk-Ticket-Sidebar-App: Eine vollständige Anleitung für Entwickler",
"slug": "zendesk-app-location-sidebar-ticket",
"locale": "de",
"date": "2026-03-02",
"updated": "2026-03-02",
"template": "default",
"excerpt": "Eine Schritt-für-Schritt-Anleitung für Entwickler zum Erstellen von Apps für die Zendesk-Ticket-Sidebar, von der Manifestkonfiguration bis zur Arbeit mit Ticketdaten über das Zendesk Apps Framework.",
"categories": [
"Guides",
"Zendesk"
],
"tags": [
"Zendesk",
"App Development",
"Ticket Sidebar",
"ZAF",
"Developer Guide"
],
"readTime": 8,
"author": 16,
"reviewer": 14,
"seo": {
"title": "So erstellen Sie eine Zendesk-Ticket-Sidebar-App: Eine vollständige Anleitung für Entwickler",
"description": "Eine Schritt-für-Schritt-Anleitung für Entwickler zum Erstellen von Apps für die Zendesk-Ticket-Sidebar, von der Manifestkonfiguration bis zur Arbeit mit Ticketdaten über das Zendesk Apps Framework.",
"image": "https://wmeojibgfvjvinftolho.supabase.co/storage/v1/object/public/public_assets/blog-gen/banner-23678d8a-12b3-4be7-b973-433f05e21354"
},
"coverImage": "https://wmeojibgfvjvinftolho.supabase.co/storage/v1/object/public/public_assets/blog-gen/banner-23678d8a-12b3-4be7-b973-433f05e21354",
"coverImageAlt": "Bannerbild für So erstellen Sie eine Zendesk-Ticket-Sidebar-App: Eine vollständige Anleitung für Entwickler",
"coverImageWidth": 1920,
"coverImageHeight": 1080,
"faqs": {
"heading": "Häufig gestellte Fragen",
"type": "blog",
"answerType": "html",
"faqs": [
{
"question": "Was ist der Unterschied zwischen ticket_sidebar und new_ticket_sidebar in einem Zendesk-App-Standort?",
"answer": "Der Standort ticket_sidebar zeigt Ihre App an, wenn Sie vorhandene Tickets anzeigen, während new_ticket_sidebar angezeigt wird, wenn Agenten neue Tickets vor dem Absenden erstellen. Sobald ein Ticket erstellt wurde, wird es in die Standard-Ticket-Sidebar verschoben. Sie können beide Standorte in Ihrem Manifest konfigurieren, wenn Ihre App während der Ticketerstellung und danach funktionieren muss."
},
{
"question": "Kann ich den Zendesk-App-Standort ticket_sidebar für Apps verwenden, die Ticketdaten ändern müssen?",
"answer": "Ja, der Ticket-Sidebar-Standort unterstützt sowohl das Lesen als auch das Schreiben von Ticketdaten. Sie können ZAF-Clientmethoden verwenden, um Ticketeigenschaften zu aktualisieren, Kommentare hinzuzufügen oder benutzerdefinierte Felder zu ändern. Seien Sie jedoch vorsichtig mit Berechtigungen. Ihre App kann nur Aktionen ausführen, für die der authentifizierte Agent eine Berechtigung hat."
},
{
"question": "Wie gehe ich mit unterschiedlichen Sidebar-Breiten um, wenn ich eine Zendesk-Ticket-Sidebar-App erstelle?",
"answer": "Setzen Sie flexible: true in Ihrer manifest.json, um die responsive Größenänderung zu aktivieren. Verwenden Sie dann CSS-Medienabfragen oder ein responsives Framework wie Tailwind CSS, um Ihr Layout anzupassen. Entwerfen Sie für eine Mindestbreite von 200px und skalieren Sie sie schrittweise nach oben. Überlegen Sie, welche Informationen bei schmalen Breiten wichtig sind und was Sie anzeigen können, wenn Agenten die Sidebar erweitern."
},
{
"question": "Welche APIs sind speziell für den Zendesk-Ticket-Sidebar-Standort verfügbar?",
"answer": "Die Ticket-Sidebar bietet Zugriff auf das Ticket-Objekt (Status, Priorität, benutzerdefinierte Felder), Benutzerobjekte (Anfragesteller, aktueller Benutzer), Kommentarobjekte, Markendaten und Organisationsinformationen. Sie können auch Echtzeitereignisse wie ticket.status.changed abonnieren, um auf Aktualisierungen zu reagieren, sobald sie stattfinden."
},
{
"question": "Benötige ich spezielle Berechtigungen, um eine benutzerdefinierte Zendesk-App-Standort-Ticket-Sidebar-App zu installieren?",
"answer": "Um private Apps hochzuladen und zu installieren, benötigen Sie Administratorzugriff auf Ihre Zendesk-Instanz. Für die Entwicklung und das Testen mit ZCLI benötigen Sie lediglich ein Zendesk-Konto mit entsprechenden Planstufen (Suite Growth+ oder Support Professional+). Wenn Sie planen, im Zendesk Marketplace zu veröffentlichen, durchläuft Ihre App einen Überprüfungsprozess."
},
{
"question": "Kann ich eine Zendesk-Ticket-Sidebar-App erstellen, die in externe Systeme wie CRM- oder E-Commerce-Plattformen integriert wird?",
"answer": "Absolut. Dies ist einer der häufigsten Anwendungsfälle für Sidebar-Apps. Sie können API-Aufrufe an externe Dienste vom Iframe Ihrer App aus tätigen, die Daten in der Sidebar anzeigen und Agenten sogar Aktionen in diesen Systemen ausführen lassen, ohne Zendesk zu verlassen. Stellen Sie einfach sicher, dass Sie die Authentifizierung sicher handhaben und eine Fehlerbehandlung einbauen, wenn externe APIs nicht verfügbar sind."
}
],
"supportLink": null
}
}
---
Stellen Sie sich einen Support-Agenten vor, der ein komplexes Ticket bearbeitet. Er muss die Bestellhistorie des Kunden überprüfen, seinen CRM-Datensatz nachschlagen und die Wissensdatenbank durchsuchen. Ohne Zendesk zu verlassen. Genau das macht eine Ticket-Sidebar-App. Sie bringt externe Daten und Tools direkt in den Arbeitsbereich des Agenten, spart Zeit und reduziert Kontextwechsel.
Die Ticket-Sidebar ist einer der leistungsstärksten Standorte für Zendesk-Apps. Sie befindet sich in der App-Leiste auf der rechten Seite jedes Tickets und bietet Agenten sofortigen Zugriff auf kontextbezogene Informationen. Egal, ob Sie eine Integration für Ihr Team erstellen oder planen, im Zendesk Marketplace zu veröffentlichen, diese Anleitung führt Sie durch die Erstellung einer Ticket-Sidebar-App von Grund auf.
## Was Sie benötigen
Bevor Sie mit dem Bau beginnen, stellen Sie sicher, dass Sie diese Voraussetzungen erfüllt haben:
- Ein Zendesk-Konto mit Suite Growth-Plan oder höher oder Support Professional-Plan oder höher. Bei Bedarf können Sie ein kostenloses Testkonto für die Entwicklung erhalten.
- Node.js 14.17.3 oder höher auf Ihrem Rechner installiert
- Die Zendesk-Befehlszeilenschnittstelle (ZCLI) zum lokalen Erstellen und Testen von Apps
- Ein Webbrowser, der gemischte HTTP- und HTTPS-Inhalte zulässt, wie Chrome oder Firefox. Safari funktioniert nicht für die lokale Entwicklung, da es keine gemischten Inhalte unterstützt.
- Grundlegende Kenntnisse in HTML, CSS und JavaScript
## Schritt 1: Richten Sie Ihre Entwicklungsumgebung ein
Zuerst müssen Sie ZCLI installieren und Ihre App-Struktur erstellen. ZCLI ist das offizielle Befehlszeilentool von Zendesk, das alles von der Erstellung neuer Apps bis hin zur Verpackung für die Bereitstellung übernimmt.
Um ZCLI global zu installieren, führen Sie Folgendes aus:
```bash
npm install -g @zendesk/zcli
Erstellen Sie nach der Installation eine neue App, indem Sie Folgendes ausführen:
zcli apps:new
Sie werden nach einigen Details gefragt:
- Verzeichnisname: Dies erstellt den Ordner für Ihre App-Dateien
- Name und E-Mail des Autors: Für das App-Manifest
- App-Name: Der Anzeigename für Ihre App
ZCLI generiert eine Startervorlage mit den wichtigsten Dateien:
manifest.json: Definiert die Konfiguration Ihrer App, einschließlich des Standortsassets/iframe.html: Der HTML-Inhalt, der in der Sidebar angezeigt wirdassets/logo.png: Ihr App-Symboltranslations/en.json: Für die Internationalisierung
Schritt 2: Konfigurieren Sie den Ticket-Sidebar-Standort
Das Herzstück Ihrer App-Konfiguration befindet sich in manifest.json. Diese Datei teilt Zendesk mit, wo Ihre App angezeigt werden soll und welche Inhalte geladen werden sollen.
Für eine Ticket-Sidebar-App benötigt Ihr Manifest eine location-Eigenschaft, die den Schlüssel ticket_sidebar angibt:
{
"name": "Meine Sidebar-App",
"author": {
"name": "Ihr Name",
"email": "you@example.com"
},
"defaultLocale": "en",
"private": true,
"location": {
"support": {
"ticket_sidebar": {
"url": "assets/iframe.html",
"flexible": true
}
}
},
"version": "1.0.0"
}
Lassen Sie uns die wichtigsten Eigenschaften aufschlüsseln:
url: Verweist auf die HTML-Datei, die im Sidebar-Iframe geladen wird. Hier befindet sich die Benutzeroberfläche Ihrer App.flexible: Steuert, ob die Größe des Iframes mit der App-Leiste geändert wird. Setzen Sietruefür responsives Verhalten oderfalse, um die Breite auf 320px zu fixieren.
Es gibt auch einen new_ticket_sidebar-Standort für Apps, die angezeigt werden sollen, wenn Agenten neue Tickets erstellen, bevor sie gesendet werden. Sobald ein Ticket erstellt wurde, wird es an den Standardstandort ticket_sidebar verschoben.
Schritt 3: Greifen Sie mit ZAF-APIs auf Ticketdaten zu
Nun zum interessanten Teil: Lassen Sie Ihre App tatsächlich etwas tun. Das Zendesk Apps Framework (ZAF) bietet ein JavaScript-SDK, mit dem Ihre App mit Ticketdaten, Benutzerinformationen und der Zendesk-Oberfläche interagieren kann.
Fügen Sie zuerst das ZAF-SDK in Ihre iframe.html ein:
<script src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"></script>
Initialisieren Sie dann den Client und beginnen Sie mit dem Abrufen von Daten:
var client = ZAFClient.init();
// Holen Sie sich den Betreff und den Status des aktuellen Tickets
client.get('ticket.subject').then(function(data) {
console.log('Ticketbetreff:', data['ticket.subject']);
});
// Rufen Sie mehrere Eigenschaften gleichzeitig ab
client.get(['ticket.subject', 'ticket.status', 'ticket.priority']).then(function(data) {
console.log('Ticketinfo:', data);
});
Der Ticket-Sidebar-Standort bietet Ihnen Zugriff auf umfangreiche Datenobjekte:
- Ticket-Objekt: Status, Priorität, Betreff, Beschreibung, benutzerdefinierte Felder, Tags
- Benutzerobjekte: Details zum Anfragesteller, aktueller Benutzer, Mitarbeiter
- Kommentarobjekte: Ticketkommentare und Anhänge
- Marken- und Organisationsdaten: Kontext zum Konto
Sie können auch auf Echtzeitänderungen hören. Wenn ein Agent den Ticketstatus oder den Bearbeiter aktualisiert, kann Ihre App sofort reagieren:
client.on('ticket.status.changed', function() {
console.log('Der Ticketstatus wurde aktualisiert');
// Aktualisieren Sie die Daten oder die Benutzeroberfläche Ihrer App
});
Schritt 4: Entwerfen Sie für responsive Layouts
Hier ist etwas, das viele Entwickler übersehen: Die Breite der Ticket-Sidebar ist nicht mehr festgelegt. Mit dem Agent Workspace können Agenten die Größe der App-Leiste von 200px bis zu einer im Wesentlichen unbegrenzten Breite ändern. Ihre App muss dies elegant handhaben.
Wenn Sie flexible: true in Ihrem Manifest festlegen, ändert sich die Größe des Iframes automatisch. Aber Ihr CSS muss auch reagieren. Erwägen Sie die Verwendung eines responsiven Frameworks wie Tailwind CSS oder schreiben Sie Medienabfragen, die Ihr Layout anpassen:
/* Standardstile für schmale Sidebar */
.app-container {
padding: 12px;
font-size: 14px;
}
/* Breitere Sidebar - zeigen Sie weitere Details */
@media (min-width: 400px) {
.app-container {
padding: 16px;
}
.detail-view {
display: block;
}
}
Denken Sie an den Fokus des Agenten. Wenn die Sidebar schmal ist, konzentrieren sie sich wahrscheinlich auf das Gespräch. Zeigen Sie nur wesentliche Informationen an. Wenn sie die Leiste erweitern, versuchen sie wahrscheinlich, eine Aufgabe in Ihrer App zu erledigen. Dann können Sie mehr Funktionalität anzeigen.
Schritt 5: Testen und stellen Sie Ihre App bereit
Nachdem Ihre App erstellt wurde, ist es an der Zeit, sie lokal zu testen, bevor Sie sie bereitstellen. ZCLI enthält einen lokalen Server, mit dem Sie Ihre App in Ihrer tatsächlichen Zendesk-Umgebung ausführen können.
Starten Sie den Entwicklungsserver:
zcli apps:server
Dadurch wird ein lokaler Webserver für Ihre App gestartet. Um es in Aktion zu sehen:
- Öffnen Sie ein Inkognito- oder privates Browserfenster (dies verhindert Caching-Probleme)
- Melden Sie sich bei Zendesk an und öffnen Sie ein beliebiges Ticket
- Fügen Sie
?zcli_apps=truean die URL an - Ihre App wird in der App-Leiste angezeigt
Nehmen Sie Änderungen an Ihrem Code vor, speichern Sie und aktualisieren Sie die Seite, um sofort Aktualisierungen zu sehen.
Wenn Sie bereit sind, bereitzustellen, verpacken Sie Ihre App:
zcli apps:package
Dadurch wird eine ZIP-Datei erstellt, die Sie direkt in Ihre Zendesk-Instanz für den privaten Gebrauch hochladen oder an den Zendesk Marketplace senden können, wenn Sie sie mit anderen Organisationen teilen möchten.
Häufige Anwendungsfälle für Ticket-Sidebar-Apps
Nachdem Sie die Mechanik verstanden haben, was sollten Sie bauen? Hier sind einige Muster, die in der Ticket-Sidebar gut funktionieren:
- Kundendaten-Lookups: Rufen Sie die Bestellhistorie von Shopify, Kontodetails von Salesforce oder den Abonnementstatus von Ihrem Abrechnungssystem ab. Agenten sehen alles, ohne die Registerkarten zu wechseln.
- Plattformübergreifende Workflows: Erstellen Sie Jira-Tickets, fügen Sie Trello-Karten hinzu oder protokollieren Sie Fehler in GitHub direkt von einem Ticket aus. Die App füllt Daten aus dem Zendesk-Ticket vorab aus, um Zeit zu sparen.
- Wissensunterstützung: Durchsuchen Sie Ihr Hilfecenter, internes Wiki oder vergangene Tickets, um relevante Lösungen zu finden. Einige Apps verwenden KI, um Antworten basierend auf dem Ticketinhalt vorzuschlagen.
- KI-gestützter Support: Tools wie eesel AI arbeiten in der Sidebar, um Antworten zu entwerfen, relevantes Wissen aus mehreren Quellen zu finden und Agenten zu helfen, Tickets schneller zu lösen.
Der Schlüssel ist der Kontext. Die besten Sidebar-Apps zeigen automatisch Informationen an, die für das jeweilige Ticket und den Kunden, den der Agent gerade anzeigt, relevant sind.
Tipps und Best Practices
Bevor Sie Ihre App fertigstellen, beachten Sie diese Richtlinien:
- Halten Sie sie schlank: Sidebar-Apps werden bei jedem Ticket geladen. Schwere JavaScript-Bibliotheken oder große Assets verlangsamen die Agentenerfahrung.
- Behandeln Sie Fehler elegant: Externe APIs schlagen fehl. Netzwerkverbindungen werden unterbrochen. Bauen Sie eine Fehlerbehandlung ein, damit Ihre App im Hintergrund fehlschlägt, anstatt den Workflow des Agenten zu unterbrechen.
- Verwenden Sie Zendesk Garden: Das Zendesk-Designsystem bietet Komponenten, die zur nativen Oberfläche passen. Dadurch fühlt sich Ihre App wie ein Teil von Zendesk an, nicht wie ein fremdes Element.
- Sichern Sie Ihre API-Schlüssel: Hartcodieren Sie niemals Anmeldeinformationen in Ihrer App. Verwenden Sie die sicheren Einstellungen von Zendesk oder OAuth für die Authentifizierung.
- Testen Sie mit echten Daten: Eine App, die perfekt mit Testtickets funktioniert, kann mit ungewöhnlichen Zeichen, langen Betreffzeilen oder fehlenden benutzerdefinierten Feldern zu kämpfen haben.
Beginnen Sie noch heute mit dem Erstellen Ihrer Zendesk-Sidebar-App
Sie haben jetzt alles, was Sie zum Erstellen einer Ticket-Sidebar-App benötigen. Von der Einrichtung Ihrer Entwicklungsumgebung mit ZCLI über die Konfiguration des Manifests, den Zugriff auf Ticketdaten über ZAF bis hin zum Entwerfen für responsive Layouts ist die Grundlage vorhanden.
Die Ticket-Sidebar ist eine leistungsstarke Möglichkeit, die Funktionen von Zendesk zu erweitern. Egal, ob Sie einen bestimmten Workflow für Ihr Team lösen oder etwas für die breitere Zendesk-Community erstellen, Apps an diesem Standort platzieren Informationen und Aktionen genau dort, wo Agenten sie benötigen.
Wenn Sie KI-Funktionen zu Ihrem Zendesk-Setup hinzufügen möchten, funktioniert eesel AI als Sidebar-App, die Wissen aus Ihrem Hilfecenter, vergangenen Tickets und interner Dokumentation direkt in den Arbeitsbereich des Agenten bringt. Es ist ein gutes Beispiel dafür, was möglich ist, wenn Sie das Zendesk Apps Framework mit modernen KI-Funktionen kombinieren.
Bereit anzufangen? Holen Sie sich Ihre Zendesk-Anmeldeinformationen, installieren Sie ZCLI und erstellen Sie etwas, das den Tag Ihres Support-Teams ein wenig einfacher macht.
Diesen Beitrag teilen
Article by
