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.
Vous pouvez aussi personnaliser votre centre d’aide en utilisant le langage de création de modèles du centre d’aide ou CSS :
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
- Comment empêcher l’indexage des articles par les moteurs de recherche
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
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();
}Comment empêcher l’indexage des articles par les moteurs de recherche
Une méta-balise noindex dit aux moteurs de recherche de ne pas inclure les pages spécifiques à leurs index. Pour ajouter une méta-balise noindex dynamiquement à des articles spécifiques, ajoutez la fonction suivante au fichier 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);
}
}
})();