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.
Sie können das Help Center weiterhin anpassen, indem Sie die Help-Center-Vorlagensprache oder CSS verwenden:
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“
- 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
Ä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');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
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();
}
0 Kommentare
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.