Guida JavaScript per il centro assistenza

Suite

Growth, Professional, Enterprise, or Enterprise Plus

Support with

Guide all plans

Puoi personalizzare facilmente l’aspetto di un centro assistenza usando JavaScript e jQuery. Questa guida è stata ideata per aiutarti a dare al tuo centro assistenza l’aspetto che desideri.

jQuery non è fornito per impostazione predefinita. Assicurati di importare una libreria jQuery se vuoi usare istruzioni jQuery in un tema al posto di JavaScript standard. Per maggiori informazioni, consulta Importazione o aggiornamento di jQuery.

Nota: agli utenti che beneficiano di un periodo di prova viene offerto il piano Professional, che include opzioni di modifica del codice. Tuttavia, non potranno più accedere a tale funzionalità se acquistano il piano Team.

Per accedere e modificare il codice JavaScript nel centro assistenza, consulta Personalizzazione di CSS o JavaScript.

Puoi anche personalizzare il centro assistenza usando il linguaggio dei modelli del Centro assistenza o CSS:

• Informazioni di riferimento sui modelli del centro assistenza
• Guida dei modelli del centro assistenza
• Guida CSS per il centro assistenza

Elenco ricette

Aggiungeremo altre ricette nel tempo, ma non possiamo mai sperare di essere esaustivi. Il numero di cose che puoi fare con JavaScript è limitato solo dalla tua immaginazione. Pubblica le tue istruzioni nella sezione commenti e le aggiungeremo a questa guida.

• Cambia il testo del link Le mie attività
• Nascondi i campi personalizzati nella barra laterale dei ticket in Le mie attività
• Rinomina le etichette “Oggetto” e “Descrizione” nel modulo di richiesta
• Precompila i campi dei moduli ticket personalizzati
• Modifica l’ordine dei campi personalizzati nel modulo di richiesta
• Aggiungi le intestazioni al modulo di richiesta
• Nascondi una lingua nel menu a discesa della lingua
• Sostituisci le stringhe di testo nel selettore della lingua con le icone dei flag
• Nascondi la community in base alla lingua selezionata
• Impedisce che gli articoli vengano indicizzati dai motori di ricerca

Nota: quando modifichi i modelli di pagina, CSS o JavaScript per un tema standard o quando sviluppi un tema personalizzato, questo viene salvato come tema personalizzato. Le soluzioni che richiedono temi personalizzati non sono supportate da Zendesk e non vengono aggiornate automaticamente quando vengono rilasciati nuovi temi o funzioni (consulta Informazioni su temi standard e temi personalizzati nel centro assistenza).

Cambia il testo del link Le mie attività

Aggiungi la classe Le mie attività al modello intestazione.hbs:

{{link "my_activities" role="menuitem" class='my-activities'}}

Aggiungi la seguente istruzione jQuery alla funzione $(document).ready(function() nel modello JavaScript:

$(' .my-activities').html(' See my requests');

Nascondi i campi personalizzati nella barra laterale dei ticket in Le mie attività

Puoi usare JavaScript per nascondere i campi personalizzati nella barra laterale del ticket nella pagina Le mie attività. Puoi selezionare i campi personalizzati in base alle relative etichette. Ad esempio, se l'etichetta di un campo personalizzato è "Premi per i membri", puoi nascondere il campo se l'etichetta contiene "Membro" o "Premi" o "Premi per i membri".

Aggiungi la seguente funzione jQuery nel file script.js:

$(document).ready(function() {
  if (window.location.href.indexOf('/requests') > -1) {
    setTimeout(function() {
      $('dt:contains("Member rewards")').hide().next('dd').hide(); 
      // add more selectors as necessary
    }, 1000); // adjust the timeout duration as needed
}});

Rinomina le etichette “Oggetto” e “Descrizione” nel modulo di richiesta

Aggiungi le seguenti istruzioni jQuery alla funzione $(document).ready(function() nel modello JavaScript:

$('label[for=request_subject]').html("Custom Subject");
$('label[for=request_description]').html("Custom Description");

Precompila i campi dei moduli ticket personalizzati

Nota: solo alcuni piani supportano più moduli ticket. Per un elenco e informazioni generali sul funzionamento dei moduli ticket, consulta Creazione di moduli ticket per supportare più tipi di richiesta.

Supponiamo di usare un modulo ticket personalizzato nel centro assistenza per consentire agli utenti di registrare i prodotti. Puoi rilevare il modulo e precompilarne i campi quando un utente lo apre nel centro assistenza.

Avrai bisogno dell’ID modulo ticket, che puoi trovare nell’URL del modulo nel centro assistenza. Guarda questo esempio.

L’esempio jQuery seguente precompila il campo Oggetto con “Registrazione prodotto” e il campo Descrizione con “Questa è una nuova registrazione prodotto”. Aggiungi le istruzioni alla funzione $(document).ready(function() nel modello JavaScript:

var ticketForm = location.search.split('ticket_form_id=')[1];
if(ticketForm == 18570) {
  $('section.main-column h1').html('Product Registration');
  $('#request_subject').val('Product Registration');
  $('#request_description').val('There is a new product registration.');
  $('#request_subject').parent('.request_subject').hide(); // Hide subject
  $('#request_description').parent('.request_description').hide(); 
  $("<p>Please upload your product receipt here.<p>").insertAfter('label:contains("Attachments")'); // Adds text below "Attachments"
}

Modifica l’ordine dei campi personalizzati nel modulo di richiesta

Avrai bisogno degli ID dei campi personalizzati, che puoi trovare nell’interfaccia di Zendesk Support. Guarda questo esempio.

var firstName = $('input#request_custom_fields_22231170').parent();
var lastName = $('input#request_custom_fields_22231180').parent();
firstName.insertBefore($('input#request_subject').parent());
lastName.insertBefore($('input#request_subject').parent());

Aggiungi le intestazioni al modulo di richiesta

Aggiungi le seguenti istruzioni jQuery alla funzione $(document).ready(function() nel modello JavaScript:

 $('.form-field.request_anonymous_requester_email').prepend('<h2>Your personal information</h2>')
 $('.form-field.request_subject').prepend('<h2>Your issue</h2>');
 $('.form-field.request_custom_fields_21875914').prepend('<h2>Your device information</h2>');
 $('.form-field.request_custom_fields_22033620').prepend('<h2>Your purchase information</h2>');
 $('.form-field > label:contains("Attachments")').prepend('<h2>Support attachments</h2>');

Nascondi una lingua nel menu a discesa della lingua

Nascondere una lingua nel selettore della lingua può risultare utile se i contenuti in quella lingua non sono pronti per il rilascio. Aggiungi la seguente istruzione jQuery alla funzione $(document).ready(function() nel modello JavaScript:

$("ul.dropdown-panel li a:contains('Français')").hide();

Sostituisci le stringhe di testo nel selettore della lingua con le icone dei flag

Ad esempio, se il centro assistenza fornisce contenuti in inglese americano e tedesco, potresti visualizzare le bandiere nazionali anziché "Inglese americano" e "Tedesco" nel selettore della lingua. Aggiungi la seguente istruzione jQuery alla funzione $(document).ready(function() nel modello JavaScript:

$(function(){
$('a.dropdown-toggle:contains("English (US)")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/United-States-flat-icon.png" width="48" height="48">');
$('a.dropdown-toggle:contains("Deutsch")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/Germany-flat-icon.png" width="48" height="48">');
$('a:contains("English (US)")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/United-States-flat-icon.png" width="48" height="48">');
$('a:contains("Deutsch")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/Germany-flat-icon.png" width="48" height="48">');
});

Nascondi la community in base alla lingua selezionata

Aggiungi la seguente istruzione jQuery alla funzione $(document).ready(function() nel modello JavaScript:

if (document.location.pathname.match( (/hc\/de/) || (/hc\/es/) )) {
  $('.community').hide();
}

Impedisce che gli articoli vengano indicizzati dai motori di ricerca

Un mega tag noindex indica ai motori di ricerca di non includere la pagina specifica nei propri indici. Per aggiungere dinamicamente un meta tag noindex ad articoli specifici, aggiungi la seguente funzione nel file script.js:

(function () {
  // Get the current page URL  
  const url = window.location.href;

  // Check if the URL is an article page
  if (url.indexOf("/articles/") == -1) {
    return;
  }

  //List the ids of articles to be excluded from indexing
  const articles = [5555300573850, 5500012959342]; //Example article ids
  for (let i = 0; i < articles.length; i++) {
    if (url.indexOf(articles[i]) !== -1) {
      //Create a new meta tag element
      var meta_tag = document.createElement("meta");
      meta_tag.setAttribute("name", "robots");
      meta_tag.setAttribute("content", "noindex");

      //Append the meta tag to the head of the document
      document.head.appendChild(meta_tag);
    }
  }
})();