Welchen Plan habe ich?

Bei Suite Growth-Plänen und höher verfügbarBei allen Guide-Plänen verfügbar

Das Standarddesign „Copenhagen“ bietet Endbenutzern die Möglichkeit, Help-Center-Beiträge zu bewerten. In diesem Rezept bearbeiten Sie den Code des Designs so, dass eine Folgenachricht erscheint, wenn Beiträge Downvotes erhalten.

Die Downvote-Nachricht weist einen Link zur Seite „Neue Anfrage“ auf, die ein Ticketformular enthält. Dieses Ticketformular kann der Benutzer ausfüllen, um Feedback zu dem Beitrag zu hinterlassen. Es enthält ein angepasstes Ticketfeld, in dem die URL des Beitrags erfasst wird. Beim Einreichen des Formulars wird in Zendesk Support ein Ticket erstellt.

Überblick über dieses Rezept

Dieses Rezept kann nur von einem Zendesk Support-Administrator ausgeführt werden. Es umfasst die folgenden Aufgaben:
  • Aufgabe 1: Anonyme Abstimmung aktivieren
  • Aufgabe 2: Angepasstes Ticketfeld für die Beitrags-URL erstellen
  • Aufgabe 3: Angepasstes CSS hinzufügen
  • Aufgabe 4: Vorlage für die Beitragsseite aktualisieren
  • Aufgabe 5: Angepasstes JavaScript hinzufügen
  • Aufgabe 6: Änderungen testen

Bei diesem Rezept wird davon ausgegangen, dass Sie das Standarddesign „Copenhagen“ bearbeiten. Wenn Sie ein anderes Design bearbeiten oder ähnliche Änderungen an einem angepassten Design „Copenhagen“ vornehmen möchten, müssen Sie die Codebeispiele entsprechend anpassen.

Außerdem wird in diesem Rezept ein vorausgefülltes Ticketformular verwendet. Um vorausgefüllte Ticketformulare zu nutzen, muss das verwendete Design auf Version 2 der Templating API basieren. Wie Sie die Version Ihres Designs überprüfen, erfahren Sie im Beitrag Übersicht über die Templating-Versionen von Guide.

Hinweis: Dieses Rezept erfordert die Bearbeitung von CSS, Seitenvorlagen und JavaScript. Wenn Sie ein Standarddesign bearbeiten, wird das Resultat als angepasstes Design gespeichert. Angepasste Designs werden nicht von Zendesk unterstützt und bei der Einführung neuer Funktionen nicht automatisch aktualisiert. Weitere Informationen finden Sie unter Standarddesigns und angepasste Designs im Help Center.

Aufgabe 1: Anonyme Abstimmung aktivieren

Wenn Ihr Help Center für anonyme Besucher sichtbar ist, können Sie die anonyme Abstimmung als optionalen Schritt aktivieren. Mit der anonymen Abstimmung können Endbenutzer Help-Center-Beiträge bewerten, ohne sich anzumelden.

Aktivieren Sie die anonyme Abstimmung wie im Beitrag Aktivieren der Einstellung zum anonymen Abstimmen über Beiträge beschrieben. Kehren Sie anschließend zu diesem Beitrag zurück.

Aufgabe 2: Angepasstes Ticketfeld für die Beitrags-URL erstellen

Erstellen Sie zunächst ein angepasstes Ticketfeld für die Erfassung der URL des Help-Center-Beitrags.

So erstellen Sie ein angepasstes Ticketfeld für die Beitrags-URL
  1. Klicken Sie in der Seitenleiste des Admin Centers auf Objekte und Regeln und dann auf Tickets > Felder.
  2. Klicken Sie auf Feld hinzufügen.
  3. Wählen Sie den Feldtyp Text aus.

  4. Geben Sie in das Feld Anzeigename den Namen Help Center URL ein.
  5. Klicken Sie unter Berechtigungen auf Kunden können bearbeiten.
  6. Geben Sie unter Kunden im Feld Für Kunden sichtbarer Titel den Namen URL Hilfebeitrag ein.

  7. Klicken Sie auf Speichern.

    Wenn in Ihrem Konto nur ein Ticketformular verwendet wird, erscheint das neue Feld automatisch in Ihrem Ticketformular. Wenn Sie mehrere Ticketformulare verwenden, müssen Sie das Ticketfeld manuell zu den gewünschten Ticketformularen hinzufügen.

  8. Kopieren Sie auf der Seite Felder die Feld-ID des Felds URL Hilfebeitrag. Sie benötigen die ID für einen späteren Schritt in diesem Rezept.

Aufgabe 3: Angepasstes CSS hinzufügen

Fügen Sie Ihrem Design als Nächstes angepasstes CSS für die Downvote-Nachricht hinzu.

So fügen Sie dem Design angepasstes CSS hinzu
  1. Öffnen Sie in Guide den Code-Editor für das Design. Eine Anleitung hierzu finden Sie unter Bearbeiten eines Help-Center-Designs.
  2. Klicken Sie auf style.css.
  3. Fügen Sie am Ende der Datei den folgenden Abschnitt ein: 
    /* ---- Downvote message ----------- */
.downvote-message {
  display: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}

    Der Code fügt CSS-Regeln für eine Klasse .downvote-message hinzu. Diese Klasse dient dazu, die Downvote-Nachricht zu verbergen, bis ein Benutzer einen Beitrag downvotet. Außerdem formatiert sie die angezeigte Nachricht.

  4. Wenn Sie das Live-Design Ihres Help Centers aktualisieren, klicken Sie auf Veröffentlichen. Andernfalls klicken Sie auf Speichern.

Aufgabe 4: Vorlage für die Beitragsseite aktualisieren

Jetzt fügen Sie der Vorlage für die Beitragsseite des Designs den HTML-Code für die Downvote-Nachricht hinzu.

So aktualisieren Sie die Vorlage für die Beitragsseite
  1. Öffnen Sie in Guide den Code-Editor für das Design.
  2. Klicken Sie auf article_page.hbs.
  3. Fügen Sie vor dem Abschluss-Tag des Abschnitts <div class="article-votes"> das folgende HTML-Snippet ein: 
    <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>
    Ersetzen Sie im Snippet:
    • CUSTOM_FIELD_ID durch die Feld-ID des Felds URL Hilfebeitrag aus dem Schritt Angepasstes Ticketfeld für die Beitrags-URL erstellen
    • HTTPS://SUBDOMAIN.ZENDESK.COM durch die Basis-URL Ihres Help Centers
    Der HTML-Code fügt unter den Abstimmungsschaltflächen in jedem Beitrag eine Downvote-Nachricht ein. Das übergeordnete div-Elemente der Nachricht verwendet die Klasse downvote-message, die Sie im Schritt Angepasstes Ticketfeld für die Beitrags-URL erstellen hinzugefügt haben. Das CSS dieser Klasse verbirgt die Nachricht vor allen Benutzern. Im weiteren Verlauf dieses Rezepts werden Sie angepasstes JavaScript hinzufügen, das die Nachricht einblendet, wenn ein Benutzer einen Beitrag downvotet.

    Diese Nachricht weist einen Link zur Seite „Neue Anfrage“ auf, die ein Ticketformular enthält. Der Link weist einen URL-Parameter auf, der dazu dient, die URL des aktuellen Beitrags in das Feld URL Hilfebeitrag des Formulars zu übernehmen. Weitere Informationen zum Vorausfüllen von Ticketformularen finden Sie unter Erstellen von Ticketformularen mit vorausgefüllten Feldern.

  • Wenn in Ihrem Konto nur ein Ticketformular verwendet wird, fahren Sie mit dem nächsten Schritt fort. Wenn in Ihrem Konto mehrere Ticketformulare verwendet werden, hängen Sie den URL-Parameter &ticket_form_id=FORM_ID an den href-Wert des HTML-Snippets an. Ersetzen Sie in diesem Parameter FORM_ID durch die ID Ihres Ticketformulars. Beispiel: 
    <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>

    Das Ticketformular muss für Endbenutzer sichtbar sein. Um die Sichtbarkeit eines Ticketformulars zu prüfen oder zu ändern, lesen Sie die Informationen unter Erstellen mehrerer Ticketformulare für unterschiedliche Arten von Anfragen.

  • Überprüfen Sie das Element <div class="article-votes"> Ihrer Vorlage. Es sollte ähnlich wie in diesem Beispiel aussehen: 
    <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>
  • Wenn Sie das Live-Design Ihres Help Centers aktualisieren, klicken Sie auf Veröffentlichen. Andernfalls klicken Sie auf Speichern.

Aufgabe 5: Angepasstes JavaScript hinzufügen

Fügen Sie JavaScript hinzu, der die Downvote-Nachricht anzeigt, wenn ein Benutzer einen Beitrag downvotet.

So fügen Sie dem Design das angepasste JavaScript hinzu
  1. Öffnen Sie in Guide den Code-Editor für das Design.
  2. Klicken Sie auf script.js.
  3. Fügen Sie am Ende der Datei den folgenden Abschnitt ein: 
    // 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";
        }
      });
    });
  }
});

    Wenn ein Benutzer auf die Abstimmungsschaltfläche Nein klickt, zeigt das JavaScript die Downvote-Nachricht an, die Sie im Schritt Vorlage für die Beitragsseite aktualisieren hinzugefügt haben. Wenn der Benutzer sein Voting zurückzieht oder in Ja ändert, blendet das JavaScript die Nachricht wieder aus.

  4. Wenn Sie das Live-Design Ihres Help Centers aktualisieren, klicken Sie auf Veröffentlichen. Andernfalls klicken Sie auf Speichern.

Aufgabe 6: Änderungen testen

Prüfen Sie, ob sich Ihre neue Abstimmungsfunktion wie vorgesehen verhält.

So testen Sie Ihre Änderungen
  1. Öffnen Sie in Guide den Code-Editor für das Design.
  2. Klicken Sie auf Vorschau.
  3. Klicken Sie im Vorschaufenster unter Rolle in Vorschau auf Endbenutzer.
  4. Rufen Sie einen Beitrag in Ihrem Help Center auf. Klicken Sie am Ende des Beitrags unter War dieser Beitrag hilfreich auf Nein.

    Daraufhin sollte eine kurze Meldung mit dem Link Bitte sagen Sie uns warum angezeigt werden.

  5. Klicken Sie auf den Link Bitte sagen Sie uns warum.

    Jetzt sollte eine Seite „Neue Anfrage“ mit dem Ticketformular erscheinen. Das Feld „URL Hilfebeitrag“ dieses Ticketformulars sollte die URL des betreffenden Help-Center-Beitrags enthalten.

    Wenn Sie möchten, können Sie das Formular absenden, um ein Testticket zu erstellen.

  6. Rufen Sie einen weiteren Beitrag in Ihrem Help Center auf und klicken Sie auf die Abstimmungsschaltfläche Nein.
  7. Nachdem die Downvote-Nachricht eingeblendet wurde, klicken Sie auf die Abstimmungsschaltfläche Ja. Die Downvote-Nachricht sollte ausgeblendet werden.
  8. Wenn Sie die Änderungen nicht im Live-Design Ihres Help Centers vorgenommen haben, können Sie das angepasste Thema als Live-Thema einrichten, um sie zu übernehmen. Weitere Informationen finden Sie unter Ändern des Live-Designs Ihres Help Centers.
Powered by Zendesk