---
title: Upgrade to the new Coveo Insight Panel Lightning Component experience
slug: '3288'
canonical_url: https://docs.coveo.com/en/3288/
collection: coveo-for-salesforce
source_format: adoc
---
# Upgrade to the new Coveo Insight Panel Lightning Component experience
[.version.no-link.lightning]
Lightning experience

> **Available since**
>
> This feature was introduced in the July 2020 release of Coveo for Salesforce version [4.6](https://docs.coveo.com/en/3236#july-2020-release-v4-6).

This release of Coveo for Salesforce features a redesign of the Coveo [Insight Panel](https://docs.coveo.com/en/2898/) Lightning Component.

![New Insight Panel | Coveo](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/new-insight-panel-update.png)

The main updates include:

* A fresh new design for seamless integration with Salesforce.

* Out-of-the-box integration of the Coveo [Insight Query Summary component](https://docs.coveo.com/en/3253/).

* Out-of-the-box integration of the new Filter (![New Filter icon button - Coveo for Salesforce](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/filter-button.png)), Full Search (icon:external-link[alt=external-link,width=16]), Create Article ([edit]), and User Actions ([clock]) icon buttons.

> **Note**
>
> If you implemented your Coveo Insight Panel Lightning Component before v4.6, you must upgrade your existing component to the new design to activate the new experience.

To upgrade your Coveo Insight Panel Lightning Component to the new design, you must:

. [Add the FilterButton component.](#add-the-filterbutton-component)

. [Move the `coveo-summary-section` element.](#move-the-coveo-summary-section-element)

. [Add the FullSearchButton, UserActionsButton, and the CreateArticleButton components.](#add-the-fullsearchbutton-useractionsbutton-and-createarticlebutton-components)

. [Activate the new CSS rules.](#activate-the-new-css-rules)

## Add the FilterButton component

. Access your Coveo Insight Panel Lightning Component.

. Access the **Edit** mode by clicking the cog (![3288-Cog-Blue](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/cog-blue.png)) and selecting **Edit**.

. Access the **Code View** tab.

. Locate the `CoveoSearchbox` element and then add the `FilterButton` component:

```html
 <div class="CoveoSearchbox" data-enable-omnibox="true"></div>
 <button class="CoveoFilterButton"></button>
```

## Move the `coveo-summary-section` element

. On the **Code View** tab, locate the `coveo-summary-section` element.

. Cut and paste the `coveo-summary-section` element, along with its content, under the `coveo-search-section` element:

```html
 <div class="coveo-search-section">
     <div class="CoveoSearchbox" data-enable-omnibox="true"></div>
     <button class="CoveoFilterButton"></button>
 </div>
 <div class="coveo-summary-section">
     <div class="CoveoInsightQuerySummary"></div>
 </div>
```

> **Note**
>
> If the `QuerySummary` component is present, replace it with the `InsightQuerySummary` component.

## Add the FullSearchButton, UserActionsButton, and CreateArticleButton components

. On the **Code View** tab, locate the [`InsightQuerySummary`](https://docs.coveo.com/en/3251/)component.

. Add the `coveo-actionbutton-section` element after the `InsightQuerySummary` component:

```html
 <div class="CoveoInsightQuerySummary"></div>
 <div class="coveo-actionbutton-section"></div>
```

. Add the `FullSearchButton`,`UserActionsButton`, and the `CreateArticleButton` components inside the `coveo-actionbutton-section` element:

```html
 <div class="CoveoInsightQuerySummary"></div>
 <div class="coveo-actionbutton-section">
   <button class="CoveoFullSearchButton"></button>
   <button class="CoveoUserActionsButton"></button>
   <button class="CoveoCreateArticleButton"></button>
 </div>
```

> **Note**
>
> [Salesforce knowledge](https://help.salesforce.com/s/articleView?id=service.knowledge_whatis.htm&type=5) and [Lightning Knowledge](https://help.salesforce.com/articleView?id=knowledge_lightning_enable.htm&type=5) must be enabled for the `CreateArticleButton` component to work.

. Once you've added the new button components, delete the former `FullSearch`, `UserActions`, and `CreateArticle` components.

## Activate the new CSS rules

. Locate the `search` element:

```html
  <div id="search" class="CoveoSearchInterface"...></div>
```

. Set the `data-sf-design` attribute to `luna` as follows:

```html
  <div id="search" class="CoveoSearchInterface"... data-sf-design="luna" ...></div>
```

Your Coveo Insight Panel Lightning Component upgrade is now complete.