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
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, see About Guide templating versions.
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 in Enabling 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.
- In Admin Center, click
Objects and rules in the sidebar, then select Tickets > Fields.
- Click Add field.
- Select the Text field type.
- Enter Help Article URL as the Display name.
- Under Permissions, select Customers can edit.
- Under Customers, enter Help Article URL as the Title shown
to customers.
- Click Save.
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.
- On the Fields page, copy the Field ID for the Help Article URL field. You'll use the ID later in this recipe.
Task 3: Adding custom CSS
Next, add custom CSS for the downvote message to your theme.
- In Guide, open the code editor for the theme. For instructions, see Editing your Help Center theme.
- Click style.css.
- 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-message
class. 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. - If you're updating your help center's live theme, click Publish. Otherwise, click Save.
Task 4: Updating the Article Page template
Next, add HTML for the downvote message to the theme's Article Page template.
- In Guide, open the code editor for the theme.
- Click article_page.hbs.
- Add the following HTML snippet before the closing tag of
<div class="article-votes">
:<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>
In the snippet, replace:The HTML adds a downvote message below the voting buttons of each article. The message's parent-
CUSTOM_FIELD_ID
with the Field ID for the Help Article URL field you created in Creating a custom ticket field for the article URL -
HTTPS://SUBDOMAIN.ZENDESK.COM
with the base URL for your help center
div
uses thedownvote-message
class you added in 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's Help Article URL field with the current article URL. To learn more about pre-filling ticket forms, see Creating pre-filled ticket forms.
-
- 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_ID
URL parameter to the end of the HTML snippet'shref
value. In the parameter, replaceFORM_ID
with your ticket form's ID. Example:<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>
The ticket form must be visible to end users. To check or change a ticket form's visibility, see Creating multiple ticket forms to support different request types.
- Review your template's
<div class="article-votes">
element. It should look similar to this:<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>
- If you're updating your help center's live theme, click Publish. Otherwise, click Save.
Task 5: Adding custom JavaScript
Add some JavaScript to display the downvote message when a user downvotes an article.
- In Guide, open the code editor for the theme.
- Click script.js.
- 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 the No vote button, the JavaScript displays the downvote message you added in Updating the article page template. If the user resets their vote or changes their vote to Yes, the JavaScript hides the message again.
- If you're updating your help center's live theme, click Publish. Otherwise, click Save.
Task 6: Testing your changes
Test out your new voting functionality to ensure it works as intended.
- In Guide, open the code editor for the theme.
- Click Preview.
- In the Preview window, select a Preview role of End user and a Template of Article page.
- Navigate to an article in your help center. At the bottom of the article,
click the No vote button under Was this article helpful?.
A short message containing a Please tell us why link should appear.
- Click the Please tell us why link.
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.
- Navigate to another article in your help center and click the No vote button.
- After the downvote message appears, click the Yes vote button. The downvote message should disappear.
- 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. See Changing the live theme of your help center.
49 comments
Michael Lorch
James Rodewig Thank you for this great post! I just have one question, in this process, do we need to manually add the help article URL for every single article we want to get feedback on or will doing this allow every article that gets a downvote have a feedback option?
CC Andriy Ivakhov
0
James Rodewig
Hi Michael,
Thanks for the comment.
If you follow the steps in the article, you'll update the Article 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
Hello James Rodewig, I followed exactly the steps as listed, finding below issues:
0
James Rodewig
Hi Lucas 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's style.css file:
2. You can make the Help Article URL field required by checking Required to submit a request when 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
hello James Rodewig thanks 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
Hi Lucas Zhu,
You can create a trigger that checks tickets for a value in the custom Help article URL text field. For more information about using custom ticket fields in triggers, see our Using custom ticket fields in business rules and views article. I hope that helps!
0
Lucas Zhu
hi James 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
Hi Lucas Zhu,
There are a few different ways to do this. One of the simpler methods would be to hide the Help article URL field 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's style.css file. Replace CUSTOM_FIELD_ID with the Help article URL field's ID.
For example, if the Help article URL field's ID is 1234, the CSS rule would be:
You can then create a trigger that checks tickets for a value in the Help article URL field as mentioned above.
0
Lucas Zhu
hi James Rodewig when 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
Hi Lucas Zhu,
It sounds like your form isn't pre-filling the Help Article URL field with the downvoted article URL. If that's the case, I recommend reviewing the steps in this section of the article. In particular, ensure you replaced the custom field ID and and subdomain in this pre-fill parameter:
The CSS rule I shared only hides the display of the field on the ticket form. It won't affect the pre-filled Help center article value, 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
hi James Rodewig this 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
Hi Lucas 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 Support so 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's new_request_page.hbs file. Replace CUSTOM_FIELD_ID with the Help article URL field's ID.
For example, if the Help article URL field's ID is 1234, the snippet would be:
The snippet populates the Help article URL field 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
Hello James 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
Hi Mateusz Gamroth!
I'm glad to hear you like the recipe.
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
Hello James 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
Hello James Rodewig we 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
Hi Mateusz Gamroth,
I'm glad to hear you got the form field working!
The organization field only displays if a user belongs to multiple organizations. Your colleague's user profile likely belongs to only one organization.
To change the field default, you can change the default organization for the user.
To hide the organization field on the ticket form, add the following CSS to your theme's style.css file:
I hope that helps!
0
Mateusz Gamroth
Thanks a lot for all your help James Rodewig!
0
Mateusz Gamroth
Hello James 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
Hi Mateusz Gamroth,
By default, agents and admins can't use request forms to submit tickets. However, you can enable 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
Hi Christina hernandez,
I'm sorry to hear you're having trouble.
First, double-check that the ticket field has Customers can edit selected under Permissions. For instructions for updating the ticket field, see Editing 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 in Why does my new ticket field not appear on my ticket form?.
If you still can't get the field to appear, please reach out to the Zendesk Customer Support so 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
Alexander 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
10
Antonio Maninha
Hello,
On step #8 it says:
On the Fields page, copy the Field ID for the Help Article URL field. You'll use the ID later in this recipe.
Where do I find that FIELDID, is that at the end of the Help Article URL?
Thank you!
0
James Rodewig
Hi Tony,
There's a column for Field ID on the Fields page.
When you create the Help Article URL field, 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 you James 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
Alexander Hughes
Did you find an answer to your question on the feedback form?
Thank you!
0
Pedro Rodrigues
Hello Antonio Maninha and Alexander 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.
-2