---
title: Integrate Coveo Lightning Aura components in a custom component for your Experience
Cloud site
slug: '1193'
canonical_url: https://docs.coveo.com/en/1193/
collection: coveo-for-salesforce
source_format: adoc
---
# Integrate Coveo Lightning Aura components in a custom component for your Experience Cloud site
> **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](https://docs.coveo.com/en/198/) 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](https://trailhead.salesforce.com/en/project/quickstart-lightning-components/quickstart-lightning-components3)).
. Edit the `.cmp` file with the following:
```xml
```
The `implements='forceCommunity:availableForAllPageTypes'` attribute on your component tells the Lightning framework that your component can be used inside the Experience Builder.
The `` tag references the Coveo component itself (see [CommunitySearch Lightning Component](https://docs.coveo.com/en/2945/)).
> **Note**
>
> To create a Case Deflection component instead, replace `CommunitySearch` with `CaseDeflection` (see [CaseDeflection Lightning component](https://docs.coveo.com/en/1312/)).
. 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](https://docs.coveo.com/en/1149#options).
To expose all the attributes, your component (`.cmp` file) should look like this:
```xml
```
. Create a `.design` file to expose the attributes (see [Lightning Component Bundle Design Resources](https://developer.salesforce.com/docs/atlas.en-us.206.0.lightning.meta/lightning/components_config_for_app_builder_design_files.htm)).
For a component that exposes all attributes, your file should look like this:
```xml
```
. 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](https://docs.coveo.com/en/1251/).
* For versions prior to the May 2017 release (2.41), see [Add JavaScript to the Coveo Lightning Aura components with custom code - Deprecated](https://docs.coveo.com/en/1328/).