---
title: Use a standalone search box
slug: latest-ssb-usage
canonical_url: https://docs.coveo.com/en/quantic/latest/usage/ssb-usage/
collection: quantic
source_format: adoc
---
# Use a standalone search box
The [`QuanticStandaloneSearchBox`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-standalone-search-box/) component lets you create a search box that redirects to a main, Quantic-powered search page.
It works out of the box and redirects to the Quantic-powered search page of your [Salesforce Experience Cloud site](https://help.salesforce.com/s/articleView?id=sf.networks_overview.htm&type=5) (that is, Salesforce Community) by default.
Once included in your Experience Cloud site, you can use the [Experience Builder](https://help.salesforce.com/s/articleView?id=sf.community_designer_overview.htm&type=5) to configure it.
## Set the Quantic Standalone Search Box as the Header Search Box
In most cases, you'll want to go further by including that standalone search box component in the header of your Experience Cloud site.
That's only possible with Lightning Aura search box components, so you'll need to create one that wraps the `QuanticStandaloneSearchBox` component.
This article walks you through the required steps.
. [Create a new Lightning Aura Component](https://trailhead.salesforce.com/en/project/quickstart-lightning-components/quickstart-lightning-components3). Do so through the [Salesforce developer console](https://help.salesforce.com/s/articleView?id=sf.code_dev_console_opening.htm&type=5).
. Edit the `.cmp` file to wrap the [`QuanticStandaloneSearchBox`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-standalone-search-box/) component.
Be sure to set the `implements` option of your Aura component to [`forceCommunity:searchInterface`](https://developer.salesforce.com/docs/component-library/bundle/forceCommunity:searchInterface/documentation), so that you can use it in the header of your Experience Cloud site.
Also, be sure to set the `engineId` value to the one used in the target main search page (see [Usage](https://docs.coveo.com/en/quantic/latest/usage/)).
```xml
<1>
type="String"
access="global" />
engineId="{!v.engineId}"
placeholder="{!v.placeholder}"
numberOfSuggestions="{!v.numberOfSuggestions}"
withoutSubmitButton="{!v.withoutSubmitButton}"
redirectUrl="{!v.redirectUrl}"/>
```
<1> As mentioned earlier, this informs your Experience Cloud site that your component should be considered a search box that can be used in your Experience Cloud site header.
<2> We will retrieve the `engineId` from the Experience Builder, and we do similarly for the other properties below.
<3> Wrap the `QuanticStandaloneSearchBox` component, setting the target [property](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-standalone-search-box/) values.
In this example we set the `engineId` property value, which is required, and four others, which are optional.
. In your `.design` file, expose the target attributes through the Experience Builder, optionally setting default values.
```xml
<1>
```
<1> Use the same `engineId` default value as you do in the target main search page.
. Set your custom component as the default **Search Component** of your Experience Cloud site.
.. [Access the Salesforce Experience Builder](https://help.salesforce.com/articleView?id=community_designer_ui.htm&type=5).
.. In the left sidebar, select **Theme** > **Theme Settings.**
.. Under **Search Component**, in the dropdown menu, select the name of your custom component.
. If needed, use the Experience Builder to configure the attributes of your component.
