---
title: Create a custom standalone search box for your Experience Cloud site
slug: '1245'
canonical_url: https://docs.coveo.com/en/1245/
collection: coveo-for-salesforce
source_format: adoc
---
# Create a custom standalone search box for your Experience Cloud site
When you use Coveo for Salesforce in your Experience Cloud site, you may want to [customize the Coveo standalone search box](https://docs.coveo.com/en/1500/) to generate a custom search token instead of using the default one.

This tutorial shows you how to create a custom Lightning component that uses the Coveo standalone search box properties.

> **Note**
>
> To learn how to add the default standalone search box to your Experience Cloud site, see [Leverage the Coveo standalone search box](https://docs.coveo.com/en/1218#leverage-the-coveo-standalone-search-box).

## Create a custom Searchbox

> **Note**
>
> The Coveo [`CommunitySearchBox`](https://docs.coveo.com/en/2946/) component is the Locker-compliant version of the Coveo [`Searchbox`](https://docs.coveo.com/en/1093/) component.

This procedure should be seen as a starting point before implementing your own custom features or elements to the search box.

. [Access the Developer Console](https://help.salesforce.com/s/articleView?id=sf.code_dev_console_opening.htm&type=5).

. [Create a new Lightning component](https://trailhead.salesforce.com/en/project/quickstart-lightning-components/quickstart-lightning-components3).

. In the `.cmp` file, add the following code:

```xml
<aura:component implements='forceCommunity:searchInterface'>
    <CoveoV2:CommunitySearchBox/>
</aura:component>
```

** `implements='forceCommunity:searchInterface'` means your component is considered a search box for your community.

** `CoveoV2:CommunitySearchBox` represents the Coveo Standalone Searchbox component.

. You will usually want to expose at least some of the [`CommunitySearchBox`](https://docs.coveo.com/en/2946#options) attributes. The following three attributes should always be part of your component.

** `name` defines the name of the Coveo Search component you want to associate to your search box.

By default, the Coveo Community Search component is called `communitySearchCoveo`.

> **Leading practice**
>
> The `name` attribute is used in the [advanced server-side component configuration](https://docs.coveo.com/en/1162/). In order to share the configuration settings with your Community Search component, it's good practice to use the same `name` value as your Community Search component.

** `searchHub` defines the name of the [search hub](https://docs.coveo.com/en/1342/) used for [Coveo Analytics](https://docs.coveo.com/en/182/) reports.

The default value is the same value as `name`.

> **Leading practice**
>
> It's good practice to use the same `searchHub` value as your Community Search component.

** `searchPageName` defines the page where your search box should redirect.

Depending on your Salesforce version, the value should either be:

**Before Winter '18**: `search/all/home/%40uri`

**Winter '18 and up**: `global-search/%40uri`

Your component (`.cmp` file) should now look like this:

```xml
<aura:component implements='forceCommunity:searchInterface'>
    <aura:attribute name='name' type='String' default='communitySearchCoveo'/>
    <aura:attribute name='searchHub' type='String' default='communitySearchCoveo'/>
    <aura:attribute name='searchPageName' type='String' default='global-search/%40uri'/>

    <CoveoV2:CommunitySearchbox name='{!v.name}' searchHub='{!v.searchHub}' searchPageName='{!v.searchPageName}'/>
</aura:component>
```

. Save your component.

You now have a custom search box that should act the same way as the default Coveo Standalone Searchbox.

. Add your custom search box the same way you would [add the Coveo standalone search box in your community](https://docs.coveo.com/en/1218#leverage-the-coveo-standalone-search-box).
You can also create a `.design` file to [allow the options to be changed in the Experience Builder](https://docs.coveo.com/en/1245#allow-the-options-to-be-changed-in-the-experience-builder) going forward.

## Allow the options to be changed in the Experience Builder

Although this step isn't mandatory, exposing options in the [Experience Builder](https://help.salesforce.com/s/articleView?id=sf.community_designer_ui.htm&type=5) helps you reuse the same component in various situations.

To do so, add a design file to your component as follows:

. In the Developer Console, open [the component you just created](https://docs.coveo.com/en/1245#create-a-custom-searchbox).

. In the menu on the right, select `Design`.

. In the `.design` file, add the following code:

```xml
<design:component >
    <design:attribute name='name' label='Name' description='The name of the Coveo Search component you wish to associate to your searchbox.'/>
    <design:attribute name='searchHub' label='Search Hub' description='The name of the search hub that is used for Analytics reports.'/>
    <design:attribute name='searchPageName' label='Search Url' description='The name of the community page your Coveo Search component is on.'/>
</design:component>
```

. Save your design file.

You should now be able to access and edit the `name`, `searchHub`, and `searchPageName` options directly from the Experience Builder.

![Custom search box component options in Salesforce](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/custom-searchbox.png)

## Add a custom search token to your custom search box

To know how to generate a search token for the Community SearchBox Lightning component, see [Generate a custom search token for Lightning components using Lightning Locker](https://docs.coveo.com/en/2745/).

> **Important**
>
> You don't need to create a new Lightning component, as you will be using the custom search box you created earlier.