Design a Simple Search UI
You can build simple search interfaces in the Console's 'Integrate' section.
All interfaces are responsive for mobile screen sizes and are ADA/ WCAG 2.0 AA compliant. They can be easily styled to fit your website's look and feel.
Set up your search interface
Start from the 'Search Interface' page in your Console.
Initiating a search
First, choose how your users will initiate a search:
- Type into a search box - this will provide you with a search box to add to any page (often placed in your site's top navigation area.)
- Click on a button - this will provide you with the code for a button that will link to a dedicated search page or search overlay.
Next, choose how you would like to show your search results:
- Show on a results page - display results on a new page.
- Show in an overlay - show results in an overlay window that will show on the page the user is searching from.
Optional configuration Further configuration options include:
- Results with or without images.
- The Number of results per page.
- The primary color for links, URLs and tab filters.
Tab filters (or Single-Select Filters)
Tab filters allow users to refine search results. You can create tab filters based on URL patterns, keywords, and other metadata.
To create a tab filter; select the 'Tab' button in the "Displaying results" panel. Give the filter a name, choose the dimension you want to filter by, and then define the filter's value.
Example: On an educational website you want to give your users the ability to filter results to your /courses/ directory. In this case, you would create a tab filter as shown below.
Multi-select filters or facets
Multi-select filters (also referred to as facets) allow your users to select multiple filters to refine their results. For example, on a movie database website, you may want your users to be able to filter by genre, as well as year of production, and classification.
Read our React SDK documentation for more details on implementation.
Integrate your search interface
Once you are happy with your configuration, click ‘Create Search Interface’. You will see a preview of your search interface.
Click on the ‘Search’ button or start typing in the second search bar on the page to preview your results.
Send this code to your developer if you are unable to add code to your website yourself.
Having integration problems? Email us at firstname.lastname@example.org