Dieser Beitrag hilft Ihnen, personalisierte und einzigartige Funktionen in Ihr Zendesk Help Center zu integrieren. Er beschreibt, wie Sie angepasste Seiten zu Ihrem Guide Enterprise-Plan hinzufügen und angepasste Seiten mit Technologien wie React.js und Node.js entwickeln, bündeln und einbetten. Sie können beispielsweise eine angepasste VIP-Support-Registrierungsseite erstellen, die sich nahtlos in das Design Ihres Help Centers einfügt und ein einheitliches Benutzererlebnis bietet.
In dieser Beispiel-App wird React mit TypeScript für das Frontend und Node.js für das Backend verwendet. Das CSS des CSS -Stylesheets für HTML wird angepasst und Nodemailer übernimmt die E-Mail-Bestätigung für neue Benutzer, die sich erfolgreich registriert haben.
Da es sich um eine React-App handelt, werden in diesem Beispiel die Webpack-Schritte zum Kompilieren in einer einzigen Datei beschrieben. Betten Sie die Datei in Ihr Help-Center-Design ein und laden Sie sie hoch. Befolgen Sie die Abschnitte unten für jede Gruppe von Schritten:
- Entwickler: Erstellen Sie die angepasste Seite mit React mit TypeScript und Node.js.
- Bundle: Konfigurieren Sie Webpack, um die angepasste Seite zu bündeln
- Einbetten: Integrieren Sie das Projekt in Ihr Design und veröffentlichen Sie es im Help Center
Entwickler: Erstellen Sie die angepasste Seite mit React mit TypeScript und Node.js.
Angepasste Seiten ermöglichen die Entwicklung mit jedem beliebigen Web-Technologie-Stack. Viele bevorzugen die Verwendung von React.js mit Node.js für die Backend-Entwicklung. Jede Technologie hat individuelle Nuancen und Anforderungen. Hier einige technische Überlegungen:
Reagieren
Verwenden Sie Create React App für angepasste Seiten, da es sich um ein aus einer einzigen Seite bestehendes Anwendungsframework handelt. Auf der Registrierungsseite für VIP-Support (siehe oben) werden zwei Anfragen eingereicht. Einer davon generiert ein sicheres Token für die Backend-Authentifizierung. Der andere sendet tatsächliche Daten.
Die angepasste Beispielseite ändert Benutzerprofile und Organisationen in Zendesk. Wenn Ihre Seite ähnliche Anfragen stellt, validieren Sie die Daten vom Front-End vor der Anfrage. Die Backend-Validierung ist wichtig, aber die Frontend-Validierung sorgt für saubere Daten, besonders von Benutzereingaben her.
Denken Sie daran, dass eine angepasste Seite nur ein Teil des Help Centers ist. Funktionalität, Branding und Stil Ihres Help Centers sind an das Gesamtbild Ihres Help Centers angepasst.
Berücksichtigen Sie die folgenden Designaspekte:
-
Authentifizierung: Legen Sie fest, wer auf diese Seite zugreifen kann: Agenten, alle authentifizierten Benutzer oder alle Benutzer
-
Navigation:
-
Sorgen Sie dafür, dass Ihre angepasste Seite keine Kopfzeile oder Navigation enthält. Die Einstellungen werden vom Guide-Team Ihres Kontos festgelegt. Die Kopfzeile und Navigation des aktuellen Designs werden für die angepasste Seite übernommen.
-
Positionieren Sie die Seite entsprechend im Help Center. Ebenso wie die Funktionen existieren auch angepasste Seiten außerhalb des Standardschemas des Help Centers. Benutzer greifen auf diese Seiten über Links in jeder Help-Center-Vorlage oder auf einer vordefinierten Seite (wie der Homepage) zu. Die URLs angepasster Seiten folgen diesem Format:
https://{domain_name}/hc[/{locale}]/p/{page_name}
-
-
Seitenstil: Wählen Sie Stilbibliotheken aus, die zum Help-Center-Design passen. Stellen Sie sicher, dass Schriftart und Farbpalette mit dem vorhandenen Design übereinstimmen.
-
Handhabung von Bildern: 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-Design hoch. Eine detaillierte Anleitung finden Sie im folgenden Beitrag: Verwenden eigener Design-Assets für das Help Center.
Node.js
Angepasste Seiten enthalten eine leere Ansicht, auf der Sie ein personalisiertes Erlebnis für Ihre Besucher schaffen können. Mit Tools wie Node.js und Express können Sie direkt Verbindungen zu vorhandenen Systemen und Datenbanken herstellen. Sie können mit Ihrem bevorzugten Technologie-Stack auch neue Services erstellen und diese in Ihr Help Center integrieren, um ein nahtloses Benutzererlebnis zu gewährleisten.
Die Beispiel-App verwendet die folgenden Funktionen.
-
Eine entwickelte Express-API , die die über das Frontend-Formular übermittelten Benutzer- und Organisationsinformationen empfängt.
-
Senden Sie API-Anforderungen an Zendesk Support, um den relevanten Benutzer und die relevante Organisation mit node-fetchzu erstellen und zu aktualisieren.
-
Überprüfen Sie die Formulardaten mit validator.js.
-
Eine Bestätigungs-E-Mail nach erfolgreicher Formularübermittlung mit Nodemaileran den Benutzer senden.
Achten Sie auf die Sicherheit und schützen Sie Ihre API-Routen, wenn Sie serverseitige angepasste Seitendienste erstellen. Verwenden Sie Tools wie JWT, um Ihre Anwendung durch Einrichtung einer Anforderungsauthentifizierung zu schützen. Weitere Informationen zu JWT finden Sie in diesem Beitrag auf der JWT-Website: Einführung in JSON Web Token.
Die App verwendet die unten beschriebene Authentifizierung.
-
Ein Authentifizierungsendpunkt , über den das Front-End ein JWT-Token anfordern kann, um Anfragen an die Formular-API zu autorisieren.
-
Authentifizierungsmodule , die JWT-Token mit jsonwebtokengenerieren und verifizieren.
Wählen Sie je nach der von Ihnen erstellten Anwendung Ihre CORS-Richtlinie (Cross-Origin Resource Sharing) aus. Stellen Sie sicher, dass CORS auf den Weiterleitungen aktiviert ist, die Anfragen von der Clientseite erhalten. Wenn Sie die Domänen kennen, von denen die Anfragen stammen, geben Sie diese Domänen explizit an. Andernfalls verwenden Sie die Wildcard *. Weitere Informationen zu CORS finden Sie in diesem Beitrag auf der Mozilla-Website: Ursprungsübergreifende Ressourcennutzung (CORS).
Bundle: Konfigurieren Sie Webpack, um die angepasste Seite zu bündeln
Nachdem Sie die Entwicklung Ihrer angepassten Seite abgeschlossen haben, bündeln Sie Ihre React-App mit dem Webpack. Da alle angepassten Seiten in Ihr Design eingebettet werden müssen, sollten Sie sie in einer einzigen HTML-Datei kompilieren. Die App „Reaktion erstellen“ bietet eine eigene Paketierung und Optimierung. Da das Ziel jedoch darin besteht, eine einzelne zurückzugeben index.html hat das Beispiel eine eigene Webpack-Konfiguration , um diesen Prozess zu optimieren.
Einbetten: Integrieren Sie das Projekt in Ihr Design und veröffentlichen Sie es im Help Center
Nachdem Sie Ihre Anwendung erstellt haben, betten Sie sie 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.htmlstatic/css/bundle.min.cssstatic/bundle.min.js
Die index.html file ist der Code, der in die angepasste Seite eingefügt werden muss. Greifen Sie auf den für das Projekt erstellten JavaScript- und CSS-Code zu. Laden Sie zunächst die JavaScript- und CSS-Datei als Assets in Ihr Help Center hoch. Kopieren Sie dann den Code aus Ihrem index.html in die angepasste Seite kopieren und die Dateipfade zu den Assets anpassen.
Nachfolgend finden Sie ein Beispiel, wie dies im Code-Editor aussieht.
Wenn Sie fertig sind, veröffentlichen Sie Ihre angepasste Seite. Weitere Ressourcen zum Verwalten von Inhalten im Help Center finden Sie im folgenden Beitrag: Ressourcen zu Guide.
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.