---
title: Integrate Coveo Lightning Aura components in a custom Lightning app
slug: '1259'
canonical_url: https://docs.coveo.com/en/1259/
collection: coveo-for-salesforce
source_format: adoc
---
# Integrate Coveo Lightning Aura components in a custom Lightning app
The [Lightning App Builder](https://help.salesforce.com/articleView?id=lightning_app_builder_overview.htm&type=0&language=en_US&release=206.17) is a tool that lets you easily create custom pages for the Salesforce mobile app and Lightning Experience.
You can use the Lightning App Builder in Sales or Service Cloud to integrate an [Insight Panel](https://docs.coveo.com/en/1028/) or a [Full Search page](https://docs.coveo.com/en/nbm90465/) into the Lightning Console.

You can also use Coveo components in the Lightning App Builder to add relevance to custom Lightning apps.
To do so, follow the steps provided in this article.

![CustomApp](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/my-custom-app.png)

## Prerequisites

* Ensure you've [created a custom Lightning app page](https://help.salesforce.com/articleView?id=lightning_page_big_picture_map.htm&type=0&language=en_US&release=206.17).
* Ensure you've [created a custom Lightning component](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_create_devconsole.htm) and specified the `implements` option as follows:

**Example**

```xml
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <CoveoV2:FullSearch name="myCustomAppSearch" searchhub="myCustomAppSearch"></CoveoV2:FullSearch>
</aura:component>
```

The [`implements=flexipage:availableForAllPageTypes`](https://developer.salesforce.com/docs/component-library/bundle/flexipage:availableForAllPageTypes/documentation) option tells the Lightning framework that your component can be used inside a Lightning App Builder page.

The `<CoveoV2:FullSearch/>` tag references the Coveo component itself. You can specify the Coveo Lightning component of your choice (that is, Insight Panel, Full Search page, or Attached Results).

The [`name`](https://docs.coveo.com/en/1096#name) and [`searchHub`](https://docs.coveo.com/en/1096#searchhub) values are just placeholders and can be modified.

> **Important**
>
> By default, the `implements` option of the out-of-the-box Coveo Lightning components is set to [`flexipage:availableForRecordHome`](https://developer.salesforce.com/docs/component-library/bundle/flexipage:availableForRecordHome/documentation). You must update this value, as specified in the previous example, to make your custom components available for record pages and any other type of page inside your custom Lightning App Builder page.

> **Note**
>
> For more information about the configuration of Lightning pages, see [Configure Components for Lightning Pages and the Lightning App Builder](http://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_app_builder.htm).
> You can also look at the [available interfaces](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/oo_interfaces.htm).

## Procedure

. Access your custom Lightning app page.
 .. In Salesforce, under **Setup**, search for and select **Lightning App Builder** (**User Interface** > **Lightning App Builder**).
 .. Under **Lightning Pages**, next to the App you want to customize, select **Edit**.
. In the App Builder, under **Custom**, drag your custom component to where you want to add it on your page.
. To customize the component, either edit the code directly or use the Interface Editor:
.. To edit the code, [access the Developer Console](https://help.salesforce.com/s/articleView?id=sf.code_dev_console_opening.htm&type=5) and then select the component you want to customize.
.. To use the Interface Editor:
... Ensure you've [activated your custom Lightning app page](https://help.salesforce.com/s/articleView?id=sf.lightning_page_getting_into_salesforce1.htm&type=5).
 ... Access your Lightning app.
 ... [Access the Interface Editor](https://docs.coveo.com/en/3081#different-ways-to-access-the-interface-editor) to edit your search page.