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
Antonio Maninha
Olá Pedro Rodrigues (opservator.com)
Our Guide Plan allows customizing the theme code.
Can you provide more information or steps to accomplish what we are looking for?
Obrigado!
0
Pedro Rodrigues
Hello Antonio Maninha and Alexander Hughes, this kind of article page customization is not as straightforward as it may seem, as it requires a bit of coding. If I may, I believe I can help you solve this problem and would be happy to discuss further, if you're interested. Thanks!
1
Antonio Maninha
Pedro Rodrigues (opservator.com)
I would love to discuss that further. Feel free to setup a meeting, I think you should have my contact info still.
0
Antonio Maninha
Hello Pedro Rodrigues James Rodewig,
There is a problem that I can't solve.
When someone submits the form with the feedback how do I retrieve it? Is there anything on the subject of the form that makes retrieving the ticket easier? What would be the ticket subject?
Right now if someone submits feedback it goes to a black hole...
0
Christine Diego
You can create pre-filled ticket forms, you add parameters for the fields that you want to pre-fill to the URL of the form, let's say for subject, use the following format to paste the title at the end of the URL that you are building, along with the value that you want to assign to the field: &tf_{title}={value}
0
Antonio Maninha
Pedro Rodrigues
I am glad I am not alone on this issue. Alexander Hughes also has the same problem as well all of the Zendesk users...
If you have lots of tickets submitted the ticket generated from the Feedback form gets lost, making it very hard to find.
Is there a way to customize the subject of the ticket generated by the feedback form so it can be identified?
0
Pedro Rodrigues
Hello, Antonio Maninha,
As @... has pointed out, you can create a prefilled form URL. Her example shows how to prefill the Subject.
Another way to do this by using her suggestion, for example:
(0) Add jQuery to your document_head.hbs document, for example:
(1) Edit your article_page.hbs on your theme code, find "<div class="article-more-questions">" and replace the {{request_callout}} placeholder with its raw output:
Please note that if you have multiple languages, you should consider replacing the text strings with dynamic content. The URL might also be different if you have multiple forms.
(2) Edit your script.js file at the end and paste the following:
This will ensure requesters that come to the form via that link containing that specific Subject, will not be able to edit it.
For the kind of experience shared by Alex Hughes, a bit more customization is required (in our case, it's a completely different form that adds specific tags, subject and description to the feedback ticket).
Note: the above are just examples, they may or may not work with your current Guide theme. The examples were tested and validated with the default Copenhagen Guide theme.
1
Antonio Maninha
That's a great help. Thank you Pedro Rodrigues
0
Stephanie Farrugia
Pedro Rodrigues Is the Theme code customisable with the Professional Plan?
0
Pedro Rodrigues
Hi Stephanie Farrugia, according to current plans, code-editing capability in Guide is available on all Suite plans, except Team, so it's included on Suite Professional.
If you meant the Support Professional plan (non-Suite), you'll have to pay for Help Center with Guide product in addition (both Guide Professional and Enterprise plans allow editing the theme code).
0
Harper Dane
I put in a feature request to gather "unhelpful" vote feedback here: https://support.zendesk.com/hc/en-us/community/posts/6394025289498
Hopefully everyone else here looking for a solution like I was will take a second to go add their vote for this feature to be added natively to Guide. :)
1
Edward Teach
Hello Alexander Hughes
I just posted a new way to do this; you can check it out: https://support.zendesk.com/hc/en-us/community/posts/6485027590426-Guide-Tip-New-way-to-request-feedback-for-article-downvotes
0
Jan-Willem Rossée
Link says: "Oops, you're not authorized."
0
Jan-Willem Rossée
Thx, Edward!
0
Edward Teach
Let me know if you run into issues, Jan. I will be online in the next 3 hours, or just leave me a message here if you need any help.
0
Andreea Ispas
There seems to be an issue with the follow button. I tested it on a few articles (followed them and then made some changes to the articles) and I didn't receive any notification. Can you tell me what could be the problem?
0
Audrey Ann Cipriano
Hi Andreea Ispas welcome to our Community!
The follow feature will only notify you for any new comments on the article or post, however, you will not receive notifications when the content in the article or post is edited or updated.
Hope this helps!
0
Ryan Rawlings
We've been trying to enable this function to our Knowledge Base but we the following issues:
1. We are trying to keep it from redirecting the end-user to another page to fill in why they didn't like the article and also to have the form hidden before they downvote the article. Is this possible?
2. When we had the function setup and redirecting to another page, filling in the form would produce errors or state they need to be logged in for the form to work. Any ideas what we missed?
1
Christina hernandez
Hi, as Alexander Hughes mentioned above, it would be great to have a Help Center feedback form on the actual article page, rather than sending users to a new page/form. The main issues are:
-The “Please tell us why” link is easy to miss
-Users likely won't take the time to go to another page and fill out an entire form on why the article wasn't helpful. It's just too much work.
-The form itself is called “Submit a Request” which can easily be confused with submitting a request for help rather than simple feedback on an article.
Please update your article feedback format so it's easier for users to leave feedback with less steps/work. Right now, the only way to accomplish this is by purchasing an app integration like Swifteq that does it for you (like image below).
1