Integrate Coveo Lightning Aura components in a custom component for your Experience Cloud site

This is for:

Note

The Coveo Community Search component is the Locker compliant version of the Coveo Search component.

For some customizations, such as modifying the DOM within the Coveo JavaScript Search Framework or interacting with the Coveo JavaScript Search Framework events, you may need to wrap the Coveo component within another one. The wrapper can be seen as a clean way to further customize your integration to your specific needs.

Examples

You can customize your Coveo components to:

Change facet value captions
Send custom analytics data

Inside your component, you can execute JavaScript code or call Apex functions using the Lightning Aura Component Framework.

The following tutorial will show you how to create a custom Lightning component that exposes Lightning attributes.

Create a new Lightning Component using the Salesforce developer console (see Create a Lightning Component).
Edit the .cmp file with the following:
```
 <aura:component implements='forceCommunity:availableForAllPageTypes'>
     <CoveoV2:CommunitySearch/>
 </aura:component>
```
The implements='forceCommunity:availableForAllPageTypes' attribute on your component tells the Lightning framework that your component can be used inside the Experience Builder.

The <CoveoV2:CommunitySearch/> tag references the Coveo component itself (see CommunitySearch Lightning Component).

Note

To create a Case Deflection component instead, replace CommunitySearch with CaseDeflection (see CaseDeflection Lightning component).

Since you usually want to expose Lightning attributes, you should add them to your component. For the list of available attributes, see Base Lightning component.

To expose all the attributes, your component (.cmp file) should look like this:

<aura:component implements='forceCommunity:availableForAllPageTypes'>
    <aura:attribute name="name" type="String" default="" access="global" />
    <aura:attribute name="debug" type="Boolean" default="false" access="global" />
    <aura:attribute name="searchHub" type="String" default="" access="global" />

    <CoveoV2:CommunitySearch name="{!v.name}"
                             debug="{!v.debug}"
                             searchHub="{!v.searchHub}"/>
</aura:component>

Create a .design file to expose the attributes (see Lightning Component Bundle Design Resources).

For a component that exposes all attributes, your file should look like this:

<design:component label="CustomSearch">
    <design:attribute name="name" label="Name" />
    <design:attribute name="debug" label="Debug" />
    <design:attribute name="searchHub" label="Search Hub" />
</design:component>

Save your changes. You should now have a custom Lightning component available in your Experience Cloud site.

Now that you have a custom component, you may want to add custom code to it:

For the May 2017 release or later (2.41+), see Add JavaScript to the Coveo Lightning Aura components with custom code.
For versions prior to the May 2017 release (2.41), see Add JavaScript to the Coveo Lightning Aura components with custom code - Deprecated.