最近の検索
最近の検索はありません
Tip: How to Show Popular Search Topics in Guide (HC)
投稿日時：2022年3月05日
This handy tip involves customizing you Help Center to display Popular Search topics.
It could be also be used to highlight new or specific articles.
Prerequisites:
- Technical skills: Just copy and pasting
- Total duration: 5-10 minutes
To add popular searches or topics in Copenhagen Theme
- Go to Guide admin > (👁️🗨️) Customize the design.
- Choose a theme.
- Click Customize > Edit code.
- Select the following templates: "document_head.hbs", "home_page.hbs", and "style.css".
-
Copy and paste the code below to "document_head.hbs". Replace with your desired topic/keyword title and the links for it. The code below includes 4 topics but feel free to add as many or as few as you'd like.
Pro Tip: Base the topics/keywords from your Search dashboard, see Analyzing help center search results with Explore
<script type="text/javascript">
const HCdata = {
'popular_searches': {
"Topic 1": "https://support.zendesk.com/hc/en-us/community/topics/1260801308370--User-Tips-Tricks",
"Topic 2": "{insert search result/category/section/article link}",
"Topic 3": "{insert search result/category/section/article link}",
"Topic 4": "{insert search result/category/section/article link}",
},
};
</script>
- Now, go to "home_page.hbs".
-
Copy and paste the code underneath the,
{{search submit=false instant=settings.instant_search class='search search-full'}}
Note: The search icon was removed as it becomes offset when adding the code below.
<div class="popular-searches">Popular Search:
<script>const popularSearches = HCdata.popular_searches
for(let key in popularSearches) {
document.querySelector(".popular-searches").append($("<a></a>", {"href": v}).html(k));
$(".popular-searches").append($("<span></span>").html(" , "));
});
$(".popular-searches").find("span").last().remove();
</script>
</div>
- Then, go to "style.css".
- Add the code at the very bottom.
.popular-searches {
max-width: 960px;
margin: 0 auto;
padding-left: 5px;
text-align: left;
font-size: 15px;
color: #ffff;
margin-top: 1rem;
user-select: none;
}
.popular-searches a {
padding-left: 5px;
text-decoration: underline;
text-decoration-color: #ffff;
text-underline-position: under;
user-select: none;
}
- Click Save in all tabs and you're done!
3
7件のコメント
Brett Bowser
This is awesome! Thanks for sharing Edward Teach
1
Pulkit Sachdeva
Good stuff here. Thanks!
1
Tyler C. Page
0
Matt Farrington Smith
After a bit of experimentation I discovered you don't have to remove the search icon. You just need to change its position :-)
Look for the .search-icon line in your CSS code.
Then amend top: %;
(Mine looks right with it set to 23%)
0
Magudeeswar Nataraj
Hi team,
How can we enable trending topics in zendesk community forum
0
Tipene Hughes
To the best of my knowledge, there isn't a native trending topics functionality in Community. The closest option may be something along the lines of
promoted_articlesorfeatures_posts. Here's a link to the docs which goes in to more detail on the helpers available to the community topic page and other pages, including the helpers mentioned above:https://developer.zendesk.com/api-reference/help_center/help-center-templates/community_topic_page/
You may be able to build something closer to your requirements by customizing your help center using Javascript. If you'd like to explore that route, here's a link that will get you moving in the right direction:
https://support.zendesk.com/hc/en-us/articles/4408839332250-Customizing-your-help-center-theme
I hope this helps!
Tipene
0
Alex | Plement
Why did you add the object in document_head.hbs and not in manifest.json? Is having data in different places will be confusing?
0