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

Sie können beispielsweise eine angepasste Registrierungsseite für VIP Support erstellen, um ein einheitliches und maßgeschneidertes Benutzererlebnis zu bieten.

Beispiel für eine einseitige App

In diesem einseitigen App-Beispiel wird React with TypeScript als Frontend und Node.js als Backend verwendet. Cascading Style Sheets (CSS) gestaltet die App und Nodemailer verwaltet 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:

Wenn Sie keine Integration in ein Backend oder TypeScript verwenden möchten, lesen Sie den Boilerplate, 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 und angepasster Code werden nicht unterstützt und Designs werden nicht automatisch mit neuen Funktionen aktualisiert. Reachen Sie mit einem Webentwickler, um Code Support zu erhalten.

Schritt 1: Angepasste Seite mit React, TypeScript und Node.js entwickeln

Mit angepassten Seiten können Sie mit jedem beliebigen Webtechnologie-Stack arbeiten. 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 Create React App für angepasste Seiten, da dieses Framework Single-Page-Anwendungen unterstützt. Auf der Registrierungsseite für VIP Support werden zwei Anfragen gestellt: Eine Anfrage generiert ein sicheres Token für die Backend-Authentifizierung und die andere sendet tatsächliche Daten.

Die angepasste Beispielseite ändert Benutzerprofile und Organisationen im System. Wenn Ihre Seite ähnliche Anfragen 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 bildet. Stellen Sie sicher, dass alle Funktionen, Brandings oder Stylings mit Ihrem Help Center insgesamt übereinstimmen.

Beachten Sie folgende Designaspekte:

  • Geben Sie an, wer auf diese Seite zugreifen kann, z. B. Agenten, alle authentifizierten Benutzer oder jeder Benutzer
  • Erstellen Sie keine Kopfzeile oder Navigation auf Ihrer angepassten Seite. Die angepasste Seite erbt den Kopfbereich und die Navigation des aktuellen Designs. Positionieren Sie diese Seite angemessen im Help Center, da die angepasste Seite außerhalb des Standardschemas des Help Centers vorhanden ist. Benutzer Reach diese Seiten über Links in einer beliebigen Help Center Vorlage oder vordefinierten Seiten, wie z. B. Ihrer Homepage. URLs angepasster Seiten verwenden das Format https://{domain_name}/hc[/{locale}]/p/{page_name}.
  • Wählen Sie Stilbibliotheken aus, die zum Help Center passen. Stellen Sie sicher, dass Schriftart und Farbpalette mit Ihrem vorhandenen Design übereinstimmen.
  • Da Sie Ihre angepasste Seite manuell konfigurieren und bündeln, funktioniert die lokale Speicherung von Bildern oder Assets nicht. Laden Sie sie vor dem Einbetten in Ihr Help Center hoch. Detaillierte Anweisungen finden Sie unter Verwenden eigener Design-Assets für Help Center.

Knoten.js

Angepasste Seiten geben Ihnen eine leere Leinwand, um Ihren Besuchern ein persönliches Erlebnis zu bieten. Mit Tools wie Node.js und Express können Sie direkt mit vorhandenen Systemen und Datenbanken verbinden. 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 Application Programming Interface (API) erstellt, die die über das Frontend-Formular eingereichten Benutzer- und Organisationsinformationen empfängt.
  • Die App sendet API-Aufforderungen an Support, um den relevanten Benutzer und die relevante Organisation mit Knotenfreiheit zu erstellen und zu aktualisieren
  • Die Formulardaten werden mit validator.js validiert
  • Die App sendet eine Bestätigungs-E-Mail an den Benutzer, wenn das Formular mit Nodemailer erfolgreich eingereicht wurde

Schützen Sie Ihre API-Routen sorgfältig, wenn Sie serverseitige angepasste Seitendienste erstellen. Verwenden Sie Tools wie JSON Web Token (JWT), um Ihre Anwendung zu schützen und die Anfrageauthentifizierung einzurichten. Weitere Informationen zu JWT finden Sie unter JSON Web Token Introduction (Englisch).

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 erstellten Anwendung sollten Sie Ihre Cross-Origin-Ressource Sharing (CORS)-Richtlinie berücksichtigen. Stellen Sie sicher, dass die Routen, die Anfragen von Clientseite erhalten, CORS aktiviert haben. 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 unter Cross-Origin Resource Sharing (CORS).

Schritt 2: 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 in einer einzigen HTML-Datei (Hypertext Markup Language). Die Create React App enthält eigene Build- und Optimierungstools. Da Sie jedoch eine einzelne index.html zurückgeben möchten, verwendet das Beispiel eine eigene Webpack-Konfiguration, um diesen Prozess zu vereinfachen.

Schritt 3: Integrieren Sie das Projekt in Ihr Design und veröffentlichen Sie es 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-Datei enthält den Code, den Sie in die angepasste 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 Ihrer index.html in die angepasste Seite und passen Sie die Dateipfade so an, dass sie auf die Assets verweisen.

Unten sehen Sie ein Beispiel für die Darstellung im Codeeditor.

Image_of_CSS_in_the_help_center_code_editor.png

Veröffentlichen Sie anschließend Ihre angepasste Seite. Weitere Ressourcen zur Verwaltung von Inhalten in Ihrem Help Center finden Sie unter 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