Angepasste Seiten sind eine zusätzliche Funktion für Guide Enterprise-Pläne. Mit dieser Funktion können Sie Ihrem Help Center einzigartige Funktionen und personalisierte Webseiten hinzufügen. Sie ist eine Erweiterung angepasster Designs.
In dieser Funktionsdemonstration finden Sie eine entwickelte Single-Page-App, mit der Endbenutzer sich als VIP-Mitglied registrieren können, um maßgeschneiderten Support für ihre Organisation zu erhalten.
Dieses einseitige Anwendungsbeispiel wurde mit React with Typescript für das Frontend und Node.js für das Backend entwickelt. Tailwind CSS wurde auch für Stylingzwecke verwendet, zusammen mit Nodemailer , um den Prozess zum Senden einer E-Mail-Bestätigung an Benutzer zu konfigurieren, die sich erfolgreich registriert haben.
Da es sich um eine React-Anwendung handelt, werden im Beispiel die Webpack-Schritte beschrieben, die zum Kompilieren in eine einzige Datei erforderlich sind. Betten Sie die Datei dann in Ihr Help-Center-Design ein und laden Sie sie hoch. Die einzelnen Schritte finden Sie in den folgenden Abschnitten:
- Develop – So entwickeln Sie eine angepasste Seite mit React with Typescript und Node.js
- Bundle – So konfigurieren Sie Webpack, um die angepasste Seite zu bündeln
- Einbetten – So betten Sie das Projekt in Ihr Design ein und veröffentlichen es im Help Center
Entwickler
Mit angepassten Seiten können Sie die Seite mit einem beliebigen Web-Tech-Stack entwickeln. Eine beliebte Tech-Stack-Präferenz ist die Verwendung von React.js mit Node.js für die Back-End-Entwicklung. Wie jede beliebige Technologie hat auch jeder Code seine eigenen Nuancen und Spezifikationen, die implementiert werden müssen. Unten finden Sie einen Überblick über diese technischen Überlegungen.
Reagieren
Da angepasste Seiten mit Ihren eigenen Funktionen erstellt werden, ist die App „Create React “ eine hervorragende Wahl für Entwickler, die ein Single-Page-Anwendungsframework verwenden.
In der obigen Demonstration der VIP-Support-Registrierungsseite werden zwei Anfragen gestellt. Eine Anfrage generiert ein sicheres Token zur Authentifizierung bei unserem Back-End. Die andere Anforderung besteht darin, die eigentliche Übermittlungsdatenanforderung zu stellen.
Auf der angepassten Beispielseite werden Änderungen an Benutzerprofilen und Organisationen in Zendesk vorgenommen. Wenn Ihre angepasste Seite auch solche Anfragen stellt, implementieren Sie eine Möglichkeit, diese Daten vor der Anfrage vom Front-End aus zu validieren. Obwohl eine Datenvalidierung für die Bearbeitung der Anfrage im Back-End erforderlich sein sollte, können Sie durch Ausführen der Validierung vom Front-End aus sicherstellen, dass nur saubere und nutzbare Daten Ihre Zendesk-Instanz erreichen, insbesondere wenn diese Daten aus Benutzereingaben wie einem Formular stammen. .
Beachten Sie, dass eine angepasste Seite nur ein Teil Ihres Help Centers ist. Alle Funktionen, das Branding und das Design Ihrer angepassten Seite sollten mit Ihrem Help Center als Ganzes harmonieren.
Zu den Designaspekten, die Sie berücksichtigen sollten, gehören die folgenden Punkte.
- Authentifizierung: Welche Benutzer können auf diese Seite zugreifen? Agenten, alle authentifizierten Benutzer oder alle Benutzer?
- Navigation:
- Auf Ihrer angepassten Seite müssen Sie weder eine Kopfzeile noch eine Navigation entwickeln. Die Navigation und die Kopfzeile werden vom Guide-Team Ihres Kontos festgelegt. Da die angepasste Seite in Ihr Design eingebettet ist, werden die Kopfzeile und Navigation des aktuellen Designs auch auf diese Seite angewendet.
- Überlegen Sie, wo sich diese Seite im Help Center befindet. Ähnlich wie die Funktionalität des Help Centers abstrahiert wird, existiert auch die angepasste Seite selbst außerhalb des Help-Center-Standardschemas. Benutzer können über einen Link, der in eine Help-Center-Vorlage eingebettet ist, oder über eine vordefinierte Seite in Ihrem Help Center, z. B. Ihre Homepage, auf diese Seiten zugreifen. Die URL für Ihre angepassten Seiten hat folgendes Format:
https://{domain_name}/hc[/{locale}]/p/{page_name}
- Seitenstil:Überlegen Sie, welche Stilbibliotheken Sie verwenden und ob der Stil mit dem restlichen Help-Center-Design übereinstimmt. Stellen Sie sicher, dass die Schriftart- und Farbpalettenauswahl zum jeweiligen Design passt.
- Handhabung von Bildern:Da Sie Ihre angepasste Seite manuell konfigurieren und bündeln müssen, ist das lokale Speichern von Bildern oder Assets nicht möglich. Laden Sie sie vor dem Einbetten in Ihr Help-Center-Design hoch. Eine schrittweise Anleitung zum Hochladen von Assets in Ihr Design finden Sie im folgenden Beitrag: Verwenden eigener Design-Assets für das Help Center .
Node.js
Angepasste Seiten bieten eine leere Leinwand, um Besuchern ein persönlicheres Erlebnis zu bieten. Durch die Interaktion mit einem Back-End-Server, der mit Tools wie Node.js und Express ausgestattet ist, können Sie sich direkt mit bereits vorhandenen Systemen und Datenbanken verbinden. Sie können mit Ihrem bevorzugten Tech Stack auch völlig neue Services erstellen, die sich in Ihr Help Center integrieren lassen, um ein nahtloses Benutzererlebnis zu bieten.
Die Beispiel-App verwendet die folgenden Funktionen.
- Eine entwickelte Express-API, die die vom Benutzer im Front-End-Formular übermittelten Benutzer- und Organisationsinformationen empfängt.
-
Senden Sie API-Anfragen an Zendesk Support, um den entsprechenden Benutzer und die Organisation mit node-fetch zu erstellen und zu aktualisieren .
- Überprüfen Sie die Formulareinreichungsdaten mit validator.js .
-
Senden einer Bestätigungs-E-Mail an den Benutzer, wenn das Formular mit Nodemailer erfolgreich übermittelt wurde .
Achten Sie beim Erstellen serverseitiger Services für angepasste Seiten auf die Sicherheit und schützen Sie Ihre API-Routen. Erwägen Sie, eine Anforderungsauthentifizierung mit Tools wie JWT aufzubauen, um Ihre Anwendung zu schützen. Weitere Informationen zu JWT finden Sie in diesem Beitrag auf der JWT-Website: Einführung in das JSON-Web-Token .
Die Beispiel-App verwendet die unten stehende Authentifizierung.
- Ein Authentifizierungsendpunkt , über den das Front-End ein JWT-Token zur Autorisierung von Anfragen an die Formularübermittlungs-API anfordern kann.
- Authentifizierungsmodule , die JWT-Tokens mithilfe von jsonwebtoken generieren und überprüfen .
Je nachdem, welche Anwendung Sie erstellen, sollten Sie auch Ihre CORS-Richtlinie (Cross-Origin Resource Sharing) berücksichtigen. Stellen Sie sicher, dass für die Routen, die Anforderungen von der Clientseite empfangen, CORS aktiviert ist. Wenn Sie wissen, welche Domänen die Anforderungen senden, geben Sie diese Domänen explizit an. Verwenden Sie andernfalls den Platzhalter „*“. Weitere Informationen zu CORS finden Sie in diesem Beitrag auf der Mozilla-Website: Cross-Origin Resource Sharing (CORS) .
Bündel
Sobald die Entwicklung Ihrer angepassten Seite abgeschlossen ist, können Sie Ihre React-App mit Webpack bündeln. Da alle angepassten Seiten in Ihr Design eingebettet sein müssen, sollten Sie die angepasste Seite in einer einzigen HTML-Datei kompilieren. Die App „Create React“ wird mit einer eigenen Bündelung und Optimierung geliefert. Da das Ziel jedoch darin besteht, eine Single zurückzugebenindex.html
-Datei verfügt das Beispiel über eine eigene Webpack-Konfiguration, die diesen Vorgang vereinfacht.
Einbetten
Nachdem Sie die Anwendung erstellt haben, können Sie sie in Ihr Help Center einbetten. 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
Dieindex.html
file ist der Code, der in die angepasste Seite eingefügt werden soll. Greifen Sie auf das für das Projekt erstellte JavaScript und CSS zu. Laden Sie zunächst die JavaScript- und CSS-Datei als Assets in Ihr Help Center hoch. Kopieren Sie dann den Code von Ihremindex.html
in die angepasste Seite und passen Sie die Dateipfade zu den Elementen an.
Unten finden Sie ein Beispiel für die Darstellung im Code-Editor.
Wenn Sie fertig sind, veröffentlichen Sie die angepasste Seite. Weitere Ressourcen zum Verwalten von Inhalten in Ihrem Help Center finden Sie im folgenden Beitrag: Guide-Ressourcen.
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.