Upgrade to the new Coveo Insight Panel Lightning Component experience

This is for:

Developer System Administrator

Lightning experience

Available since

This feature was introduced in the July 2020 release of Coveo for Salesforce version 4.6.

This release of Coveo for Salesforce features a redesign of the Coveo Insight Panel Lightning Component.

New Insight Panel | Coveo

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.

  • Out-of-the-box integration of the new Filter (New Filter icon button - Coveo for Salesforce), Full Search (external-link), 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:

  1. Add the FilterButton component.

  2. Move the coveo-summary-section element.

  3. Add the FullSearchButton, UserActionsButton, and the CreateArticleButton components.

  4. Activate the new CSS rules.

Add the FilterButton component

  1. Access your Coveo Insight Panel Lightning Component.

  2. Access the Edit mode by clicking the cog (3288-Cog-Blue) and selecting Edit.

  3. Access the Code View tab.

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

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

Move the coveo-summary-section element

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

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

     <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

  1. On the Code View tab, locate the InsightQuerySummarycomponent.

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

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

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

     <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 and Lightning Knowledge must be enabled for the CreateArticleButton component to work.

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

Activate the new CSS rules

  1. Locate the search element:

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

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

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

    Your Coveo Insight Panel Lightning Component upgrade is now complete.

    3288-New-Insight-Panel