Integrating Search

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.

Displaying Results

Display options

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

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

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.

Filters

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

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

  • List
  • Select
  • Tabs
  • Color (swatches)
  • Rating

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 support@sajari.com