---
title: Use a standalone search box
slug: latest-ssb
canonical_url: https://docs.coveo.com/en/atomic/latest/usage/ssb/
collection: atomic
source_format: adoc
---
# Use a standalone search box
A standalone search box is a search box that's independent of the display of results.
This is controlled with the `redirection-url` property of the [`atomic-search-box`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-search-box\--docs) component.
You can use this pattern to set up your search on one page before you redirect your users to a page to display the full search results.
> **Important**
>
> [Query pipeline redirects](https://docs.coveo.com/en/1458/) will overwrite the `redirection-url` if it's set on the pipeline being queried.
>
> In the following examples, it's assumed that there's no pipeline redirect set.
## Static search box behaviour
With the `redirection-url` parameter set, the search box automatically redirects to the target URL when a search is executed.
In the following example, there's a standalone search box defined in the `` of a page:
```html
<1>
<3>
This is a page without any search results content.
```
<1> Ensure that the Atomic library and styling is loaded.
<2> `configuration` needs to be replaced with a valid search engine configuration. Refer to [`SearchEngineConfiguration`]({site-baseurl}/headless/latest/reference/interfaces/Search.SearchEngineConfiguration.html) for details.
<3> Every time a user submits a search, the search box redirects them to `search-results.html`.
## Dynamic search box behaviour
It's often simpler to have a single search box used on multiple pages on your site.
You can change the behaviour of a single search box by programmatically modifying the `redirection-url` parameter of the `atomic-search-box` component.
### Embedded in a normal page
Here's a page which provides a search box.
As in the previous example, there's no interface to display search results.
This examples lacks a `redirection-url` for `atomic-search-box`:
```html
<1>
<2>
This is a page without any search results content.
```
<1> Ensure that the Atomic Library and styling is loaded.
<2> Shared script to initialize the search box.
The `atomic-bootstrap.js` script included by this page controls `redirection-url` programmatically:
```js
// atomic-bootstrap.js
import {getSampleSearchEngineConfiguration} from 'https://static.cloud.coveo.com/headless/v3/headless.esm.js';
(async () => {
await customElements.whenDefined('atomic-search-interface'); <1>
const searchBox = document.querySelector(
'atomic-search-box#search-box' <2>
);
if (!searchBox) return; <3>
const searchResults = document.querySelector(
'atomic-search-interface#results' <4>
);
searchBox.setAttribute(
'redirection-url', <5>
searchResults ? undefined : 'search-results.html' <6>
);
const searchInterface = document.querySelector(
'atomic-search-interface#search-interface' <7>
);
const configuration = {
...getSampleSearchEngineConfiguration(), <8>
};
await searchInterface.initialize(configuration); <9>
window.coveoEngine = searchInterface.engine; <10>
})();
```
<1> Ensure that an `atomic-search-interface` component has been loaded before proceeding.
<2> Be as specific as you can with the search box you are targeting.
<3> Don't proceed if no `atomic-seach-box` can be found on the page.
<4> Check to see if there is an `atomic-search-interface` to display search results on the page.
<5> Manage the redirection URL for the search box.
<6> If the `atomic-search-interface` used to results display is found, don't redirect the user.
<7> Note the targeting by id here. The page contains multiple instances of `atomic-search-interface` and it's important to target the correct one.
<8> `configuration` needs to be replaced with a valid search engine configuration. Refer to [`SearchEngineConfiguration`]({site-baseurl}/headless/latest/reference/interfaces/Search.SearchEngineConfiguration.html) for details.
<9> Initialize the search interface.
<10> Expose the master engine so other interfaces can attach to it.
### Embedded in a search results page
In `search-results.html`, the same `atomic-search-box` is used, though in this case the page displays search results:
```html
<1>
<2>
This is a page with search results content.
<3>
```
<1> Use the same script from the other page to initialize the search box.
<2> Attach the search results to the master engine.
<3> This is a minimal example of showing search results. Refer to [`atomic-result-list`]({storybookurl}/docs/atomic-result-list\--docs) for detailed instructions on how to customize your search results.
In `search-results.js`, the instance of the initialized search engine is connected to this search results interface:
```js
// search-results.js
(async () => {
await customElements.whenDefined('atomic-search-interface'); <1>
const searchResults = document.querySelector(
'atomic-search-interface#results' <2>
);
if (!searchResults) return;
while (!window.coveoEngine) {
await new Promise((r) => setTimeout(r, 50)); <3>
}
await searchResults.initializeWithSearchEngine(window.coveoEngine); <4>
searchResults.executeFirstSearch(); <5>
})();
```
<1> Wait until the search results interface has loaded.
<2> Query for the search results container.
<3> Wait until the master engine exists, then reuse it.
<4> Initialize the search results with the Engine initialized in `atomic-bootstrap.js`.
<5> The results page should execute the first search.
This pattern allows the search box to dynamically change its behaviour--from a standalone search box to a regular search box--based on the content of the page.