Disclaimer: This article is provided for instructional purposes only. Zendesk does not support or guarantee the code. Zendesk also cannot provide support for third-party technologies such as JavaScript, jQuery, or CSS. Please post any issues you have in the comments section or try searching for a solution online.
Question
How can I remove Suggested Articles from the ticket submission form?
Answer
Suggested articles are what users see when they type the subject of their request into the submit a request form on Help Center.
To remove Suggested Articles:
- In Guide, click the Customize design icon (
) in the sidebar. - Click the theme you want to edit to open it.
- Click the options menu and select Edit Code.
- Select the style.css tab and search for the following words: suggestion-list
- Replace all the highlighted sections with the following:
.form .suggestion-list {
display:none;
}.form .suggestion-list label {
display:none;
}.form .suggestion-list li {
display:none;
}.form .suggestion-list li a:visited {
display:none;
} - The CSS should look like this:
- Click Save.
For more information about customizing your Help Center template, see the article: Editing the code for your live help center theme.
16 Comments
(From what I can tell) this is now outdated. The CSS in the default theme needs to be updated to the following:
.form .suggestion-list {
display:none;
}
.form .suggestion-list label {
display:none;
}
.form .suggestion-list li {
display:none;
}
.form .suggestion-list li a:visited {
display:none;
}
I imagine just including
.form .suggestion-list {
display:none;
}
Would do the trick, but I set all to none just for good measure. Hope this helps anyone else making the same change!
Thanks for sharing, Will!
Hello, is it possible somehow to also show the article's section name in the results?
Hi Vassilios!
I suspect that this is possible, but it might be necessary to use Javascript rather than CSS. Let me check with some of our Community Moderators and see if they can help!
Hi Vassilios, hmm, from my perspective, that doesn't seem as doable. Problem is cause we don't have articles IDs here: https://cl.ly/r1y0
In a case when we have IDs, as Jessie said, that is doable with a help of javascript. You will need a call to the Zendesk API - show article. With this endpoint, you can pull the section ID, and with additional call grab the section full name.
1st call doc: https://developer.zendesk.com/rest_api/docs/help_center/articles#show-article
2nd call doc: https://developer.zendesk.com/rest_api/docs/help_center/sections#show-section
Actually, probably we can make it work with a help of article names (grab the article name / search via a full article list and find an article with that name / take the ID of that article / and so on..and do that for each article from the suggested list) but to be honest that really complicates the whole thing but might be just useful as an idea. :)
Hello Vladan,
Thanks a lot for your reply! Really appreciated! I think that the effort to make it happen does not worth it. Maybe I can create a feature request so that it's implemented by default.
Cheers,
"I think that the effort to make it happen does not worth it" - couldn't agree more :)
Also, feature req is a good idea!
Cheers Vassilios!
Is it possible to only show up to X number of articles? For example, cap it at 5?
Hi Justin,
I did some digging on my end and it doesn't look like there's a way to accomplish this outside of possibly using some Javascript in your Help Center or building your own suggestion tool. I'd recommend taking a look at the following resources that may help point you in the right direction:
Cheers!
This worked for me to get rid of all suggestions after the third one:
div.searchbox li:nth-of-type(1n+4) {display: none;
}
Thanks for taking the time to share this with everyone David!
David da Silva Rosa - thanks! that was just what we were looking for :)
None of these appear anywhere in the style.css file. What I see is:
.searchbox {
margin: 25px 0px;
}
.searchbox-suggestions {
background-color: #fff;
border: 1px solid #EEE;
border-radius: 4px;
padding: 10px 20px;
}
.searchbox-suggestions li {
padding: 5px 0;
}
There were no ".form .suggestion-list" lines in my style.css file. And like Tom Whipps, I only saw one small section for "searchbox", below.
.searchbox {
padding-top: 0px;
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px
}
When I added David da Silva Rosa's suggested code, it hid the articles, but not the "Suggested Article" pop-up box.
So, I followed the logic of the original ".form .suggestion-list" code additions and changed them for ".searchbox" lines. I replaced the above ".searchbox" lines with the below lines, and it worked.
div.searchbox {
display: none;
}
div.searchbox label {
display: none;
}
div.searchbox li {
display: none;
}
div.searchbox li a:visited {
display: none;
}
Hope this helps someone else.
I was able to achieve this by adding the following line into script.js:
$('div.suggestion-list').hide();The 'searchbox' element is contained within the 'suggestion-list' element, so suppressing the parent element effectively hid it.
Thanks for sharing your solution, Samuel!
Please sign in to leave a comment.