JavaScript-Rezeptbuch für das Help Center

Suite

Growth, Professional, Enterprise oder Enterprise Plus

Support mit

Guide, alle Pläne

Sie können das Erscheinungsbild Ihres Help Centers mit JavaScript und jQuery ganz einfach anpassen. Dieses Rezeptbuch soll Ihnen dabei helfen, dem Help Center das gewünschte Aussehen zu verleihen.

jQuery ist nicht standardmäßig verfügbar. Sie müssen eine jQuery-Bibliothek importieren, wenn Sie in einem Design jQuery-Anweisungen anstelle von einfachem JavaScript verwenden möchten. Weitere Informationen finden Sie unter Importieren oder Upgraden von jQuery.

Hinweis: Testbenutzer verwenden den Professional-Plan, bei dem der Code bearbeitet werden kann. Wenn sie sich nach Ablauf des Testzeitraums aber für Suite Team entscheiden, haben sie keinen Zugriff auf diese Funktion mehr.

Weitere Informationen zum Zugreifen auf und Bearbeiten von JavaScript im Help Center finden Sie unter Anpassen von CSS oder JavaScript.

Sie können das Help Center weiterhin anpassen, indem Sie die Help-Center-Vorlagensprache oder CSS verwenden:

• Referenz für Help-Center-Vorlagen
• Vorlagen-Rezeptbuch für das Help Center
• CSS-Rezeptbuch für das Help Center

Rezeptliste

Mit der Zeit werden wir weitere Rezepte hinzufügen, aber die Optionen sind endlos: Mit JavaScript sind Ihrer Fantasie keine Grenzen gesetzt. Bitte posten Sie Ihre Rezepte im Abschnitt „Kommentare“ und wir fügen Sie diesem Rezeptbuch hinzu.

• Ändern des Texts für den Link „Meine Aktivitäten“
• Ausblenden angepasster Felder in der Ticketseitenleiste auf der Seite „Meine Aktivitäten“
• Umbenennen der Beschriftungen „Betreff“ und „Beschreibung“ im Anfrageformular.
• Automatisches Ausfüllen der Felder in angepassten Ticketformularen
• Ändern der Reihenfolge der angepassten Felder im Anfrageformular
• Hinzufügen von Überschriften zum Anfrageformular
• Ausblenden einer Sprache im Dropdownmenü für Sprachen
• Ersetzen von Textzeichenfolgen in der Sprachauswahl durch Flaggensymbole
• Ausblenden der Community basierend auf der gewählten Sprache
• Verhindern, dass Beiträge von Suchmaschinen indexiert werden

Hinweis: Wenn Sie Seitenvorlagen, CSS oder JavaScript für ein Standarddesign bearbeiten oder ein eigenes Design entwickeln, wird das Resultat als angepasstes Design gespeichert. Rezepte, die angepasste Designs benötigen, werden nicht von Zendesk unterstützt und bei der Einführung neuer Funktionen oder Designs nicht automatisch aktualisiert. Weitere Informationen finden Sie unter Standarddesign und angepasste Designs im Help Center.

Ändern des Texts für den Link „Meine Aktivitäten“

Fügen Sie der Vorlage „header.hbs“ die Klasse „my-activities“ hinzu:

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

Fügen Sie die folgende jQuery-Anweisung zur Funktion $(document).ready(function() in der JavaScript-Vorlage hinzu:

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

Ausblenden angepasster Felder in der Ticketseitenleiste auf der Seite „Meine Aktivitäten“

Mit JavaScript können Sie angepasste Felder in der Ticketseitenleiste auf der Seite „Meine Aktivitäten“ ausblenden. Die angepassten Felder werden anhand ihres Labels ausgewählt. Wenn das Label eines angepassten Felds beispielsweise „Member rewards“ lautet, können Sie das Feld ausblenden, wenn das Label „Member“ oder „rewards“ oder „Member rewards“ enthält.

Fügen Sie die folgende jQuery-Funktion in die Datei script.js ein:

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

Umbenennen der Beschriftungen „Betreff“ und „Beschreibung“ im Anfrageformular.

Fügen Sie die folgenden jQuery-Anweisungen zur Funktion $(document).ready(function() in der JavaScript-Vorlage hinzu:

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

Automatisches Ausfüllen der Felder in angepassten Ticketformularen

Hinweis: Mehrere Ticketformulare werden nur bei bestimmten Plänen unterstützt. Eine Liste der Ticketformulare mit allgemeinen Informationen zu ihrer Funktionsweise finden Sie unter Erstellen mehrerer Ticketformulare für unterschiedliche Arten von Anfragen.

Angenommen, Sie verwenden ein angepasstes Ticketformular im Help Center, damit Benutzer Produkte registrieren können. Sie können die Felder des Formulars automatisch ausfüllen lassen, wenn ein Benutzer das Formular im Help Center öffnet.

Hierzu benötigen Sie die ID des Ticketformulars, die in dessen URL im Help Center zu finden ist. Hier ein Beispiel.

Das folgende jQuery-Beispiel bewirkt, dass im Betreffsfeld automatisch das Wort „Product Registration“ und im Beschreibungsfeld der Ausdruck „There is a new product registration“ erscheint. Fügen Sie die Anweisungen zur Funktion $(document).ready(function() in der JavaScript-Vorlage hinzu:

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"
}

Ändern der Reihenfolge der angepassten Felder im Anfrageformular

Sie benötigen die IDs der angepassten Felder, die in der Zendesk Support-Oberfläche zu finden sind. Hier ein Beispiel.

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

Hinzufügen von Überschriften zum Anfrageformular

Fügen Sie die folgenden jQuery-Anweisungen zur Funktion $(document).ready(function() in der JavaScript-Vorlage hinzu:

 $('.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>');

Ausblenden einer Sprache im Dropdownmenü für Sprachen

Das Ausblenden einer Sprache in der Sprachenauswahl kann nützlich sein, wenn die Inhalte in der betreffenden Sprache noch nicht veröffentlichungsreif sind. Fügen Sie die folgende jQuery-Anweisung zur Funktion $(document).ready(function() in der JavaScript-Vorlage hinzu:

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

Ersetzen von Textzeichenfolgen in der Sprachauswahl durch Flaggensymbole

Wenn Ihr Help Center beispielsweise Inhalte in amerikanischer und deutscher Sprache aufweist, könnten Sie in der Sprachauswahl anstelle von „U.S. English“ und „Deutsch“ auch die entsprechenden Landesfahnen anzeigen. Fügen Sie die folgende jQuery-Anweisung zur Funktion $(document).ready(function() in der JavaScript-Vorlage hinzu:

$(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">');
});

Ausblenden der Community basierend auf der gewählten Sprache

Fügen Sie die folgende jQuery-Anweisung zur Funktion $(document).ready(function() in der JavaScript-Vorlage hinzu:

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

Verhindern, dass Beiträge von Suchmaschinen indexiert werden

Das Metatag noindex bewirkt, dass Suchmaschinen die betreffende Seite nicht in ihre Indexe aufnehmen. Um das Metag noindex dynamisch für bestimmte Beiträge hinzuzufügen, nehmen Sie die folgende Funktion in die Datei „script.js“ auf:

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