US English (US)
FR French
DE German
SA Arabic
BS Bosnian

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Book a Demo
  • Product Updates
  • Contact Us
English (US)
US English (US)
FR French
DE German
SA Arabic
BS Bosnian
  • Home
  • Customization

How to Create a Custom Search?

Written by Denis Omerovic

Updated at August 11th, 2022

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Getting Started
    Users Accessibility New to Helpjuice? Start Here Content Management Multiple Languages/Translations & Localization Multilingual Knowledge Bases Analytics Video Tutorials
  • Customization
    Customization Guides
  • API V2
  • API V3
  • Article Editor
  • Swifty (In-App Widget)
  • Billing / Subscription
  • Authentication
+ More

Helpjuice custom search feature allows you to override browser search functionality giving you more flexibility while searching your knowledge base. With a custom search feature, you can search for the content inside your accordions and tabs, making it more powerful than the original browser search feature.

How to Install Custom Search?

Installing a custom search is pretty straightforward.

  1. Go to your your-account/admin/customize/main_layout and somewhere inside your <head> element add these two lines of code:

    <link rel="stylesheet" href="/knowledgebase.css">
    <script src="/knowledgebase.js" defer></script>
  2. On your <body> element add data-controller="search" attribute.


Here is the example:


And that is it. The custom search feature is enabled on your knowledge base.


OPTIONAL

If you want to enable custom search only or certain pages, for example only on the article pages then simply instead of adding data-controller="search" on your <body> element, add it on any element that appears only on article pages.

Here is the example:

 

How to activate custom search?

To activate custom search hit ctrl + f if you are on Windows or cmd + f if you are on a mac and the search bar will open.


How to navigate search items?

To navigate search items you can use up and down arrows right next to the search bar, or you can use keyboard shortcuts. Press enter to select the next item, or shift + enter to select the previous item.


Check the video below to see it in action:


Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Basic Customization
  • How To Restore Design Changes
  • How To Submit Customization Requests
  • Knowledge Base Themes

Copyright © 2023 - Helpjuice

Helpjuice, Inc. is a registered US Corporation, EIN # 45-2275731

Download W9
  • Help
  • Features
  • Pricing
  • About
  • Careers
  • Customers
  • Blog
  • Case Studies
  • Resources
  • Knowledge Base Examples
  • Privacy Policy
  • Terms of Service

Why is the knowledge base important?

With a knowledge base, you can allow your customers to self-help themselves, thus reducing your customer support by up to 60%. Furthermore, you can also have your team get instant answers to the questions they need without having to email themselves all using knowledge base software.

What is the purpose of a knowledge base?

The purpose of knowledge base software is to allow you to host your knowledge base/corporate wiki in one centralized 'hub'. Both your customers, and employees can now access information within seconds!

Made with from Miami, Bosnia, Morocco & Brasil

+1 (833) 387 3877 success@helpjuice.com
Expand