Upgrading to the new Coveo Insight Panel Lightning Component experience

This is for:

Developer System Administrator

Lightning Experience

Coveo for Salesforce 4.6 (July 2020)

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

3288-New-Insight-Panel

The main updates include:

  • A fresh new design for seamless integration with Salesforce.

  • Out-of-the-box integration of Coveo’s Insight Query Summary component.

  • Out-of-the-box integration of the new Filter (3288-Filter-Button), Full Search (3288-FullSearch-Button), Create Article (3288-Create-Article-Button), and User Actions (3288-User-Actions-Button) icon buttons.

If you implemented your Coveo Insight Panel Lightning Component before V4.6, you must upgrade your existing Coveo Insight Panel Lightning Component to the new design to activate the new experience.

This article describes how to upgrade your existing Coveo Insight Panel Lightning Component to the new design to activate the new experience.

Step 1: 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>

Step 2: Move the coveo-summary-section Element

  1. In 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>

    If the QuerySummary component is present, replace it with the InsightQuerySummary component.

Step 3: Add the FullSearchButton, UserActionsButton, and the CreateArticleButton Components

  1. In 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>

    Salesforce knowledge and Lightning Knowledge must be enabled for the CreateArticleButton component to work.

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

Step 4: 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