English (US)
  1. Zendesk help
  2. Guide
  3. Using Guide for help center
  4. Self-service best practices and recipes

Guide recipe: Requesting feedback for article downvotes

James Rodewig
  • Edited
Zendesk Documentation Team

What's my plan?

Suite Growth, Professional, Enterprise, and Enterprise Plus专业enterprise plans

The standard Copenhagen theme lets end users vote on help center articles. In this recipe, you'll edit the theme's code to display a follow-up message when a user downvotes an article.

The downvote message includes a link to a New Request page that contains a ticket form. A user can fill out the ticket form to leave feedback for the article. The form uses a custom ticket field to capture the article's URL. When submitted, the form creates a ticket in Zendesk Support.

About this recipe

You must be a Zendesk Support admin to complete this recipe. The recipe involves the following tasks:

The recipe assumes you're editing the standard Copenhagen theme. If you want to edit another theme or make similar changes to a customized Copenhagen theme, you may need to change the code examples.

The recipe also uses a pre-filled ticket form. Pre-filled ticket forms require a theme using Templating API version 2. To check your theme's version, seeAbout Guide templating versions.

Note:This recipe requires editing CSS, page templates, and JavaScript. When you edit a standard theme, it is saved as acustom theme. Custom themes arenotsupported by Zendesk and arenotautomatically updated when new features are released. SeeAbout standard themes and custom themes in your help center.

Task 1: Enabling anonymous voting

If your help center is visible to anonymous visitors, you can enable anonymous voting as an optional step. Anonymous voting lets end users vote on help center articles without signing in.

To enable anonymous voting, follow the instructions inEnabling users to vote on knowledge base articles without signing in. Then return to this article.

Task 2: Creating a custom ticket field for the article URL

To start, create a custom ticket field to capture help center article URLs.

To create a custom ticket field for the article URL
  1. InAdmin Center, clickObjects and rulesin the sidebar, then selectTickets > Fields.
  2. ClickAdd field.
  3. Select theTextfield type.

  4. EnterHelp Article URLas theDisplay name.
  5. UnderPermissions, selectCustomers can edit.
  6. UnderCustomers, enterHelp Article URLas theTitle shown to customers.

  7. ClickSave.

    If your account uses a single ticket form, the new field automatically appears in your ticket form. If you use multiple ticket forms, you have to manually add the field to any ticket forms you'd like to include it in.

  8. On theFieldspage, copy the Field ID for theHelp Article URLfield. You'll use the ID later in this recipe.

Task 3: Adding custom CSS

接下来,添加自定义CSS downvote消息your theme.

To add the custom CSS to the theme
  1. In Guide, open the code editor for the theme. For instructions, seeEditing your Help Center theme.
  2. Clickstyle.css.
  3. Paste the following at the bottom of the file:
    /* ---- Downvote message ----------- */ .downvote-message { display: none; border: 1px solid #ddd; border-radius: 4px; text-align: center; }

    The code adds CSS rules for a.downvote-messageclass. You'll use the class to hide the downvote message until a user downvotes an article. The class also styles the message when it's displayed.

  4. If you're updating your help center's live theme, clickPublish. Otherwise, clickSave.

Task 4: Updating the Article Page template

Next, add HTML for the downvote message to the theme's Article Page template.

To update the Article Page template
  1. In Guide, open the code editor for the theme.
  2. Clickarticle_page.hbs.
  3. Add the following HTML snippet before the closing tag of
    :
     
    We're sorry to hear that.
     
    Please tell us why.
    In the snippet, replace:
    The HTML adds a downvote message below the voting buttons of each article. The message's parentdivuses thedownvote-message类中添加Creating a custom ticket field for the article URL. This class's CSS hides the message from all users. Later in the recipe, you'll add custom JavaScript to display the message when a user leaves a negative vote.

    The message contains a link to a New Request page containing a ticket form. This link uses a URL parameter to pre-fill the form'sHelp Article URLfield with the current article URL. To learn more about pre-filling ticket forms, seeCreating pre-filled ticket forms.

  4. If your account uses a single ticket form, skip to the next step. If your account has multiple ticket forms, add the&ticket_form_id=FORM_IDURL parameter to the end of the HTML snippet'shrefvalue. In the parameter, replaceFORM_IDwith your ticket form's ID. Example:
     
    We're sorry to hear that.
     
    Please tell us why.

    The ticket form must be visible to end users. To check or change a ticket form's visibility, seeCreating multiple ticket forms to support different request types.

  5. Review your template's
    element. It should look similar to this:
     {{t 'was_this_article_helpful'}} 
     {{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"}} 
      {{vote 'label' class='article-vote-label'}}  
     
    We're sorry to hear that.
     
    Please tell us why.
  6. If you're updating your help center's live theme, clickPublish. Otherwise, clickSave.

Task 5: Adding custom JavaScript

Add some JavaScript to display the downvote message when a user downvotes an article.

To add the custom JavaScript to the theme
  1. In Guide, open the code editor for the theme.
  2. Clickscript.js.
  3. Paste the following at the bottom of the file:
    // 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"; } }); }); } });

    When a user clicks theNovote button, the JavaScript displays the downvote message you added inUpdating the article page template. If the user resets their vote or changes their vote toYes, the JavaScript hides the message again.

  4. If you're updating your help center's live theme, clickPublish. Otherwise, clickSave.

Task 6: Testing your changes

Test out your new voting functionality to ensure it works as intended.

To test your changes
  1. In Guide, open the code editor for the theme.
  2. ClickPreview.
  3. In the Preview window, select aPreview roleofEnd user.
  4. Navigate to an article in your help center. At the bottom of the article, click theNovote button underWas this article helpful?.

    A short message containing aPlease tell us whylink should appear.

  5. Click thePlease tell us whylink.

    The link should open a New Request page containing the ticket form. The ticket form's Help Article URL field should contain the URL for the related help center article.

    If wanted, you can submit the form to create a test ticket.

  6. Navigate to another article in your help center and click theNovote button.
  7. After the downvote message appears, click theYesvote button. The downvote message should disappear.
  8. If you didn't make the changes to your help center's live theme and are ready to launch them, you can set the customized theme as your live theme. SeeChanging the live theme of your help center.
    Return to top

    40 Comments

    • Michael Lorch

      James RodewigThank you for this great post! I just have one question, in this process, do we need to manually add thehelp article URLfor every single article we want to get feedback on or will doing this allow every article that gets a downvote have a feedback option?

      CCandriy ivakhov

      0
    • James Rodewig
      • Edited
      Zendesk Documentation Team

      Hi Michael,

      Thanks for the comment.

      do we need to manually add thehelp article URLfor every single article we want to get feedback on or will doing this allow every article that gets a downvote have a feedback option?


      If you follow the steps in the article, you'll update theArticle Page template.This will allow every article that gets a downvote to have a feedback option. You don't need to update every article.

      I hope that helps. Best of luck with your updates!

      0
    • Lucas Zhu

      HelloJames Rodewig, I followed exactly the steps as listed, finding below issues:

      1. I input only one form id in Task 4 step 4 and used the new field in only that form, however, in the request submission stage, I can choose multi formats as shown below
      2. The help article URL is not a required field, where can I set it as required when submission? I mean if this can be neglected, then customer can still submit an empty value into zendesk.
      0
    • James Rodewig
      • Edited
      Zendesk Documentation Team

      HiLucas Zhu. Thanks for the feedback!

      1. This is the default behavior for multiple ticket forms. You can hide the form selection dropdown by adding the following CSS to your theme'sstyle.cssfile:

      .request_ticket_form_id { display: none; }

      2. You can make the Help Article URL field required by checkingRequired to submit a requestwhen you add the field in Task 2. This isn't recommended if you have a single ticket form as users may need to submit requests that aren't related to your help center.
      Please let me know if you run into any other issues. Thanks again!

      0
    • Lucas Zhu

      helloJames Rodewigthanks for the feedback, since this behavior will bring a ticket to zendesk support, is there anyway we can add a special tag for tickets like this so we will know how to set triggers on those tickets? Thank you.

      0
    • James Rodewig
      Zendesk Documentation Team

      HiLucas Zhu,

      You can create a trigger that checks tickets for a value in the customHelp article URLtext field. For more information about using custom ticket fields in triggers, see ourUsing custom ticket fields in business rules and viewsarticle. I hope that helps!

      0
    • Lucas Zhu

      hiJames Rodewigthanks for the reply, so actually we want to use single form but don't want to keep this field necessary when submitting tickets.

      In this way, if customers raised a ticket without entering the URL field, then we would not be able that ticket is coming from Guide by clicking downvotes. Is it possible to bring a tag by default if ticket is coming from this channel? Thanks.

      0
    • James Rodewig
      Zendesk Documentation Team

      HiLucas Zhu,

      There are a few different ways to do this. One of the simpler methods would be to hide theHelp article URLfield on the ticket form. This helps you ensure the the field only contains a value if the request originates from a Guide article. However, users will no longer be able to edit or change the field's value.

      To hide the field, add the following CSS to your theme'sstyle.cssfile. Replace CUSTOM_FIELD_ID with theHelp article URLfield's ID.

      .request_custom_fields_CUSTOM_FIELD_ID {
      display: none;
      }


      For example, if theHelp article URLfield's ID is 1234, the CSS rule would be:

      .request_custom_fields_1234 {
      display: none;
      }

      You can then create a trigger that checks tickets for a value in theHelp article URLfield as mentioned above.

      0
    • Lucas Zhu
      • Edited

      hiJames Rodewigwhen I add above code to hide the field, this field is nowhere to be found when submitting ticket, with this happening, the URL field is still having an empty value. As you have mentioned, there are a few different ways, is it possible to help us better identify that one ticket is coming from the Guide downvote action or bring directly the article URL into that field? Thank you.

      0
    • James Rodewig
      • Edited
      Zendesk Documentation Team

      HiLucas Zhu,


      It sounds like your form isn't pre-filling theHelp Article URLfield with the downvoted article URL. If that's the case, I recommend reviewing the steps inthis section of the article. In particular, ensure you replaced the custom field ID and and subdomain in thispre-fill parameter:

      ?tf_CUSTOM_FIELD_ID=HTTPS://SUBDOMAIN.ZENDESK.COM{{url}}


      The CSS rule I shared only hides thedisplayof the field on the ticket form. It won't affect the pre-filledHelp center articlevalue, which will still be captured in the ticket. However, it may be helpful to temporarily remove the CSS rule so you can more easily view the field value during testing.

      I hope that helps!

      0
    • Lucas Zhu

      hiJames Rodewigthis is the URL that directs me into submitting a ticket however, the field is not auto populated in ticket submitting stage or ticket finally in support.https://MyDomain1536085754.亚博zendesk.com/hc/en-us/requests/new?tf_10754933104020=HTTPS://MyDomain1536085754.ZENDESK.COM/hc/en-us/articles/360024277792-Welcome-to-your-Help-Center-&ticket_form_id=360000152491

      0
    • James Rodewig
      • Edited
      Zendesk Documentation Team

      HiLucas Zhu,

      I'm sorry to hear you're having trouble getting the custom field value auto-populated. If you haven't already,reach out to the Zendesk Customer Supportso they can help you troubleshoot the issue. While we can't support custom themes, you should be able to pre-populate fields in your forms if your theme uses Templating API version 2.

      As a workaround in the meantime, you can add the following snippet to the bottom of your theme'snew_request_page.hbsfile. Replace CUSTOM_FIELD_ID with theHelp article URLfield's ID.


      For example, if theHelp article URLfield's ID is 1234, the snippet would be:


      The snippet populates theHelp article URLfield with the URL of the previous article page. When you get ticket form pre-fills working, I recommend removing this script as it performs roughly the same task.

      0
    • Mateusz Gamroth

      HelloJames Rodewig! We love the way this works, but just have one issue with getting our ticket form to work. It just keeps displaying another one. We have the following code:

      Do we need to enable the ticket form to be editable by end users?

      0
    • James Rodewig
      • Edited
      Zendesk Documentation Team

      HiMateusz Gamroth!

      I'm glad to hear you like the recipe.

      Do we need to enable the ticket form to be editable by end users?


      Yes. The ticket form needs to be editable for end users. I'll update the tutorial to call this out. Thanks for the feedback!

      0
    • Mateusz Gamroth

      HelloJames Rodewig, thank you for your answer. Strangely enough we still can't get it to work.

      First of all it seems it does display the form now :) But lets people select another form.
      (Although I understand that can be hidden).

      Then it prompts us to select an organization - which is not in the ticket form, and even if it was it doesn't show the organization we want to use this for (North America)

      And lastly the Url field is also not displayed :(

      Hope you can help with the above issues, please find screenshots of our fields, form and the result below:


      0
    • Mateusz Gamroth

      HelloJames Rodewigwe got the form field to work! It was because we did not select Customer can edit in the field settings. Which is strange as we had set the preview mode to agent.

      Now we have one issue left which are the organizations - here we noticed strange behavior as I can see this organization field in preview mode but my colleague can't. Is there any reason for that?

      Could this be related to the Organizations I have set in my profile? I actually do have these in there. Is it possible to somehow default to North America as an organization and hide this field?

      Thanks a lot!

      0
    • James Rodewig
      Zendesk Documentation Team

      HiMateusz Gamroth,

      I'm glad to hear you got the form field working!

      我能看到这个组织在预览模式but my colleague can't. Is there any reason for that?

      The organization field only displays if a user belongs tomultiple organizations. Your colleague's user profile likely belongs to only one organization.

      Is it possible to somehow default to North America as an organization and hide this field?

      To change the field default, you canchange the default organization for the user.

      To hide the organization field on the ticket form, add the following CSS to your theme'sstyle.cssfile:

      .request_organization_id {
      display: none;
      }


      I hope that helps!

      0
    • Mateusz Gamroth

      Thanks a lot for all your helpJames Rodewig!

      0
    • Mateusz Gamroth

      HelloJames Rodewig! We got everything to work - nearly :D

      Everything works in the preview, but as soon as we click "Please tell us why" in the environment, the link shows up in the browser and we get thrown back to the dashboard. Tested for agents and admins.

      The ticket form never appears.

      Any idea what might be causing this?

      0
    • James Rodewig
      • Edited
      Zendesk Documentation Team

      HiMateusz Gamroth,

      By default, agents and admins can't use request forms to submit tickets. However, you canenable agents to access request forms. I hope that helps!

      0
    • Christina Hernandez

      I followed these instructions to the T, but the Help Article URL custom field doesn't show up on my form. Not sure why, can't figure it out. Please help!

      0
    • James Rodewig
      • Edited
      Zendesk Documentation Team

      HiChristina Hernandez,

      I'm sorry to hear you're having trouble.

      First, double-check that the ticket field hasCustomers can edit选择下Permissions. For instructions for updating the ticket field, seeEditing and managing your ticket fields.

      If the field has the right permissions but still doesn't appear on the ticket form, you can try the troubleshooting steps inWhy does my new ticket field not appear on my ticket form?.

      If you still can't get the field to appear, pleasereach out to the Zendesk Customer Supportso they can look into the specific issue for you.

      I hope that helps!

      1
    • Jan-Willem Rossée

      Hi James,

      thanks a great bunch for this awesome recipe! I'll definitely put this to good use in our HC.

      For those creating a new ticket form and have set up the time tracking app, remember to add the ticket fields:
      - time spent last update
      - total time spent
      to your newly created ticket form, or your agents will be going crazy because of a big red error message in the agents ticket workspace. Ask me how I know this ;-).

      - Jan

      1
    • Alex Hughes

      Is there a native Zendesk way to accomplish getting feedback from the form when there's a negative response, the same way Etsy and Slack do it in the screenshots below? We would love to not need to send a user to a different form to provide feedback.

      Etsy:https://help.etsy.com/hc/en-us/articles/115013328428-How-to-Contact-a-Shop?segment=shopping

      Slack:https://slack.com/help/articles/4405848563603-Download-a-list-of-members-in-your-workspace

      7
    • Antonio Maninha

      Hello,
      On step #8 it says:
      On theFieldspage, copy the Field ID for theHelp Article URLfield. You'll use the ID later in this recipe.
      Where do I find thatFIELDID, is that at the end of theHelp Article URL?
      Thank you!




      0
    • James Rodewig
      • Edited
      Zendesk Documentation Team

      Hi Tony,

      There's a column forField IDon theFieldspage.


      When you create theHelp Article URLfield, Zendesk will automatically send you to this page. Otherwise, you can find the page at the following URL:

      https://{your-subdomain}.zendesk.com/admin/objects-rules/tickets/ticket-fields

      In the URL, replace {your-subdomain} with your Zendesk subdomain.

      I hope that helps!

      1
    • Antonio Maninha

      Thank youJames Rodewig
      Really appreciate the help.
      Now going to try to get this add-on to work :)

      0
    • Antonio Maninha

      Quick question.
      I got it working!
      I do have another question, is there a way to have the ticket assigned to me when the form is submitted?

      Thank you!

      0
    • Antonio Maninha

      Alex Hughes
      Did you find an answer to your question on the feedback form?
      Thank you!

      0
    • Pedro Rodrigues
      Community Moderator

      HelloAntonio ManinhaandAlex Hughes, unfortunately there is no native way to have that kind of "close the loop" feedback workflow. It is possible to create one if your Guide plan allows you to customize your theme code, however.

      0

    Pleasesign into leave a comment.

    Related articles

    Powered by Zendesk