Le pagine personalizzate sono una funzione aggiunta ai piani Guide Enterprise. Questa funzione permette di aggiungere funzioni esclusive e pagine web al Centro assistenza ed è un'estensione dei temi personalizzati.
In questa funzione dimostrativa, troverai un'app sviluppata per una sola pagina che gli utenti finali possono usare per iscriversi per diventare membri VIP e ricevere assistenza su misura per la propria organizzazione.
Questo esempio di app a pagina singola è stato sviluppato usando React con Typescript per il frontend e Node.js per il backend. Tailwind CSS è stato usato anche per definire lo stile, insieme a Nodemailer per configurare il processo di invio di un'email di conferma agli utenti che si sono iscritti.
Poiché questa è un'applicazione React, l'esempio illustra i passaggi del Webpack necessari per compilarlo in un singolo file. Quindi, incorpora il file nel tema del Centro assistenza e caricalo. Per ciascuna serie di passaggi, vedere le sezioni seguenti:
- Develop - Come sviluppare la pagina personalizzata usando React con Typescript e Node.js
- Bundle - Come configurare Webpack per raggruppare la pagina personalizzata
- Incorpora - Come incorporare il progetto nel tema e pubblicarlo nel Centro assistenza
Sviluppo
Le pagine personalizzate ti permettono di sviluppare la pagina con qualsiasi stack tecnologico per il web. Una preferenza molto diffusa tra gli stack tecnologici è l'uso di React.js con Node.js per lo sviluppo back-end. Come con qualsiasi tecnologia, ogni codice presenta sfumature e specifiche da implementare. Di seguito sono riportati uno schema di queste considerazioni tecniche.
Reagisci
Poiché le pagine personalizzate sono create con le tue funzionalità, l' app Create React è un'ottima scelta per lo sviluppo che usa un framework applicativo a pagina singola.
La pagina di iscrizione all'assistenza VIP mostrata qui sopra contiene due richieste. Una richiesta genera un token sicuro per l'autenticazione nel nostro backend. L'altra richiesta consiste nell'effettuare la richiesta dei dati di invio effettivo.
La pagina personalizzata di esempio modifica i profili utente e le organizzazioni in Zendesk. Se la tua pagina personalizzata effettua questo tipo di richieste, implementa un modo per convalidare i dati dal frontend prima della richiesta. Sebbene sia necessaria la convalida dei dati che gestisce la richiesta nel backend, eseguendo la convalida dal frontend, specialmente quando questi dati provengono da input dell'utente come un modulo, sarai in grado di garantire che solo dati puliti e utilizzabili raggiungano l'istanza Zendesk .
È anche importante riconoscere che una pagina personalizzata è solo una parte del tuo Centro assistenza. Qualsiasi funzionalità, branding o stile usato per la pagina personalizzata deve essere coerente con il Centro assistenza nel suo insieme.
Alcuni aspetti della progettazione da considerare includono i punti seguenti.
- Autenticazione: Quali tipi di utenti possono accedere a questa pagina? Agenti, tutti gli utenti autenticati o tutti gli utenti?
- Navigazione:
- Non è necessario sviluppare un'intestazione o una navigazione nella pagina personalizzata. Il team Guide del tuo account imposta la navigazione e l'intestazione. Poiché la pagina personalizzata è incorporata nel tema, l'intestazione e la navigazione del tema corrente vengono applicate anche alla pagina.
- Valuta dove si troverà questa pagina nel Centro assistenza. In modo analogo al modo in cui le funzionalità vengono estratte dal Centro assistenza, anche la pagina personalizzata rimane al di fuori dello schema predefinito del Centro assistenza. Gli utenti possono accedere a queste pagine tramite un link incorporato in qualsiasi modello di centro assistenza o pagina predefinita inclusa nel centro assistenza, come la home page. L'URL delle pagine personalizzate sarà in questo formato:
https://{domain_name}/hc[/{locale}]/p/{page_name}
- Stile della pagina: considera le librerie di stili che stai usando e valuta se lo stile è in linea con il resto del tema del Centro assistenza. Assicurati che il carattere selezionato e la tavolozza dei colori corrispondano al tema selezionato.
- Gestione delle immagini: dal momento che sarà necessario configurare e raggruppare la pagina personalizzata manualmente, la memorizzazione di immagini o asset localmente non funzionerà. Caricali nel tema del Centro assistenza prima di incorporarli. Per una guida dettagliata al caricamento degli asset nel tema, consulta l'articolo: Come usare gli asset dei temi per il centro assistenza.
Nodo.js
Le pagine personalizzate offrono uno sfondo bianco per offrire ai visitatori un'esperienza più personalizzata. La possibilità di interagire con un server di backend creato con strumenti come Node.js ed Express ti permette di connetterti direttamente con i sistemi e i database che hai già. Puoi anche creare servizi completamente nuovi con il tuo stack tecnologico preferito, che si integrano con il Centro assistenza per un'esperienza utente ottimizzata.
L'app di esempio usa le funzioni seguenti.
- Un'API rapida sviluppata che riceve le informazioni relative all'utente e all'organizzazione inviate dall'utente nel modulo frontend.
-
Invia richieste API a Zendesk Support per creare e aggiornare l'utente e l'organizzazione in questione con la funzione node-fetch.
- Convalida i dati di invio del modulo usando validator.js.
-
Invia una notifica email di conferma all'utente dopo aver inviato il modulo con successo a Nodemailer.
Prestate attenzione alla sicurezza e proteggete gli instradamenti API durante la creazione di servizi di pagine personalizzate lato server. Valuta la possibilità di creare l'autenticazione delle richieste con strumenti come JWT per proteggere la tua applicazione. Per maggiori informazioni su JWT, leggi questo articolo dal sito web JWT: Introduzione a JSON Web Token.
L'app di esempio usa l'autenticazione indicata di seguito.
- 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 token JWT usando jsonwebtoken.
A seconda dell'applicazione creata, un altro elemento da tenere in considerazione è la policy CORS (Condivisione delle risorse trasversali). Assicurati che le route che ricevono le richieste dal lato client abbiano abilitato CORS. Se conosci i domini che inviano le richieste, specificali in modo esplicito. Altrimenti, usa il carattere jolly "*". Per maggiori informazioni su CORS, leggi questo articolo dal sito web di Mozilla: Condivisione risorse tra origini (CORS).
Pacchetto
Una volta completato lo sviluppo della tua pagina personalizzata, raggruppa l'app React usando il webpack. Poiché tutte le pagine personalizzate devono essere incorporate nel tema, compila la pagina personalizzata in un singolo file html. L' app Create React viene fornita in bundle e ottimizzazione. Tuttavia, poiché l'obiettivo è quello di restituire un singolo index.html
, l'esempio ha una configurazione webpack che semplificherà questo processo.
Incorporata
Dopo aver creato l'applicazione, incorporala nel Centro assistenza. Passa alla directory di compilazione appena creata. Qui troverai alcuni file necessari per creare la nuova pagina personalizzata.
index.html
- static/css/bundle.min.css
- static/bundle.min.js
il index.html
file è il codice da inserire nella pagina personalizzata. Accedi al JavaScript e al CSS creati per il progetto. Innanzitutto, carica il file JavaScript e CSS come asset nel Centro assistenza. Quindi, copia il codice dal tuo index.html
file nella pagina personalizzata e adattare 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 della guida.
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.