Tip: How to Show Popular Search Topics in Guide (HC)
En avantYo-ho-ho, welcome me hearties! This is a way for me to give back as I loot a bunch of tips in this section.
Do ye want to show popular searches in ye help center? Ye are on the right page.
Arrrgh: I'm just a scallywag who discovered this in the high seas!
Smartly needs:
- Savviness. If ye know how to copy and paste, then ye can do this.
- Ye Golden Time. 5-10 minutes, maybe?
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 ye desired topic/keyword title and the links for it. Ye can add as many as ye want.
Handsomely Tip: Base the topics/keywords from ye Search dashboard, see Analyzing help center search results with Explore
<script>
var 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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></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>
$.each(HCdata.popular_searches, function(k, v) {
$(".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. Blimey!
-
This is awesome! Thanks for sharing Edward Teach
-
Good stuff here. Thanks!
-
- Go to Guide admin > (👁️🗨️) Customize the design.
- Choose a theme.
- Click Customize > Edit code.
- Select the following templates: "document_head.
- Now, go to "home_page.
- Copy and paste the code underneath the,
- Then, go to "style.
- Add the code at the very bottom.
Vous devez vous connecter pour laisser un commentaire.
3 Commentaires