Search UI Designer
You can build your own 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.
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.
Other display options include:
- Number of results per page.
- Color options for links and filter components.
- List or grid layout.
- Results with or without images.
Filters help your customers narrow down the search results, ensuring they can find exactly what they are looking for. Sajari supports two types of filters.
Manual filters allow users to refine search results based on specific filter expressions. A common use-case for manual filters are website sections (All, Blog, Documentation) that can be defined by URL patterns. But you can use any metadata stored in the collection to create a filter.
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.
Smart 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.
Smart filters are only displayed if the search results match any of the filter options. For example a search for "shoes" would only show the filter for shoe size, and not the one for shirt size.
Sajari supports 5 different smart filter components out of the box: smart
- Color (swatches)
The list of available components and examples is detailed in our React SDK documentation.
Integrate your search interface
Once you are happy with your configuration, you are ready to install the search widget on your site.
When clicking the install button, a code snippet will be shown. If you are technical enough, follow the instructions and copy and paste the snippet into your site. Otherwise simply share the instructions with your developer and they will be able to get it implemented in no time.
Having integration problems? Email us at email@example.com