Create a custom standalone search box for your Experience Cloud site

This is for:

In this article

Create a custom Searchbox
Allow the options to be changed in the Experience Builder
Add a custom search token to your custom search box

When using Coveo for Salesforce in your Experience Cloud site, you will sometimes want to customize the Coveo Standalone Searchbox, for example, when you want to generate a custom search token instead of using the default one.

This tutorial will show you how to create a custom Lightning component that uses the Coveo Standalone Searchbox properties.

Note

To learn how to add the default Standalone Searchbox to your Experience Cloud site, see Adding the Coveo standalone search box.

Note

The Coveo CommunitySearchBox component is the Locker-compliant version of the Coveo Searchbox 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.
Create a new Lightning component.
In the .cmp file, add the following code:
```
<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 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. 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 used for Coveo Usage Analytics (Coveo UA) 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:

<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 Searchbox in your community. You can also create a .design file to 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 helps you reuse the same component in various situations.

To do so, you need to add a design file to your component.

In the Developer Console, open the component you just created.
In the menu on the right, select Design.

In the .design file, add the following code:

<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.

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.

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