Use a Standalone Search Box

To create a standalone search box in Atomic, use the redirectionUrl property of the atomic-search-box component.

<atomic-search-interface>
     <atomic-search-box redirection-url="https://www.coveo.com/en/search">
     </atomic-search-box>
</atomic-search-interface>

When the redirectionUrl option is defined and a search is executed, the search box automatically redirects to the target URL, unless you have defined a query pipeline redirect. If you have defined such a query pipeline redirect, it takes priority.

When an end user makes a search request from your standalone search box, Atomic stores the query and relevant Usage Analytics (UA) data in the local storage. When the end user reaches the full search page and it executes a first search, Atomic retrieves and uses the parameters and UA data stored in the local storage.

Alternate Between Search Box Types

In some cases, such as a single page application, you may want to use the same search box component to power both your full search page and your standalone search box. You can do so by dynamically setting the redirection-url.

document.querySelector('atomic-search-box').redirectionUrl = undefined;

The component will dynamically adapt to the new value, turning a regular search box into a standalone one, and vice versa.

What's next for me?