Quale piano sto usando?

Disponibile in tutti i piani Suite Growth e superioriDisponibile in tutti i piani Guide

Il tema Copenhagen standard consente agli utenti finali di votare gli articoli del centro assistenza. In questa istruzione, modificherai il codice del tema per visualizzare un messaggio di follow-up quando un utente assegna un voto negativo a un articolo.

Il messaggio di voto negativo include un link a una pagina Nuova richiesta contenente un modulo ticket. Un utente può compilare il modulo ticket per lasciare un feedback per l’articolo. Il modulo usa un campo ticket personalizzato per acquisire l’URL dell’articolo. Una volta inviato, il modulo crea un ticket in Zendesk Support.

Informazioni su questa istruzione

Devi essere un amministratore Zendesk Support per completare questa istruzione. L’istruzione prevede le seguenti attività:
  • Attività 1: Abilitazione del voto anonimo
  • Attività 2: Creazione di un campo ticket personalizzato per l’URL dell’articolo
  • Attività 3: Aggiunta di un CSS personalizzato
  • Attività 4: Aggiornamento del modello Pagina articolo
  • Attività 5: Aggiunta di JavaScript personalizzato
  • Attività 6: Test delle modifiche

L’istruzione presuppone che tu stia modificando il tema Copenhagen standard. Se vuoi modificare un altro tema o apportare modifiche simili a un tema Copenhagen personalizzato, potrebbe essere necessario cambiare gli esempi di codice.

L’istruzione usa anche un modulo ticket precompilato. I moduli ticket precompilati richiedono un tema che usa l’API per modelli versione 2. Per verificare la versione del tema in uso, consulta Informazioni sulle versioni dei modelli di Guide.

Nota: questa istruzione richiede la modifica di CSS, modelli di pagina e JavaScript. Quando modifichi un tema standard, viene salvato come tema personalizzato. I temi personalizzati non sono supportati da Zendesk e non vengono aggiornati automaticamente quando vengono rilasciate nuove funzionalità. Consulta Informazioni su temi standard e personalizzati nel centro assistenza.

Attività 1: Abilitazione del voto anonimo

Se il tuo centro assistenza è visibile ai visitatori anonimi, puoi abilitare il voto anonimo come passaggio opzionale. Il voto anonimo consente agli utenti finali di votare gli articoli del centro assistenza senza effettuare l’accesso.

Per abilitare il voto anonimo, segui le istruzioni in Consentire agli utenti di votare gli articoli della Knowledge base senza effettuare l’accesso. Quindi torna a questo articolo.

Attività 2: Creazione di un campo ticket personalizzato per l’URL dell’articolo

Per iniziare, crea un campo ticket personalizzato per acquisire gli URL degli articoli del centro assistenza.

Per creare un campo ticket personalizzato per l’URL dell’articolo
  1. Nel Centro amministrativo, fai clic su Oggetti e regole nella barra laterale, quindi seleziona Ticket > Campi.
  2. Fai clic su Aggiungi campo.
  3. Seleziona il tipo di campo Testo.

  4. Inserisci l’URL dell’articolo della guida come Nome visualizzato.
  5. In Autorizzazioni, seleziona I clienti possono modificare.
  6. In Clienti, inserisci l'URL dell'articolo della guida come Titolo mostrato ai clienti.

  7. Fai clic su Salva.

    Se il tuo account usa un solo modulo ticket, il nuovo campo viene visualizzato automaticamente nel modulo ticket. Se usi più moduli ticket, dovrai aggiungere manualmente il campo a tutti i moduli ticket in cui vuoi includerlo.

  8. Nella pagina Campi, copia l’ID campo per il campo URL articolo della guida. Userai l’ID più avanti in questa istruzione.

Attività 3: Aggiunta di un CSS personalizzato

Quindi, aggiungi un CSS personalizzato per il messaggio di voto negativo al tuo tema.

Per aggiungere il CSS personalizzato al tema
  1. In Guide, apri l’editor di codice per il tema. Per istruzioni, consulta Modifica del tema del centro assistenza.
  2. Fai clic su style.css.
  3. Incolla quanto segue in fondo al file:
    /* ---- Downvote message ----------- */
.downvote-message {
  display: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}

    Il codice aggiunge regole CSS per una classe .downvote-message. Userai la classe per nascondere il messaggio di voto negativo fino a quando un utente non assegna un voto negativo a un articolo. La classe applica anche uno stile al messaggio visualizzato.

  4. Se stai aggiornando il tema attivo del centro assistenza, fai clic su Pubblica. Altrimenti, fai clic su Salva.

Attività 4: Aggiornamento del modello Pagina articolo

Aggiungi il codice HTML del messaggio di voto negativo al modello Pagina articolo del tema.

Per aggiornare il modello Pagina articolo
  1. In Guide, apri l’editor di codice per il tema.
  2. Fai clic su article_page.hbs.
  3. Aggiungi il seguente frammento di codice HTML prima del tag di chiusura di
    :
    <div class="downvote-message">
  <p>We're sorry to hear that.</p>
  <p><a href="{{page_path 'new_request'}}?tf_CUSTOM_FIELD_ID=HTTPS://SUBDOMAIN.ZENDESK.COM{{url}}">Please tell us
      why.</a></p>
</div>
    Nel frammento di codice, sostituisci:
    • CUSTOM_FIELD_ID con l’ID campo del campo URL dell’articolo della guida creato in Creazione di un campo ticket personalizzato per l’URL dell’articolo
    • HTTPS://SUBDOMAIN.ZENDESK.COM con l’URL base del centro assistenza
    Il codice HTML aggiunge un messaggio di voto negativo sotto i pulsanti di voto di ciascun articolo. Il div principale del massaggio usa la classe downvote-message aggiunta in Creazione di un ticket personalizzato per l’URL dell’articolo. Il codice CSS di questa classe nasconde il messaggio a tutti gli utenti. Più avanti nell’istruzione, aggiungerai un codice JavaScript personalizzato per visualizzare il messaggio quando un utente lascia un voto negativo.

    Il messaggio contiene un link a una pagina Nuova richiesta contenente un modulo ticket. Questo link usa un parametro URL per precompilare il campo URL dell’articolo della guida del modulo con l’URL attuale dell’articolo. Per maggiori informazioni sulla precompilazione dei moduli ticket, consulta Creazione di moduli ticket precompilati.

  4. Se il tuo account usa un solo modulo ticket, vai al passaggio successivo. Se il tuo account ha più moduli ticket, aggiungi il parametro URL &ticket_form_id=FORM_ID alla fine del valore href del frammento di codice HTML. Nel parametro, sostituisci FORM_ID con l’ID del modulo ticket. Esempio:
    <div class="downvote-message">
  <p>We're sorry to hear that.</p>
  <p><a href="{{page_path 'new_request'}}?tf_12345=https://example.zendesk.com{{url}}&ticket_form_id=67890">Please tell us
      why.</a></p>
</div>

    Il modulo ticket deve essere visibile agli utenti finali. Per verificare o modificare la visibilità di un modulo ticket, consulta Creazione di più moduli ticket per supportare diversi tipi di richiesta.

  5. Esamina l’elemento
    del modello. Dovrebbe essere simile a quanto riportato di seguito:
    <div class="article-votes">
  <span class="article-votes-question" id="article-votes-label">{{t 'was_this_article_helpful'}}</span>
  <div class="article-votes-controls" role="group" aria-labelledby="article-votes-label">
    {{vote 'up' role='radio' class='button article-vote article-vote-up' selected_class="button-primary"}}
    {{vote 'down' role='radio' class='button article-vote article-vote-down' selected_class="button-primary"}}
  </div>
  <small class="article-votes-count">
    {{vote 'label' class='article-vote-label'}}
  </small>
  <div class="downvote-message">
    <p>We're sorry to hear that.</p>
    <p><a href="{{page_path 'new_request'}}?tf_67890=https://example.zendesk.com{{url}}">Please tell us
        why.</a></p>
  </div>
</div>
  6. Se stai aggiornando il tema attivo del centro assistenza, fai clic su Pubblica. Altrimenti, fai clic su Salva.

Attività 5: Aggiunta di JavaScript personalizzato

Aggiungi un codice JavaScript per visualizzare il messaggio di voto negativo quando un utente assegna un voto negativo a un articolo.

Per aggiungere il codice JavaScript personalizzato al tema
  1. In Guide, apri l’editor di codice per il tema.
  2. Fai clic su script.js.
  3. Incolla quanto segue in fondo al file:
    // Display message for article downvotes
document.addEventListener("DOMContentLoaded", () => {
  if (document.querySelector(".article-votes-controls")) {
    const voteButtons = document.querySelectorAll(".article-vote");
    const voteMessage = document.querySelector(".downvote-message");

    voteButtons.forEach((button) => {
      button.addEventListener("click", () => {
        let isDownButton = button.matches(".article-vote-down");
        let isPressed = button.matches(".button-primary");

        if (isDownButton && !isPressed) {
          voteMessage.style.display = "block";
        } else {
          voteMessage.style.display = "none";
        }
      });
    });
  }
});

    Quando un utente fa clic sul pulsante di voto No, il codice JavaScript visualizza il messaggio di voto negativo che hai aggiunto in Aggiornamento del modello Pagina articolo. Se l’utente reimposta il proprio voto o lo imposta su Sì, il codice JavaScript nasconde nuovamente il messaggio.

  4. Se stai aggiornando il tema attivo del centro assistenza, fai clic su Pubblica. Altrimenti, fai clic su Salva.

Attività 6: Test delle modifiche in corso

Prova la nuova funzionalità di voto per assicurarti che funzioni come previsto.

Per provare le modifiche
  1. In Guide, apri l’editor di codice per il tema.
  2. Fai clic su Anteprima.
  3. Nella finestra Anteprima, seleziona un Ruolo anteprima per Utente finale e un Modello per Pagina articolo.
  4. Vai a un articolo nel centro assistenza. In fondo all’articolo, fai clic sul pulsante No in Questo articolo ti è stato utile?.

    Viene visualizzato un breve messaggio contenente il link Spiegaci perché.

  5. Fai clic sul link Spiegaci perché.

    Il link dovrebbe aprire una pagina Nuova richiesta contenente il modulo ticket. Il campo URL dell’articolo della guida del modulo ticket deve contenere l’URL dell’articolo del centro assistenza correlato.

    Se lo desideri, puoi inviare il modulo per creare un ticket di prova.

  6. Passa a un altro articolo nel centro assistenza e fai clic sul pulsante di voto No.
  7. Quando viene visualizzato il messaggio di voto negativo, fai clic sul pulsante di voto Sì. Il messaggio di voto negativo dovrebbe scomparire.
  8. Se non hai apportato le modifiche al tema attivo del centro assistenza ma sei pronto per lanciarle, puoi impostare il tema personalizzato come tema attivo. Consulta Modifica del tema attivo del centro assistenza.
Powered by Zendesk