So importieren Sie ein Zendesk Guide-Theme von GitHub

Die Verwaltung eines Help Center-Themes direkt in der Admin-Oberfläche von Zendesk funktioniert gut für kleine Anpassungen. Sobald Sie jedoch größere Änderungen vornehmen oder mit einem Team zusammenarbeiten, stoßen Sie schnell an Grenzen. Es gibt keine Versionskontrolle, keine Möglichkeit zu verfolgen, wer was geändert hat, und keine einfache Methode, Änderungen zu testen, bevor sie live gehen.

Hier kommt die GitHub-Integration ins Spiel. Indem Sie Ihr Zendesk Guide-Theme mit einem GitHub-Repository verbinden, erhalten Sie alle Vorteile der Versionskontrolle: Branching für Experimente, Pull Requests für Code-Reviews und eine vollständige Historie jeder Änderung. Ihr Team kann gemeinsam an der Theme-Entwicklung arbeiten, ohne sich gegenseitig in die Quere zu kommen, und Sie können Updates mit Zuversicht bereitstellen.

Diese Anleitung führt Sie durch den gesamten Prozess des Importierens eines Zendesk Guide-Themes von GitHub. Egal, ob Sie mit dem offiziellen Copenhagen-Theme beginnen oder ein vorhandenes benutzerdefiniertes Theme importieren, Sie lernen, wie Sie die Integration einrichten, lokal mit ZCLI arbeiten und einen Workflow erstellen, der mit Ihrem Team skaliert.

Während Sie das Erscheinungsbild Ihres Help Centers verbessern, sollten Sie auch überlegen, wie Sie mit Kundeninteraktionen umgehen. Tools wie eesel AI lassen sich direkt in Zendesk integrieren, um Antworten zu automatisieren und Tickets zu triagieren, wodurch Ihr neues Theme durch intelligente Automatisierung ergänzt wird.

Schritt 1: Bereiten Sie Ihr Theme in GitHub vor

Die GitHub-Integration hat spezifische Anforderungen an die Struktur Ihres Repositorys. Wenn Sie dies von Anfang an richtig machen, sparen Sie später Kopfschmerzen.

Anforderungen an die Repository-Struktur

Ihr Theme-Repository muss zwei Hauptanforderungen erfüllen:

1. Die Datei manifest.json muss sich im Stammverzeichnis des Repositorys befinden. Diese Datei enthält Theme-Metadaten und Einstellungsdefinitionen. Zendesk sucht sie auf oberster Ebene, nicht in Unterverzeichnissen.

2. Ein Theme pro Repository. Sie können nicht mehrere Themes in einem einzigen Repo speichern. Wenn Sie Variationen eines Themes benötigen, verwenden Sie stattdessen Branches.

Die Standard-Theme-Struktur sieht wie folgt aus:

my-zendesk-theme/
├── manifest.json
├── style.css
├── script.js
├── thumbnail.png
├── templates/
│   ├── header.hbs
│   ├── footer.hbs
│   ├── home_page.hbs
│   ├── article_page.hbs
│   └── ...
├── assets/
│   ├── logo.png
│   └── ...
├── settings/
│   └── ...
└── translations/
    └── ...

Das Copenhagen-Theme forken oder von Grund auf neu erstellen

Für die meisten Teams ist das Forken des offiziellen Copenhagen-Themes der beste Ausgangspunkt. Es ist das Standard-Theme von Zendesk, wird aktiv gepflegt und ist responsiv und barrierefrei gestaltet. Wenn Sie hier beginnen, erhalten Sie Updates, wenn Zendesk das Basis-Theme verbessert.

Um es zu forken, besuchen Sie das Copenhagen-Theme-Repository und klicken Sie auf die Schaltfläche Fork. Dadurch wird Ihre eigene Kopie erstellt, die Sie frei anpassen können.

Wenn Sie bereits ein Theme in Zendesk haben, laden Sie es stattdessen über die Knowledge-Admin-Oberfläche herunter und pushen Sie es in ein neues GitHub-Repository.

Branch-Strategie für Theme-Variationen

Da Sie nur ein Theme pro Repository haben können, verwenden Sie Branches, um Variationen zu verwalten:

• main oder master Ihr Produktions-Theme
• develop Staging-Umgebung für Teständerungen
• feature/new-header Spezifische Feature-Arbeit
• brand/variant-a White-Label-Variationen für verschiedene Marken

Beim Importieren in Zendesk können Sie angeben, welcher Branch verwendet werden soll, sodass Sie mehrere Theme-Variationen aus demselben Repository einfach verwalten können.

Schritt 2: Richten Sie Ihre lokale Entwicklungsumgebung ein

Durch die lokale Arbeit können Sie Änderungen sofort in der Vorschau anzeigen, ohne sie jedes Mal in Zendesk hochladen zu müssen. ZCLI macht dies unkompliziert.

Installieren Sie ZCLI

ZCLI ist das moderne Befehlszeilentool von Zendesk für die Theme-Entwicklung. Installieren Sie es global über npm:

npm install -g @zendesk/zcli

Überprüfen Sie die Installation:

zcli --version

Authentifizieren Sie sich mit Ihrem Zendesk-Konto

Bevor Sie Themes in der Vorschau anzeigen können, benötigt ZCLI Zugriff auf Ihr Zendesk-Konto. Führen Sie den Anmeldebefehl aus:

zcli login -i

Sie werden aufgefordert, Folgendes einzugeben:

• Subdomain Ihre Zendesk-Subdomain (der Teil vor .zendesk.com)
• Email Ihre Zendesk-Admin-E-Mail-Adresse
• Password Ein API-Token (empfohlen) oder Ihr Konto-Passwort

Um ein API-Token zu erstellen, gehen Sie zu Admin Center > Apps und Integrationen > APIs > Zendesk API und fügen Sie dann ein Token unter der Registerkarte Einstellungen hinzu.

Klonen Sie Ihr Theme-Repository

Wenn Sie dies noch nicht getan haben, klonen Sie Ihr Theme-Repository lokal:

git clone https://github.com/your-org/your-theme.git
cd your-theme

Starten Sie die lokale Vorschau

Nachdem ZCLI authentifiziert und Ihr Theme-Code lokal ist, starten Sie den Vorschau-Server:

zcli themes:preview

Dieser Befehl:

• Lädt Ihr Theme an einen temporären Speicherort hoch
• Startet einen lokalen Entwicklungsserver
• Öffnet Ihren Standardbrowser, um das Theme in der Vorschau anzuzeigen
• Überwacht Dateiänderungen und lädt automatisch neu

Die Vorschau verwendet Ihre tatsächlichen Zendesk-Kontodaten, sodass Sie echte Artikel, Kategorien und Tickets sehen, die mit Ihrem Theme gerendert werden. Nehmen Sie eine Änderung an einer Vorlagendatei vor, speichern Sie sie, und der Browser wird automatisch aktualisiert.

Schritt 3: Verbinden Sie Zendesk mit Ihrem GitHub-Repository

Nachdem Ihr Theme in GitHub bereit ist und die lokale Entwicklung funktioniert, ist es an der Zeit, die Verbindung zwischen Zendesk und Ihrem Repository herzustellen.

Navigieren Sie zur GitHub-Integration

In Ihrem Zendesk-Konto:

1. Gehen Sie zu Knowledge Admin (der Verwaltungsoberfläche des Help Centers)
2. Klicken Sie in der Seitenleiste auf Design anpassen
3. Klicken Sie oben rechts auf Theme hinzufügen
4. Wählen Sie Von GitHub hinzufügen

Autorisieren und importieren

Es wird ein Dialogfeld angezeigt, in dem Sie nach Ihrer Repository-URL gefragt werden. Geben Sie die vollständige GitHub-URL ein:

https://github.com/your-org/your-theme

Geben Sie optional einen Branch-Namen an, wenn Sie aus einem anderen als dem Standard-Branch importieren möchten.

Klicken Sie auf Importieren. Wenn Sie Zendesk noch nicht autorisiert haben, auf GitHub zuzugreifen, werden Sie zu GitHub weitergeleitet, um Berechtigungen zu erteilen. Autorisieren Sie die Zendesk-App und kehren Sie dann zu Zendesk zurück.

Der Importprozess ruft Ihre Theme-Dateien von GitHub ab und erstellt ein neues Theme in Ihrem Zendesk-Konto. Nach Abschluss wird die Theme-Miniaturansicht auf Ihrer Themes-Seite angezeigt.

Die Verbindung verstehen

Dieser erste Import stellt eine einmalige Verbindung zwischen Ihrem Zendesk-Theme und dem GitHub-Repository her. Danach fließen Änderungen in eine Richtung: von GitHub zu Zendesk. Sie können ein von GitHub verwaltetes Theme nicht direkt in der Zendesk-Oberfläche bearbeiten, ohne die Verbindung zu unterbrechen.

Schritt 4: Passen Sie Ihr Theme an und stellen Sie es bereit

Nachdem die Integration aktiv ist, verfügen Sie über einen Workflow, der die Leistungsfähigkeit der Versionskontrolle mit der einfachen Bereitstellung in Zendesk kombiniert.

Änderungen lokal vornehmen

Arbeiten Sie immer lokal an Ihrem Theme, nicht in der Zendesk-Admin-Oberfläche. Hier ist der empfohlene Workflow:

1. Erstellen Sie einen Branch für Ihre Änderungen: git checkout -b feature/update-header
2. Nehmen Sie Änderungen an Vorlagen, CSS oder JavaScript vor
3. Zeigen Sie Änderungen mit zcli themes:preview in der Vorschau an
4. Übertragen Sie Ihre Arbeit: git commit -am "Update header styling"
5. Pushen Sie zu GitHub: git push origin feature/update-header
6. Öffnen Sie einen Pull Request für die Teamüberprüfung
7. Führen Sie ihn nach Genehmigung in Main zusammen

Wichtig: Bearbeiten Sie niemals ein von GitHub verwaltetes Theme direkt in der Zendesk-Oberfläche. Wenn Sie dies tun, warnt Sie Zendesk, dass dies die GitHub-Verbindung unterbricht. Wenn Sie versehentlich Änderungen in Zendesk vornehmen, müssen Sie das Theme herunterladen und diese Änderungen zurück zu GitHub übertragen, um die Synchronisierung wiederherzustellen.

Aktualisieren des Themes in Zendesk

Wenn Ihre Änderungen in den Main-Branch zusammengeführt wurden und Sie bereit sind, sie bereitzustellen:

1. Gehen Sie in Knowledge Admin zu Design anpassen
2. Suchen Sie Ihr von GitHub verwaltetes Theme
3. Klicken Sie auf das Menü (drei Punkte) und wählen Sie Von GitHub aktualisieren
4. Überprüfen Sie die Änderungen in der Vorschau
5. Klicken Sie auf Veröffentlichen, wenn Sie bereit sind

Zendesk ruft die neueste Version aus Ihrem Repository ab und wendet sie auf Ihr Help Center an. Das Update erfolgt sofort. Erwägen Sie daher, eine Staging-Umgebung oder einen Test-Branch zu verwenden, wenn Sie Änderungen validieren müssen, bevor sie live gehen.

Tipps für die Teamzusammenarbeit

Sobald mehrere Personen an Ihrem Theme arbeiten, helfen einige Praktiken, die Dinge organisiert zu halten.

Branching-Strategie

Legen Sie klare Konventionen für die Verwendung von Branches durch Ihr Team fest:

• main Nur produktionsreifer Code. Übertragen Sie niemals direkt in Main.
• develop Integrations-Branch für das Staging. Führen Sie Feature-Branches hier zum Testen zusammen.
• feature/* Einzelne Funktionen oder Fehlerbehebungen. Erstellen Sie für jede Aufgabe einen neuen Branch.
• hotfix/* Dringende Korrekturen, die den normalen Workflow umgehen müssen.

In Zendesk können Sie mehrere Themes aus demselben Repository mit verschiedenen Branches importieren. Erwägen Sie, ein "Staging"-Theme zu pflegen, das Ihren Develop-Branch verfolgt, sodass Sie Änderungen in der Vorschau anzeigen können, bevor sie die Produktion erreichen.

Code-Review-Workflows

Fordern Sie Pull Requests für alle Änderungen an Main an. Dies stellt Folgendes sicher:

• Mindestens eine andere Person überprüft den Code
• Automatisierte Prüfungen können ausgeführt werden (Linting, Barrierefreiheitstests)
• Es gibt einen dokumentierten Nachweis, warum Änderungen vorgenommen wurden

Viele Teams verwenden GitHub Actions, um automatisch Tests für Pull Requests auszuführen und Probleme zu erkennen, bevor sie Zendesk erreichen.

Verwalten mehrerer Themes

Wenn Sie Help Center für mehrere Marken oder Regionen verwalten, haben Sie Optionen:

• Separate Repositorys Vollständige Isolation zwischen Themes
• Gleiches Repository, verschiedene Branches Gemeinsamer Code mit markenspezifischen Überschreibungen
• Konfigurationsbasiertes Theming Verwenden Sie manifest.json-Einstellungen, um Markenelemente umzuschalten

Der Branch-Ansatz funktioniert gut, wenn Themes ähnlich sind, aber markenspezifische Farben, Logos oder Inhalte benötigen.

Beheben häufiger Probleme

Authentifizierungsfehler: Wenn Zendesk nicht auf Ihr Repository zugreifen kann, überprüfen Sie, ob das Repository für das von Ihnen autorisierte Konto zugänglich ist. Private Repositorys erfordern die richtigen Berechtigungen.

Importfehler: Stellen Sie sicher, dass sich manifest.json im Stammverzeichnis Ihres Repositorys befindet und gültiges JSON enthält. Syntaxfehler in dieser Datei verhindern den Import.

Synchronisierungsprobleme: Wenn Zendesk Ihre neuesten Änderungen nicht widerspiegelt, überprüfen Sie, ob Sie in den richtigen Branch gepusht haben und ob Sie in Zendesk aus dem richtigen Branch aktualisieren.

Verbessern Sie Ihr Help Center über Themes hinaus

Ein gut gestaltetes Theme lässt Ihr Help Center professionell aussehen, aber die tatsächlichen Auswirkungen auf das Kundenerlebnis ergeben sich aus der Art und Weise, wie Sie mit Interaktionen umgehen. Während Besucher eine übersichtliche Oberfläche schätzen, wünschen sie sich vor allem schnelle und genaue Antworten auf ihre Fragen.

Hier werden KI-gestützte Support-Tools wertvoll. eesel AI lässt sich direkt in Zendesk integrieren, um Antworten zu automatisieren, eingehende Tickets zu triagieren und sofortige Antworten aus Ihrer Wissensdatenbank bereitzustellen. Anstatt nur gut auszusehen, wird Ihr Help Center wirklich hilfreicher.

Die Kombination funktioniert besonders gut: Ihr benutzerdefiniertes, von GitHub verwaltetes Theme schafft das visuelle Erlebnis, während KI die Konversationsebene übernimmt. Kunden erhalten ein markengerechtes, zusammenhängendes Erlebnis, egal ob sie Artikel durchsuchen oder mit Ihrem KI-Agenten chatten.

Wenn Sie Mühe in die Anpassung des Erscheinungsbilds Ihres Help Centers investieren, sollten Sie auch die Art und Weise verbessern, wie Sie die darin stattfindenden Gespräche führen. Unser Leitfaden zur Automatisierung des Kundensupports erklärt, wie KI die Reaktionszeiten verkürzen und Ihr Team entlasten kann, damit es sich auf komplexe Probleme konzentrieren kann, die wirklich menschliche Aufmerksamkeit erfordern.