Quelle est mon édition?

Disponible avec les éditions Suite Growth et supérieuresDisponible avec toutes les éditions Guide

Le thème Copenhagen standard permet aux utilisateurs finaux de voter pour ou contre les articles du centre d’aide. Dans cette recette, vous allez modifier le code du thème pour afficher un message de suivi quand un utilisateur vote contre un article.

Ce message inclut un lien vers une page Nouvelle demande qui contient un formulaire de ticket. Un utilisateur peut remplir le formulaire de ticket pour laisser des commentaires sur l’article. Le formulaire utilise un champ de ticket personnalisé pour capturer l’URL de l’article. Une fois envoyé, le formulaire crée un ticket dans Zendesk Support.

À propos de cette recette

Vous devez être un administrateur Zendesk Support pour suivre cette recette. La recette inclut les tâches suivantes :
  • Tâche 1 : activation du vote anonyme
  • Tâche 2 : création d’un champ de ticket personnalisé pour l’URL de l’article
  • Tâche 3 : ajout de feuilles de style CSS personnalisées
  • Tâche 4 : mise à jour du modèle de la page Article
  • Tâche 5 : ajout de JavaScript personnalisé
  • Tâche 6 : test de vos modifications

Cette recette suppose que vous modifiez le thème Copenhagen standard. Si vous voulez modifier un autre thème ou apporter des modifications similaires à un thème Copenhagen personnalisé, il est possible que vous deviez modifier les exemples de code.

La recette utilise aussi un formulaire de ticket prérempli. Les formulaires de ticket préremplis nécessitent un thème qui utilise Templating l’API de création de modèles version 2. Pour savoir quelle version du thème vous avez, consultez Au sujet des versions de la création de modèles Guide.

Remarque – Cette recette nécessite de modifier des feuilles de style CSS, les modèles de page et JavaScript. Quand vous modifiez un thème standard, il est enregistré sous la forme d’un thème personnalisé. Les thèmes personnalisés ne sont pas pris en charge par Zendesk et ne sont pas mis à jour automatiquement quand de nouvelles fonctionnalités sont publiées. Consultez À propos du thème standard et des thèmes personnalisés dans le centre d’aide.

Tâche 1 : activation du vote anonyme

Si votre centre d’aide est visible par les visiteurs anonymes, vous pouvez activer le vote anonyme (facultatif). Le vote anonyme permet aux utilisateurs finaux de voter pour ou contre les articles du centre d’aide sans se connecter.

Pour activer le vote anonyme, suivez les instructions dans Autoriser les utilisateurs à voter pour les articles sans se connecter. Puis revenez à cet article.

Tâche 2 : création d’un champ de ticket personnalisé pour l’URL de l’article

Pour commencer, créez un champ de ticket personnalisé pour capturer les URL des articles du centre d’aide.

Pour créer un champ de ticket personnalisé pour l’URL de l’article
  1. Dans le Centre d’administration, cliquez sur Objets et règles () dans la barre latérale, puis sélectionnez Tickets > Champs.
  2. Cliquez sur Ajouter un champ.
  3. Sélectionnez le type de champ Texte.

  4. Saisissez URL de l’article d’aide comme Nom d’affichage.
  5. Sous Permissions, sélectionnez Les clients peuvent apporter des modifications.
  6. Sous Clients, saisissez URL de l’article d’aide comme Titre visible pour les clients.

  7. Cliquez sur Enregistrer.

    Si votre compte utilise un seul formulaire de ticket, le nouveau champ s’affiche automatiquement dans votre formulaire de ticket. Si vous avez plusieurs formulaires de ticket, vous devez ajouter le champ manuellement aux formulaires auxquels vous voulez l’inclure.

  8. À la page Champs, copiez l’ID de champ pour le champ URL de l’article d’aide. Vous vous servirez de cet ID plus tard dans cette recette.

Tâche 3 : ajout de feuilles de style CSS personnalisées

Ensuite, ajoutez des feuilles de style CSS personnalisées à votre thème pour le message en cas de votre contre.

Pour ajouter les feuilles de style CSS personnalisées à votre thème
  1. Dans Guide, ouvrez l’éditeur de code pour le thème. Pour savoir comment faire, consultez Modification du thème de votre centre d’aide.
  2. Cliquez sur style.css.
  3. Collez ce qui suit à la fin du fichier : 
    /* ---- Downvote message ----------- */
.downvote-message {
  display: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}

    Le code ajoute des règles CSS pour une classe.downvote-message. Vous utiliserez la classe pour masquer le message en cas de vote contre jusqu’à ce qu’un utilisateur vote contre un article. La classe applique aussi un style au message quand il s’affiche.

  4. Si vous mettez le thème actif de votre centre d’aide, cliquez sur Publier. Sinon, cliquez sur Enregistrer.

Tâche 4 : mise à jour du modèle de la page Article

Ensuite, ajoutez du code HTML pour le message en cas de vote contre au modèle de la page Article du thème.

Pour mettre à jour le modèle de la page Article
  1. Dans Guide, ouvrez l’éditeur de code pour le thème.
  2. Cliquez sur article_page.hbs.
  3. Ajoutez le snippet HTML suivant avant la balise de fermeture de <div class="article-votes">  : 
    <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>
    Dans le snippet, remplacez :
    • CUSTOM_FIELD_ID par l’ID de champ dans le champ URL de l’article d’aide que vous avez créé dans Création d’un champ de ticket personnalisé pour l’URL de l’article.
    • HTTPS://SUBDOMAIN.ZENDESK.COM par l’URL de base de votre centre d’aide.
    Le code HTML ajoute un message en cas de vote contre sous les boutons de vote de chaque article. Le div parent du message utilise la classe downvote-message que vous avez ajoutée dans Création d’un champ de ticket personnalisé pour l’URL de l’article. Le CSS de la classe rend le message invisible pour tous les utilisateurs. Plus tard dans cette recette, vous ajouterez du JavaScript personnalisé afin d’afficher le message quand un utilisateur laisse un vote négatif.

    Ce message inclut un lien vers une page Nouvelle demande qui contient un formulaire de ticket. Ce lien utilise un paramètre d’URL pour préremplir le champ URL de l’article d’aide du formulaire avec l’URL de l’article actuel. Pour en savoir plus sur le préremplissage des formulaires de ticket, consultez Création de formulaires de ticket préremplis.

  • Si votre compte utilise un seul formulaire de ticket, passez directement à l’étape suivante. Si votre compte a plusieurs formulaires de ticket, ajoutez le paramètre d’URL &ticket_form_id=FORM_ID à la fin de la valeur href du snippet HTML. Dans le paramètre, remplacez FORM_ID par l’ID de votre formulaire de ticket. Exemple : 
    <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>

    Le formulaire de ticket doit être visible par les utilisateurs finaux. Pour vérifier ou modifier la visibilité d’un formulaire de ticket, consultez Création de formulaires de ticket pour différents types de demandes.

  • Passez en revue l’élément <div class="article-votes"> de votre modèle. Il devrait ressembler à ce qui suit : 
    <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>
  • Si vous mettez le thème actif de votre centre d’aide, cliquez sur Publier. Sinon, cliquez sur Enregistrer.

Tâche 5 : ajout de JavaScript personnalisé

Ajoutez du code JavaScript pour afficher le message en cas de vote contre quand un utilisateur vote contre un article.

Pour ajouter le code JavaScript personnalisé à votre thème
  1. Dans Guide, ouvrez l’éditeur de code pour le thème.
  2. Cliquez sur script.js.
  3. Collez ce qui suit à la fin du fichier : 
    // 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";
        }
      });
    });
  }
});

    Quand un utilisateur clique sur le bouton de vote Non, le code JavaScript affiche le message en cas de vote contre que vous avez ajouté dans Mise à jour du modèle de la page Article. Si l’utilisateur réinitialise son vote ou change d’avis et clique sur le bouton Oui, le code JavaScript masque à nouveau le message.

  4. Si vous mettez le thème actif de votre centre d’aide, cliquez sur Publier. Sinon, cliquez sur Enregistrer.

Tâche 6 : test de vos modifications

Testez votre nouvelle fonctionnalité pour vous assurer qu’elle fonctionne comme prévu.

Pour tester vos modifications
  1. Dans Guide, ouvrez l’éditeur de code pour le thème.
  2. Cliquez sur Aperçu.
  3. Dans la fenêtre d’aperçu, pour le rôle pour l’aperçu, sélectionnez Utilisateur final.
  4. Allez à un article de votre centre d’aide. En bas de l’article, cliquez sur le bouton de vote Non sous Cet article vous a-t-il été utile ?.

    Un court message contenant un lien Merci de nous dire pourquoi devrait s’afficher.

  5. Cliquez sur le lien Merci de nous dire pourquoi.

    Le lien devrait ouvrir une page Nouvelle demande contenant le formulaire de ticket. Le champ URL de l’article d’aide du formulaire de ticket devrait contenir l’URL pour l’article du centre d’aide concerné.

    Si vous le souhaitez, vous pouvez envoyer le formulaire pour créer un ticket.

  6. Allez à un autre article de votre centre d’aide et cliquez sur le bouton de vote Non.
  7. Après l’affichage du message en cas de vote contre, cliquez sur le bouton de vote Oui. Le message en cas de vote contre devrait disparaître.
  8. Si vous n’avez pas apporté ces modifications au thème actif de votre centre d’aide et que vous êtes prêt à les lancer, vous pouvez définir le thème personnalisé comme thème actif. Consultez Modification du thème actif de votre centre d’aide.
Réalisé par Zendesk