There’s two main parts to adding Depict UI Search to your site:

  1. Adding a search field or button to your site
  2. Adding a search results page to your site

This will result in the following flow for the user:

πŸ‘‡ 1. The user clicks on the search button or search field.

SearchField

A search button

πŸ‘‡ 2. The search modal opens

The SearchModal that the user sees while typing a query

The SearchModal can either align to the SearchField that was used to open it, an arbitrary element, or the center of the screen.

The SearchPage which displays the results along with sorting options, filters and search recommendations