Questo articolo aiuta a risolvere il problema dell’integrazione di funzionalità uniche e personalizzate nel centro assistenza Zendesk. Guidandoti attraverso il processo di aggiunta di pagine personalizzate al tuo piano Guide Enterprise, spiega come sviluppare, raggruppare e incorporare pagine personalizzate usando tecnologie come React.js e Node.js. Ad esempio, puoi creare una pagina di iscrizione all’assistenza VIP personalizzata che si adatta perfettamente al design del 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é si tratta di 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 caricalo. Segui le sezioni seguenti per ciascuna serie di passaggi:
- Sviluppo: Crea la pagina personalizzata usando React con TypeScript e Node.js.
- Pacchetto: Configura Webpack per raggruppare la pagina personalizzata
- Incorpora: Integra il progetto nel tema e pubblicalo nel centro assistenza
Sviluppo: Crea la pagina personalizzata usando React con TypeScript e Node.js.
Le pagine personalizzate ti consentono di sviluppare usando qualsiasi stack tecnico web preferito. Molti preferiscono usare React.js con Node.js per lo sviluppo di backend. Ogni tecnologia ha le sue sfumature e specifiche. Ecco alcune considerazioni tecniche:
Reagisci
Usa Crea app React per le pagine personalizzate poiché si tratta di un framework applicativo a pagina singola. La pagina di iscrizione VIP Support qui sopra effettua due richieste. Uno genera un token sicuro per l’autenticazione back-end. L’altro 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 della richiesta. La convalida del backend è essenziale, 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: Determina chi può accedere a questa pagina: agenti, tutti gli utenti autenticati o tutti gli utenti
-
Navigazione:
-
Non sviluppare un’intestazione o una navigazione nella pagina personalizzata. Il team Guide del tuo account imposta queste impostazioni. 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 del centro assistenza. Gli utenti accedono a queste pagine tramite link in qualsiasi modello del centro assistenza o pagina predefinita come la tua home page. Gli URL delle pagine personalizzate seguono questo formato:
https://{domain_name}/hc[/{locale}]/p/{page_name}
-
-
Stile pagina: Seleziona le librerie di stili in linea con il tema del centro assistenza. Assicurati che il carattere e la tavolozza dei colori corrispondano al tema esistente.
-
Gestione delle immagini: Poiché la pagina personalizzata verrà configurata e raggruppata manualmente, la memorizzazione di immagini o asset in locale non funzionerà. Caricali nel tema del centro assistenza prima di incorporarli. Per una guida dettagliata, consulta l’articolo: Uso degli asset dei temi per il centro assistenza.
Node.js
Le pagine personalizzate forniscono 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, integrandoli con il tuo centro assistenza per un’esperienza utente senza interruzioni.
L’app di esempio usa le funzioni seguenti.
-
Un’API Express sviluppata che riceve le informazioni sull’utente e sull’organizzazione inviate dal modulo frontend.
-
Invia richieste API a Zendesk Support per creare e aggiornare l’utente e l’organizzazione pertinenti con node-fetch.
-
Convalida i dati di invio del modulo usando validator.js.
-
Invia una notifica email di conferma all’utente in caso di invio del modulo con Nodemailer.
Presta attenzione alla sicurezza e proteggi i percorsi 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 token web JSON.
L’app di esempio usa l’autenticazione seguente.
-
Un endpoint di autenticazione per il frontend per richiedere un token JWT per autorizzare le richieste all’API di invio moduli.
-
Moduli di autenticazione che 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, usa il carattere jolly *. Per ulteriori informazioni su CORS, consulta questo articolo dal sito web di Mozilla: Condivisione risorse tra origini (CORS).
Pacchetto: Configura Webpack per raggruppare la pagina personalizzata
Una volta completato lo sviluppo della pagina personalizzata, raggruppa l’app React usando Webpack. Poiché tutte le pagine personalizzate devono essere incorporate nel tema, compila la pagina personalizzata in un unico file HTML. L’ app Create React include funzionalità di raggruppamento e ottimizzazione proprie. Tuttavia, poiché l'obiettivo è restituire un singolo index.html , l’esempio ha una propria configurazione del webpack per semplificare questo processo.
Incorpora: 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. Qui troverai alcuni file necessari per creare la nuova pagina personalizzata.
index.htmlstatic/css/bundle.min.cssstatic/bundle.min.js
Il index.html file è il codice da inserire nella pagina personalizzata. Accedi al codice JavaScript e CSS creato per il progetto. Innanzitutto, carica il file JavaScript e CSS come asset nel centro assistenza. Quindi, copia il codice da index.html file nella pagina personalizzata e adatta i percorsi dei file agli asset.
Di seguito è riportato un esempio 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 di Guide.
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.