Zendesk | Adding search bar to each article

[Andrew_Hosier]

Hi Team,

Question, how do you add a Yext search bar to every article/help page in Zendesk (header), without then duplicating the search bar on the search results page?

If you could also explain how to correctly add Yext Answers to the header in Zendesk that would be great.

Thanks.

[DJ_Corbett]

Hey Andrew,

For detailed steps on how to add Yext Answers to a Zendesk Help Center, this dedicated guide is a great resource.

The guide focuses primarily on adding Yext Answers to the Help Center Homepage and Search Results page, but you can easily add Yext Answers to any other page within the Help Center, assuming you’ve followed the guide and initialized the library in the Zendesk Theme’s document_head.hbs file as instructed.

After initializing the library, you can quickly add a Yext search bar to any other template by replacing the default Zendesk search bar with the following line of code:

<div class="search_form answers"></div>

Here is a quick example of doing so on the article_page.hbs template, which will add Yext Answers to all article pages. Again, this assumes you have initialized the library as described in the guide linked above.

Before:

After:

Now all of my article pages have Yext Search!

Best,
DJ

[Andrew_Hosier]

Hey DJ,

Thanks for this. The part that is challenging is the home page and results page:

In red is approx. where the search bar would live if placed in the header which is great for articles, but results in two search bars on one page. Is the only way to solve for this to have a separate Zendesk template for the Home and results page, then a different template for the articles?

https://learn.thryv.com/hc/en-us

Thanks,
Andy

[DJ_Corbett]

Andy,

The example above, as well as the guide linked, are using the default Copenhagen Zendesk theme as a reference point. In the steps I provided above, the search bar exists within the page template, not the universal header, which gives you control over where to put the search bar. In the example above, I just put the search bar on the article pages and did not change the home page or search results page at all.

If you instead want to put the search bar in the universal header across every page, you’ll run into the scenario you mentioned where there are two search bars on the page. That being said, both search bars would still be functional. Is there any particular reason for avoiding having the search bar in the header while on the results page?

It looks like the options are:

1. Add the search bar into the actual page template instead of the universal header, as shown in my initial reply. My initial thought is that this is probably the ideal approach if possible.
2. Put the search bar in the universal header and have it show in two places on the search results page and homepage.
3. Potentially have separate templates for the Home and results page as you described, although this seems more complex and I’m less familiar with exactly how this approach would work.

Best,
DJ

[Erik_Pulliam]

@DJ_Corbett

Hello,

Thank you DJ for your reply. I’ve got the seach bar back on each article page which is great!

One small detail, using the code provided the search bar is right-aligned which is not what our clients are used to. Is it possible for you to provide the code to have it center-aligned instead? Forgive me as I’m a novice at such things

Thanks so much for your help!

[DJ_Corbett]

Erik,

No problem at all! Happy to provide some guidance around possible styling options.

For context, the right-alignment is dictated by the default styling that Zendesk assigns the navigation bar, containing both the “breadcrumbs” on the left side as well as the Yext search bar on the right. I’ve highlighted this container in the screenshot below:

Default styling for this container in Zendesk uses Flexbox to push the two elements within the container, the breadcrumbs and the searchbar, to the far sides of the container and leave as much space as possible between the two (highlighted in purple above).

Due to this default setup, it is a bit tricky to cleanly center-align the search bar while keeping the breadcrumbs left-aligned. Here are a few potential options that can serve as starting points for you to experiment with:

Option 1: Center-align all of the navigation content
Instead of having the items within the nav container pushed to either side, you could simply center all of the nav content by changing the justify-content property for the .sub-nav css stylings that already exist within the styles.css file. Instead of “space-between”, you’d use “center”.

Then, you’d probably want to add some space in between the breadcrumbs and the search bar by adding something like padding-left: 20px to .search-container. This would look something like the following:

If you’d like to keep the breadcrumbs left-aligned and only move the search bar to the center, you could try taking a slightly different approach. Instead of setting justify-content: center on .sub-nav, you could set justify-content: left.

This will left-align both the breadcrumbs and the search bar. Then, you could padding-left to the search bar element to push it towards the center and away from the lefthand side. This approach would require some trial and error to see exactly how much left padding is required to make the search bar appear directly in the center of the sub-nav element, and may also require some device-specific styling to keep things mobile-friendly.

The following screenshot shows an example of using justify-content: left on .sub-nav with padding-left: 16rem on .search-container.

These are the two easiest approaches I can come up with for a more center-aligned search bar. To be able to more automatically center the search bar while leaving the breadcrumbs on the left, you would most likely need to rework the structure of the HTML so the search bar did not share the same parent container as the breadcrumbs. That would get fairly complex, so I wanted to share these simpler solutions as inspiration!

Hope this proves useful,
DJ