Mon édition

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

Vous pouvez facilement personnaliser l’apparence du centre d’aide à l’aide de JavaScript et jQuery. Ce guide est destiné à vous aider à modifier l’aspect de votre centre d’aide pour l’adapter à vos besoins et à votre marque.

jQuery n’est pas fourni par défaut. Vous devez importer une bibliothèque jQuery si vous voulez utiliser des déclarations jQuery dans un thème au lieu de JavaScript. Pour en savoir plus, consultez Importation ou mise à niveau de jQuery.

Remarque – L’édition Professional, qui comprend des options de modification de code, est proposée aux utilisateurs ayant choisi la version d’essai, mais s’ils achètent une édition Team, ils ne peuvent plus accéder à cette fonctionnalité.
Pour accéder au code JavaScript et le modifier dans votre centre d’aide, consultez Personnalisation du code CSS ou JavaScript.

Vous pouvez aussi personnaliser votre centre d’aide en utilisant le langage de création de modèles du centre d’aide ou CSS :

  • Modèles du centre d’aide - Référence
  • Guide des modèles du centre d’aide
  • Guide CSS du centre d’aide

Liste de recettes

Nous continuerons d’ajouter plus de « recettes », mais cette liste ne sera jamais exhaustive. Le nombre de choses que vous pouvez réaliser avec JavaScript n’a pour limite que votre imagination. Publiez vos recettes dans la section des commentaires et nous les ajouterons à ce guide.

  • Comment modifier le texte du lien Mes activités
  • Comment masquer les champs personnalisés dans la barre latérale du ticket dans Mes activités
  • Comment renommer les libellés de sujet et de description du formulaire de demande
  • Comment préremplir les champs des formulaires de ticket personnalisés
  • Comment modifier l’ordre des champs personnalisés dans le formulaire de demande
  • Comment ajouter des en-têtes au formulaire de demande
  • Comment masquer une langue dans la liste déroulante des langues
  • Comment remplacer des chaînes de texte dans le sélecteur de langue par des icônes de drapeau
  • Comment masquer la communauté en fonction de la langue sélectionnée
Remarque – Quand vous modifiez les modèles de page, CSS ou JavaScript pour un thème standard ou quand vous développez votre propre thème, il est enregistré en tant que thème personnalisé. Les recettes qui nécessitent des thèmes personnalisés ne sont pas pris en charge par Zendesk et ne sont pas mis à jour automatiquement quand de nouvelles fonctionnalités ou de nouveaux thèmes sont publiés (consultez À propos des thèmes standards et personnalisés dans le centre d’aide).

Comment modifier le texte du lien Mes activités

Ajoutez la classe « Mes activités » au modèle header.hbs :

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

Ajoutez la déclaration jQuery suivante à la fonction $(document).ready(function() dans le modèle JavaScript :

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

Comment masquer les champs personnalisés dans la barre latérale du ticket dans Mes activités

Vous pouvez utiliser JavaScript pour masquer les champs personnalisés dans la barre latérale du ticket à la page Mes activités. Vous sélectionnez les champs personnalisés en fonction de leurs libellés. Par exemple, si vous avez un champ personnalisé intitulé « Member rewards », vous pouvez masquer le champ si son libellé contient « Member » ou « rewards » ou « Member rewards ».

Ajoutez la fonction jQuery suivante au fichier 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
}});

Comment renommer les libellés de sujet et de description du formulaire de demande

Ajoutez les déclarations jQuery suivantes à la fonction $(document).ready(function() dans le modèle JavaScript :

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

Comment préremplir les champs des formulaires de ticket personnalisés

Remarque – Seules certaines éditions prennent en charge plusieurs formulaires de ticket. Pour une liste des formulaires de ticket et des informations générales au sujet de leur fonctionnement, consultez Création de formulaires de ticket pour différents types de demandes.

Supposons que vous utilisez un formulaire de ticket personnalisé dans votre centre d’aide pour permettre aux utilisateurs d’enregistrer les produits. Vous pouvez détecter le formulaire et préremplir ses champs quand un utilisateur l’ouvre dans le centre d’aide.

Vous aurez besoin de l’ID du formulaire, qui se trouve dans l’URL du formulaire dans votre centre d’aide. Consultez cet exemple.

L’exemple jQuery suivant préremplit le champ de sujet avec « Product registration » et le champ de description avec « This is a new product registration ». Ajoutez les déclarations à la fonction $(document).ready(function() dans le modèle 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"
}

Comment modifier l’ordre des champs personnalisés dans le formulaire de demande

Vous aurez besoin des ID des champs personnalisés, qui se trouvent dans l’interface Zendesk Support. Consultez cet exemple.

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());

Comment ajouter des en-têtes au formulaire de demande

Ajoutez les déclarations jQuery suivantes à la fonction $(document).ready(function() dans le modèle 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>');

Comment masquer une langue dans la liste déroulante des langues

Masquer une langue dans le sélecteur de langue peut être utile si le contenu dans cette langue n’est pas prêt à être publié. Ajoutez la déclaration jQuery suivante à la fonction $(document).ready(function() dans le modèle JavaScript :

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

Comment remplacer des chaînes de texte dans le sélecteur de langue par des icônes de drapeau

Par exemple, si votre centre d’aide fournit du contenu en anglais américain et en allemand, vous pouvez afficher les drapeaux de ces pays au lieu de « U.S. English » et « Deutsch » dans le sélecteur de langue. Ajoutez la déclaration jQuery suivante à la fonction $(document).ready(function() dans le modèle 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">');
});

Comment masquer la communauté en fonction de la langue sélectionnée

Ajoutez la déclaration jQuery suivante à la fonction $(document).ready(function() dans le modèle JavaScript :

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