Recent searches


No recent searches

Tip: How to Show Popular Search Topics in Guide (HC)



Posted Mar 05, 2022

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
 

  1. Go to Guide admin > (👁️‍🗨️) Customize the design.
  2. Choose a theme.
  3. Click Customize Edit code.
  4. Select the following templates: "document_head.hbs",  "home_page.hbs", and "style.css".
  5. 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>
     

     

  6. Now, go to "home_page.hbs".
  7. 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>

  8. Then, go to "style.css".
  9. 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;
    }
  10. Click Save in all tabs and you're done!

3

7

7 comments

image avatar

Brett Bowser

Zendesk Community Manager

This is awesome! Thanks for sharing Edward Teach

1


Good stuff here. Thanks!

1


  1. Go to Guide admin > (👁️‍🗨️) Customize the design.
  2. Choose a theme.
  3. Click Customize > Edit code.
  4. Select the following templates: "document_head.
  5. Now, go to "home_page.
  6. Copy and paste the code underneath the,
  7. Then, go to "style.
  8. Add the code at the very bottom.

0


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


Hi team,

 

How can we enable trending topics in zendesk community forum

0


image avatar

Tipene Hughes

Zendesk Developer Advocacy

Hi Magudeeswar,
 
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_articles or features_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


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


Please sign in to leave a comment.

ADDITIONAL CONTENT

More about

Didn't find what you're looking for?

New post