Questo articolo ti aiuta a integrare funzionalità uniche e personalizzate nel centro assistenza Zendesk. Ti guida attraverso il processo di aggiunta di pagine personalizzate al tuo piano Knowledge Enterprise e spiega come sviluppare, raggruppare e incorporare pagine personalizzate usando tecnologie come React.js e Node.js.
Ad esempio, puoi creare una pagina di iscrizione Support VIP personalizzata che si adatta perfettamente al design centro assistenza esistente, offrendo un’esperienza utente coerente e su misura.
Questo esempio di app a pagina singola usa React con TypeScript per il frontend e Node.js per il backend. Tailwind CSS dà uno stile all’app e Nodemailer gestisce le email di conferma per i nuovi utenti che si iscrivono correttamente.
Poiché lavori con un’app React, l’esempio illustra i passaggi del Webpack per compilarlo in un unico file. Incorpora il file nel tema del centro assistenza e lo carichi. Segui le sezioni seguenti per ciascuna serie di passaggi:
- Fase 1: Sviluppa la pagina personalizzata usando React con TypeScript e Node.js
- Fase 2: Configura Webpack per raggruppare la pagina personalizzata
- Fase 3: Incorpora e integra il progetto nel tema e pubblicalo nel centro assistenza
Se non vuoi eseguire l’integrazione con un backend o usare TypeScript, dai un’occhiata al boilerplate per avviare la tua app a pagina singola.
Passaggio 1. Sviluppa la pagina personalizzata usando React con TypeScript e Node.js
Le pagine personalizzate ti consentono di sviluppare usando qualsiasi stack tecnologico web preferito. Molti sviluppatori preferiscono React.js con Node.js per lo sviluppo di backend. Ogni tecnologia ha le sue sfumature e specifiche. Considera i seguenti punti tecnici:
Reagisci
Usa Crea app React per le pagine personalizzate poiché questo framework supporta le applicazioni a pagina singola. La pagina di iscrizione VIP Support qui sopra effettua due richieste: una richiesta genera un token sicuro per l’autenticazione back-end e l’altra invia i dati effettivi.
La pagina personalizzata di esempio cambia i profili utente e le organizzazioni in Zendesk. Se la tua pagina effettua richieste simili, convalida i dati dal frontend prima di inviare la richiesta. La convalida del backend svolge un ruolo cruciale, ma la convalida del frontend garantisce la pulizia dei dati, in particolare dagli input degli utenti.
Ricorda che una pagina personalizzata è solo una parte del tuo centro assistenza. Assicurati che tutte le funzionalità, il branding o lo stile siano in linea con il centro assistenza nel suo complesso.
Considera questi aspetti di progettazione:
-
Autenticazione: Specifica chi può accedere a questa pagina: agenti, tutti gli utenti autenticati o tutti gli utenti.
-
Navigazione:
-
Evita di sviluppare un’intestazione o una navigazione nella pagina personalizzata. Il team Knowledge del tuo account imposta queste funzioni. La pagina personalizzata eredita l’intestazione e la navigazione del tema corrente.
-
Posiziona questa pagina in modo appropriato nel centro assistenza. Come la funzionalità, la pagina personalizzata esiste al di fuori dello schema predefinito centro assistenza . Gli utenti raggiungono queste pagine tramite link in qualsiasi modello centro assistenza o pagine predefinite come la tua home page. Gli URL delle pagine personalizzate hanno il seguente aspetto:
https://{domain_name}/hc[/{locale}]/p/{page_name}
-
-
Stile pagina: Seleziona le librerie di stili che si adattano al tema centro assistenza . Assicurati che il carattere e la tavolozza dei colori corrispondano al tema esistente.
-
Gestione delle immagini: Poiché configuri e raggruppa manualmente la pagina personalizzata, la memorizzazione di immagini o asset in locale non funziona. Caricali nel tema centro assistenza prima di incorporarli. Per istruzioni dettagliate, fai riferimento all’articolo: Uso degli asset dei temi per il centro assistenza
Node.js
Le pagine personalizzate offrono un’area vuota per creare un’esperienza personalizzata per i visitatori. Con strumenti come Node.js ed Express, puoi connetterti direttamente a sistemi e database esistenti. Puoi anche creare nuovi servizi con il tuo stack tecnologico preferito e integrarli nel tuo centro assistenza per un’esperienza utente senza interruzioni.
L’app di esempio usa le funzioni seguenti.
-
Gli sviluppatori hanno creato un’API Express che riceve le informazioni su utenti e organizzazioni inviate dal modulo frontend.
-
L’app invia richieste API a Zendesk Support per creare e aggiornare l’utente e l’organizzazione pertinenti usando node-fetch.
-
Convalida i dati di invio del modulo usando validator.js.
-
L’app invia una notifica email di conferma all’utente in caso di invio del modulo tramite Nodemailer.
Proteggi attentamente le route API quando crei servizi di pagine personalizzate lato server. Usa strumenti come JWT per proteggere la tua applicazione creando l’autenticazione delle richieste. Per maggiori dettagli su JWT, consulta questo articolo dal sito web JWT: Introduzione al Web Token JSON.
L’app di esempio usa l’autenticazione descritta di seguito.
-
Gli sviluppatori hanno creato un endpoint di autenticazione che il frontend usa per richiedere un token JWT e autorizzare le richieste all’API di invio moduli.
-
I moduli di autenticazione generano e verificano i token JWT usando jsonwebtoken.
A seconda dell’applicazione che crei, prendi in considerazione la policy CORS (Cross-Origin Resource Sharing). Assicurati che le route che ricevono richieste dal lato client abbiano CORS abilitato. Se conosci i domini che inviano le richieste, specificali in modo esplicito. In caso contrario, configura il carattere jolly *. Per ulteriori informazioni su CORS, consulta questo articolo dal sito web di Mozilla: Condivisione delle risorse tra origini (CORS)
Passaggio 3. Configura Webpack per raggruppare la pagina personalizzata
Una volta completato lo sviluppo della pagina personalizzata, raggruppa l’app React usando Webpack. Poiché il tema deve incorporare tutte le pagine personalizzate, compila la pagina personalizzata in un unico file HTML. L’ app Create React include il raggruppamento e l’ottimizzazione propri. Tuttavia, poiché miri a restituire un singolo index.html , l’esempio usa la propria configurazione webpack per semplificare questo processo.
Passaggio 4. Incorpora e integra il progetto nel tema e pubblicalo nel centro assistenza
Dopo aver creato l’applicazione, incorporala nel centro assistenza. Vai alla directory di build appena creata. Troverai alcuni file necessari per creare la nuova pagina personalizzata.
index.htmlstatic/css/bundle.min.cssstatic/bundle.min.js
Il index.html contiene il codice inserito nella pagina personalizzata. Accedi al codice JavaScript e CSS creato per il progetto. Innanzitutto, carica i file JavaScript e CSS come asset nel centro assistenza. Quindi, copia il codice da index.html file nella pagina personalizzata e regola i percorsi dei file in modo che puntino agli asset.
Guarda un esempio qui sotto di come appare nell’editor di codice.
Al termine, pubblica la pagina personalizzata. Per ulteriori risorse sulla gestione dei contenuti nel centro assistenza, consulta l'articolo: Risorse Knowledge.
Avvertenza sulla traduzione: questo articolo è stato tradotto usando un software di traduzione automatizzata per fornire una comprensione di base del contenuto. È stato fatto tutto il possibile per fornire una traduzione accurata, tuttavia Zendesk non garantisce l'accuratezza della traduzione.
Per qualsiasi dubbio sull'accuratezza delle informazioni contenute nell'articolo tradotto, fai riferimento alla versione inglese dell'articolo come versione ufficiale.