Technologie

Wie integriere ich eine Zendesk App in den Sidebar-Bereich meines Ticket-Views?

Melden
  1. Vorbereitung: Zendesk Apps Framework und App-Definition
  2. App-Struktur und Hauptdateien
  3. Design und Aussehen in der Sidebar
  4. App Deployment und Upload
  5. Zusammenfassung

Wenn man eine Zendesk App in den Sidebar-Bereich eines Ticket-Views integrieren möchte, geht es darum, die App so zu konfigurieren und zu entwickeln, dass sie in diesem spezifischen Bereich innerhalb der Zendesk-Agentenoberfläche erscheint. Die Zendesk Apps Framework (ZAF) erlaubt es, Apps an unterschiedlichen Positionen innerhalb des Agenten-Interfaces zu platzieren, unter anderem in der Ticket-Detailansicht, sowohl im Hauptbereich als auch in der Sidebar.

Vorbereitung: Zendesk Apps Framework und App-Definition

Die Basis für eine Integration ist das Zendesk Apps Framework. Dabei definiert man in der manifest.json Datei, wo die App geladen werden soll. Für die Sidebar im Ticket-View existiert der Ort ticket_sidebar. Man muss also sicherstellen, dass man diesen Ort in der Manifest-Datei angibt.

Die manifest.json ist das zentrale Konfigurationsdokument der App. Dort ist es wichtig, unter location den Wert "ticket_sidebar" einzutragen, damit Zendesk die App in der Seitenleiste eines Tickets lädt.

Ein einfaches Beispiel eines relevanten Ausschnitts aus der manifest.json sieht folgendermaßen aus:

{ "name": "Meine Sidebar-App", "version": "1.0", "author": "Dein Name", "defaultLocale": "de", "location": { "ticket_sidebar": { "supported": true } }, "frameworkVersion": "2.0", "singleInstall": true}

App-Struktur und Hauptdateien

Eine typische Zendesk App besteht aus HTML, JavaScript und gegebenenfalls CSS. Der Haupt-Einstiegspunkt ist häufig die assets/main.js oder app.js, die mit dem SDK kommuniziert.

In der Sidebar soll deine App beispielsweise Kontextinformationen zum Ticket anzeigen oder Funktionen anbieten wie Kommentare, Interaktionen mit externen APIs oder Automatisierungen.

In der JavaScript-Datei nutzt du das ZAF SDK, zum Beispiel:

import { client } from @zendesk/app_framework_sdk;const app = client.init();app.on(app.registered, () => { // Beispiel: Ticket-ID auslesen und anzeigen app.get(ticket.id).then(ticketId => { console.log(Ticket-ID:, ticketId); });});

Design und Aussehen in der Sidebar

Die Sidebar ist vertikal begrenzt und darum sollte deine Benutzeroberfläche schmal und übersichtlich sein. Nutze CSS, um die Inhalte der Sidebar ordentlich und responsiv darzustellen. Typisch ist es, die Höhe an den verfügbaren Platz anzupassen und mit Scrollbalken zu arbeiten, falls Inhalte längere darstellungen benötigen.

Beispiel:

body { margin: 0; padding: 10px; font-size: 14px;}.sidebar-content { max-width: 300px;}

App Deployment und Upload

Nach der Entwicklung testet man die App lokal mit der Zendesk Apps Tools (ZAT) CLI, welche man über RubyGems installieren kann. Mit zat server lässt sich die App lokal hosten und im Zendesk Test-Account testen. Sobald die App funktioniert, erstellt man ein ZIP-Paket der App, um sie im Zendesk Admin-Bereich hochzuladen.

Dort navigiert man zu Admin > Apps > Manage, klickt auf Upload private app und lädt das ZIP-Archiv hoch. Nach erfolgreichem Upload und Aktivierung ist die App dann rechts in der Ticketsidebar sichtbar.

Zusammenfassung

Die Integration einer Zendesk App in die Sidebar des Ticket-Views gelingt, indem man in der manifest.json den location Wert auf ticket_sidebar setzt. Die App kommuniziert über das Zendesk Apps Framework SDK miteinander und erhält so Zugriff auf Ticket-Daten. Mit entsprechendem HTML, CSS und JavaScript gestaltet man dann die Benutzeroberfläche, die in der begrenzten Sidebar sinnvoll angezeigt wird. Nach dem Testen mit dem Zendesk Apps Tool lädt man die App in den Zendesk-Account hoch und aktiviert sie, damit die Agenten die App im Sidebar-Bereich im Ticket-View sehen und nutzen können.

Wichtig: Prüfe unbedingt die Zendesk Developer Dokumentation unter developer.zendesk.com für aktuelle Details zu App-Standorten und SDK-Methoden, da sich Framework-Versionen und Features weiterentwickeln.

0
0 Kommentare