In diesem Beitrag erfahren Sie, wie Sie personalisierte und einzigartige Funktionen in Ihr Zendesk Help Center integrieren. Er führt Sie durch den Prozess zum Hinzufügen angepasster Seiten zu Ihrem Knowledge Enterprise-Plan und erläutert, wie Sie angepasste Seiten mit Technologien wie React.js und Node.js entwickeln, bündeln und einbetten können.

Sie können beispielsweise eine angepasste Registrierungsseite für VIP Support erstellen, die nahtlos in das vorhandene Help Center passt und ein einheitliches und maßgeschneidertes Benutzererlebnis bietet.

Beispiel für eine einseitige App

In diesem einseitigen App-Beispiel wird React with TypeScript für das Frontend und Node.js für das Backend verwendet. Das Rückenwind-CSS-Design der App und Nodemailer verwalten E-Mail-Bestätigungen für neue Benutzer, die sich erfolgreich registrieren.

Da Sie mit einer React-App arbeiten, werden in diesem Beispiel die Webpack-Schritte zum Kompilieren in einer einzigen Datei beschrieben. Sie betten die Datei in Ihr Help Center ein und laden sie hoch. Führen Sie die folgenden Schritte aus:

  • Schritt 1: Entwickeln der angepassten Seite mit React with TypeScript und Node.js
    • Reagieren
    • Node.js
  • Schritt 2: Webpack zum Bündeln der angepassten Seite konfigurieren
  • Schritt 3: Einbetten und Integrieren des Projekts in Ihr Design und Veröffentlichen im Help Center

Wenn Sie nicht mit einem Backend integrieren oder TypeScript verwenden möchten, sehen Sie sich die Boilerplate an, um Ihre eigene Single-Page-App zu starten.

Haftungsausschluss: Mit dem Designeditor können Sie Seitenvorlagen, CSS oder JavaScript für ein Standarddesign ändern oder ein eigenes Design erstellen. Es wird als angepasstes Design gespeichert. Angepasste Designs oder angepasster Code werden von Zendesk nicht Support und Designs nicht automatisch mit neuen Funktionen aktualisiert. Reachen Sie mit einem Webentwickler, wenn es um Code Support geht.

Schritt 1: Entwickeln der angepassten Seite mit React with TypeScript und Node.js

Angepasste Seiten ermöglichen die Entwicklung mit jedem beliebigen Web Tech Stack. Viele Entwickler bevorzugen React.js mit Node.js für die Backend-Entwicklung. Jede Technologie hat ihre eigenen Nuancen und Spezifikationen. Beachten Sie die folgenden technischen Punkte:

Reagieren

Verwenden Sie die Create React App für angepasste Seiten, da dieses Framework Single-Page-Anwendungen unterstützt. Auf der Registrierungsseite für VIP Support oben werden zwei Anforderungen gestellt: Eine Anfrage generiert ein sicheres Token für die Backend-Authentifizierung und die andere sendet die eigentlichen Daten.

Die angepasste Beispielseite ändert Benutzerprofile und Organisationen in Zendesk. Wenn Ihre Seite ähnliche Anforderungen stellt, validieren Sie die Daten aus dem Frontend, bevor Sie die Anfrage senden. Die Backend-Validierung spielt eine entscheidende Rolle, aber die Frontend-Validierung gewährleistet saubere Daten, insbesondere aus Benutzereingaben.

Denken Sie daran, dass eine angepasste Seite nur einen Teil Ihres Help Centers ausmacht. Stellen Sie sicher, dass alle Funktionen, Brandings oder Stylings mit dem gesamten Help Center übereinstimmen.

Beachten Sie folgende Designaspekte:

  • Authentifizierung: Geben Sie an, wer auf diese Seite zugreifen kann: Agenten, alle authentifizierten Benutzer oder jeder Benutzer.

  • Navigation:

    • Vermeiden Sie es, eine Kopfzeile oder Navigation auf Ihrer angepassten Seite zu entwickeln. Das Knowledge-Team Ihres Kontos legt diese Funktionen fest. Die angepasste Seite erbt den Kopfbereich und die Navigation des aktuellen Designs.

    • Positionieren Sie diese Seite im Help Center. Die angepasste Seite befindet sich außerhalb des Standardschemas des Help Centers. Benutzer Reach diese Seiten über Links in einer beliebigen Help Center Vorlage oder auf vordefinierten Seiten wie Ihrer Homepage. URLs angepasster Seiten sehen wie folgt aus:

      https://{domain_name}/hc[/{locale}]/p/{page_name}

  • Seitenstil: Wählen Sie Stilbibliotheken aus, die zum Help Center passen. Stellen Sie sicher, dass Schriftart und Farbpalette mit dem vorhandenen Design übereinstimmen.

  • Bildbearbeitung: Da Sie Ihre angepasste Seite manuell konfigurieren und bündeln, funktioniert das lokale Speichern von Bildern oder Assets nicht. Laden Sie sie vor dem Einbetten in Ihr Help Center hoch. Detaillierte Anweisungen finden Sie im folgenden Beitrag: Verwenden eigener Design-Assets für das Help Center.

Knoten.js

Angepasste Seiten bieten eine leere Oberfläche, um Besuchern ein persönliches Erlebnis zu bieten. Mit Tools wie Node.js und Express können Sie eine direkte Verbindung zu vorhandenen Systemen und Datenbanken herstellen. Sie können auch neue Services mit Ihrem bevorzugten Tech-Stack erstellen und in Ihr Help Center integrieren, um ein nahtloses Benutzererlebnis zu gewährleisten.

Die Beispiel-App verwendet die folgenden Funktionen.

  • Die Entwickler haben eine Express-API erstellt, die die über das Frontend-Formular eingereichten Benutzer- und Organisationsinformationen empfängt.

  • Die App sendet API-Aufforderungen an Zendesk Support, um den relevanten Benutzer und die relevante Organisation per Knotenabruf zu erstellen und zu aktualisieren.

  • Sie validiert die Formulareinreichdaten mit validator.js.

  • Die App sendet eine Bestätigungs-E-Mail an den Benutzer, wenn das Formular erfolgreich über Nodemailer eingereicht wurde.

Schützen Sie Ihre API-Routen sorgfältig, wenn Sie serverseitige angepasste Seitendienste erstellen. Verwenden Sie Tools wie JWT, um Ihre Anwendung durch Erstellung der Anfrageauthentifizierung zu schützen. Weitere Informationen zu JWT finden Sie in diesem Beitrag auf der JWT-Website: JSON Web Token Einführung.

Die Beispiel-App verwendet die unten beschriebene Authentifizierung.

  • Die Entwickler haben einen Authentifizierungsendpunkt erstellt, über den das Frontend ein JWT-Token anfordert und Anfragen an die Formulareinreichungs-API autorisiert.

  • Die Authentifizierungsmodule generieren und verifizieren JWT-Token mit jsonwebtoken.

Je nach der von Ihnen entwickelten Anwendung sollten Sie Ihre CORS-Richtlinie (Cross-Origin Resource Sharing) berücksichtigen. Stellen Sie sicher, dass für die Routen, die Anfragen von Clientseite erhalten, CORS aktiviert ist. Wenn Sie wissen, welche Domänen die Anfragen senden, geben Sie diese Domänen ausdrücklich an. Andernfalls konfigurieren Sie den Wildcard-*. Weitere Informationen zu CORS finden Sie in diesem Beitrag auf der Mozilla-Website: Ursprungsübergreifende Ressourcennutzung (CORS).

Schritt 3: Webpack zum Bündeln der angepassten Seite konfigurieren

Nachdem Sie die Entwicklung Ihrer angepassten Seite abgeschlossen haben, bündeln Sie Ihre React-App mit Webpack. Da Ihr Design alle angepassten Seiten einbetten muss, kompilieren Sie die angepasste Seite zu einer einzigen HTML-Datei. Die App „Create React“ enthält eine eigene Bündelung und Optimierung. Da Sie jedoch eine einzelne index.html zurückgeben möchten, verwendet das Beispiel eine eigene Webpack-Konfiguration, um diesen Vorgang zu vereinfachen.

Schritt 4: Einbetten und Integrieren des Projekts in Ihr Design und Veröffentlichen im Help Center

Betten Sie Ihre Anwendung nach der Erstellung in Ihr Help Center ein. Navigieren Sie zum neu erstellten Build-Verzeichnis. Hier finden Sie einige Dateien, die zum Erstellen der neuen angepassten Seite erforderlich sind.

  • index.html
  • static/css/bundle.min.css
  • static/bundle.min.js

Die index.html enthält den Code, den Sie auf der angepassten Seite eingegeben haben. Greifen Sie auf JavaScript und CSS zu, die für das Projekt erstellt wurden. Laden Sie zuerst die JavaScript- und CSS-Dateien als Assets in Ihr Help Center hoch. Kopieren Sie dann den Code aus der index.html in die angepasste Seite und passen Sie die Dateipfade so an, dass sie auf die Assets verweisen.

Unten sehen Sie ein Beispiel, wie dies im Codeeditor angezeigt wird.

Image_of_CSS_in_the_help_center_code_editor.png

Veröffentlichen Sie anschließend Ihre angepasste Seite. Weitere Ressourcen zum Verwalten von Inhalten im Help Center finden Sie im folgenden Beitrag: Wissensressourcen.

Hinweis zur Übersetzung: Dieser Beitrag wurde mit automatischer Übersetzungssoftware übersetzt, um dem Leser ein grundlegendes Verständnis des Inhalts zu vermitteln. Trotz angemessener Bemühungen, eine akkurate Übersetzung bereitzustellen, kann Zendesk keine Garantie für die Genauigkeit übernehmen.

Sollten in Bezug auf die Genauigkeit der Informationen im übersetzten Beitrag Fragen auftreten, beziehen Sie sich bitte auf die englische Version des Beitrags, die als offizielle Version gilt.

Powered by Zendesk