Integrating Search

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.

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.

Displaying results

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.

Displaying Results

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.

Filters

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.

Tab Filters

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.

You can add multi-select filters and facets to your search interface using our Javascript or React SDKs.

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.

Click on ‘View Code’ to see the HTML, CSS and Javascript code needed to integrate your results. Integration instructions are embedded in the code comments.

Send this code to your developer if you are unable to add code to your website yourself.

Having integration problems? Email us at support@sajari.com