Entwickeln, bündeln, einbetten: Implementierung einer angepassten Seite mit React

„Angepasste Seiten" ist eine zusätzliche Funktion für Guide Enterprise-Pläne. Diese Funktion erweitert Ihr Help Center und ist eine Erweiterung zu angepassten Designs.

Hinweis: Wenn Sie mit dem Designeditor Seitenvorlagen, CSS oder JavaScript für ein Standarddesign bearbeiten oder ein eigenes Design entwickeln, wird es als angepasstes Design gespeichert. Zendesk unterstützt keine angepassten Designs und das sind sie nicht werden bei der Veröffentlichung neuer Funktionen automatisch aktualisiert. Lesen Sie den Beitrag: Überblick über das Standarddesign und die angepassten Designs in Ihrem Help Center.

In dieser Funktionsdemonstration finden Sie eine entwickelte Single-Page-App, mit der Endbenutzer VIP-Mitglieder werden können, um maßgeschneiderten Support für ihr Unternehmen zu erhalten.

Diese Single-Page-Beispielanwendung wurde mit React with Typescript für das Frontend und Node.js für das Backend entwickelt. Tailwind CSS wurde außerdem zu Styling-Zwecken 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 in diesem Beispiel die zu ihrer Kompilierung erforderlichen WebPack-Schritte beschrieben. Betten Sie die Datei dann in Ihr Help-Center-Design ein und laden Sie sie hoch. Die einzelnen Schritte sind in den folgenden Abschnitten beschrieben:

• Entwickeln - So entwickeln Sie die 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

Hinweis: Wenn Sie nicht an der Integration mit einem Backend oder der Verwendung von Typescript interessiert sind, lesen Sie den Textbaustein , mit dem Sie Ihre eigene Single-Page-App erstellen können.

Entwickler

Angepasste Seiten ermöglichen die Entwicklung der Seite mit einem beliebigen Web Tech Stack. Eine beliebte Tech-Stack-Präferenz ist die Verwendung von React.js mit Node.js für die Backend-Entwicklung. Wie jede Technologie hat auch jeder Code seine eigenen Feinheiten 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-Application-Framework verwendet.

In der obigen Demonstration der VIP-Support-Registrierungsseite werden zwei Anfragen gestellt. Eine einzige Anfrage generiert ein sicheres Token zur Authentifizierung bei unserem Backend. Die andere Anforderung besteht darin, die eigentliche Übermittlungsdatenanforderung zu stellen.

Die angepasste Beispielseite erstellt Änderungen an Benutzerprofilen und Organisationen in Zendesk. Wenn Ihre angepasste Seite auch solche Anfragen stellt, implementieren Sie eine Möglichkeit, diese Daten vor der Anfrage vom Frontend aus zu validieren. Obwohl die Anfrage im Backend überprüft werden sollte, können Sie durch Ausführen der Validierung vom Frontend aus sicherstellen, dass nur saubere und nutzbare Daten Ihre Zendesk-Instanz erreichen, besonders wenn diese Daten aus Benutzereingaben wie einem Formular stammen. .

Eine angepasste Seite ist nur ein Teil Ihres Help Centers. Alle Funktionen, das Branding und der Stil Ihrer angepassten Seite sollten mit dem gesamten Help Center übereinstimmen.

Einige Designaspekte, die Sie berücksichtigen sollten, sind die folgenden.

• Authentifizierung: Welche Arten von Benutzern können auf diese Seite zugreifen? Agenten, alle authentifizierten Benutzer oder alle?
  
  
• Navigation:
  • Sie brauchen keine Kopfzeile oder Navigation auf Ihrer angepassten Seite zu entwickeln. Das Guide-Team Ihres Kontos legt die Navigation und den Header fest. Da die angepasste Seite in Ihr Design eingebettet ist, werden der Kopfbereich und die Navigation des aktuellen Designs auch auf diese Seite angewendet.
  • Überlegen Sie, wo diese Seite im Help Center erscheinen wird. So wie die Funktionalität des Help Centers abstrahiert wird, befindet sich auch die angepasste Seite außerhalb des Standardschemas des Help Centers. Benutzer können über einen Link, der in einer Help-Center-Vorlage oder auf einer vordefinierten Seite im Help Center, wie z. B. auf Ihrer Homepage, eingebettet ist, auf diese Seiten zugreifen. Die URL Ihrer angepassten Seiten hat das folgende Format: https://{domain_name}/hc[/{locale}]/p/{page_name}

• Seitenstil: Berücksichtigen Sie die verwendeten Stilbibliotheken und bestimmen Sie, ob der Stil zum restlichen Help-Center-Design passt. Stellen Sie sicher, dass die Schriftart- und Farbpalettenauswahl zum vorhandenen Design passt.
  
  
• Handhabung von Bildern:Da Sie Ihre angepasste Seite manuell konfigurieren und bündeln müssen, können Bilder oder Assets nicht lokal gespeichert werden. 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 einen leeren Arbeitsbereich, über den Sie Ihren Besuchern ein persönlicheres Erlebnis bieten können. Die Interaktion mit einem mit Tools wie Node.js und Express erstellten Backend-Server ermöglicht die direkte Verbindung mit bereits vorhandenen Systemen und Datenbanken. Sie können mit Ihrem bevorzugten Tech-Stack auch völlig neue Services entwickeln, die sich 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 vom Benutzer im Frontend-Formular eingereichten Benutzer- und Organisationsinformationen empfängt.

• Senden Sie API-Anforderungen an Zendesk Support, um die relevanten Benutzer und Organisationen mit Node-Fetchzu erstellen und zu aktualisieren.

• Überprüfen Sie die Daten zum Einreichen des Formulars mit „validator.js".

• Bestätigungs-E-Mail an den Benutzer senden, wenn das Formular mit Nodemailererfolgreich eingereicht wurde.

Denken Sie beim Erstellen serverseitiger angepasster Seitendienste an die Sicherheit und schützen Sie Ihre API-Routen. Erwägen Sie, die Anfrageauthentifizierung mit Tools wie JWT einzurichten, um Ihre Anwendung zu schützen. Um mehr über JWT zu erfahren, lesen Sie diesen Beitrag von der JWT-Website: Einführung in das JSON Web Token.

Die Beispiel-App verwendet die unten angegebene Authentifizierung.

• Ein Authentifizierungsendpunkt , über den das Front-End ein JWT-Token zur Autorisierung von Anfragen an die Formulareinreichungs-API anfordern kann.
• Authentifizierungsmodule , die JWT-Token mit jsonwebtokengenerieren und verifizieren.

Je nach entwickelter Anwendung sollte auch die CORS-Richtlinie (Cross-Origin Resource Sharing) berücksichtigt werden. Stellen Sie sicher, dass auf den Pfaden, die Anfragen von der Clientseite erhalten, CORS aktiviert ist. Wenn Sie wissen, welche Domänen die Anfragen senden, geben Sie diese Domänen ausdrücklich an. Andernfalls verwenden Sie den Platzhalter „*". Weitere Informationen zu CORS finden Sie in diesem Beitrag auf der Mozilla-Website: Ursprungsübergreifende Ressourcennutzung (CORS).

Paket

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 werden müssen, sollten Sie sie in eine einzige HTML-Datei kompilieren. Die App „Create React" enthält ein eigenes Paket und eine eigene Optimierung. Da das Ziel jedoch darin besteht, eine einzelne index.html enthält das Beispiel eine eigene Webpack-Konfiguration , die diesen Prozess strafft.

Einbetten

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 Sie zum Erstellen der neuen angepassten Seite benötigen.

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

Der index.html 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 zuerst die JavaScript- und CSS-Datei als Assets in Ihr Help Center hoch. Kopieren Sie dann den Code von Ihrem index.html in die angepasste Seite und passen Sie die Dateipfade zu den Assets an.

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

Veröffentlichen Sie Ihre angepasste Seite, wenn Sie fertig sind. Weitere Ressourcen zum Verwalten von Inhalten im Help Center finden Sie im folgenden Beitrag: Ressourcen für Zendesk 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.