Agility Search offers two out of the box options that can be embedded in any of your sites without any code updates, as long as Agility Search is enabled for your site. The two options are "Built-in Search" and "Built-in Grouped Search". Both options can be embedded to any page by simply adding a Rich Text Area.
In order to use Agility Search, you must ensure that you've added the embed code as highlighted in Integrating Agility Search. This code can be added in a page's Bottom Scripts or Global Scripts in Agility or added to the website codebase itself.
Drop in a div element with "agility-search-panel" class in a Rich Text Area Module's code editor by clicking "View HTML Code" button of the rich text area.
The Search JS will look for an element with the class agility-search-panel and render the input and the results within that container with default styles. You should be able to see the search input and search results on your site now.
Built-in Grouped Search
Built-in Grouped Search can be embedded just like Built-in Search. However, the class of the HTML element should be as follows:
In addition to the class attribute of the div element, there are additional options that can be used by the help of data attributes and can be used like so
<div class="agility-grouped-search-panel" data-redirect-path="/search-results"
data-top="3" data-group-count="3" data-delay="250" data-pop-over="true"></div>
- Defines the path of the page that the user will be redirected to in the event the user chooses to hit enter or click search.
- Defines the maximum number of groups that the search will return.
- Defines the maximum number of results that will be returned from each group.
- Defines the milliseconds before triggering a search after each keystroke.
- Defines whether to show the results relative to the position of the search field or below it.