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

This is for:

Developer System Administrator
In this article

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

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

You could customize your Coveo components to:

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

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

  1. Create a new Lightning Component using the Salesforce developer console (see Create a Lightning Component).

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

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

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

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

  5. Save your changes. You should now have a custom Lightning component available in your community.

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