About the default Coveo for Salesforce Insight Panel

This is for:

Note

To learn how to create a Coveo Insight Panel, see Integrating a Coveo Insight Panel Classic Component (Deprecated) and Integrating a Coveo Insight Panel Lightning Component.

The Insight Panel is meant to be put inside of your agent console, typically in a case console. It’s meant to propose context-based solutions to your agents in a side bar of their console.

Since the sidebar has limited space, the search interface is designed to be lean.

The markup of the default Insight Panel looks like this:

Example

Insight Panel

<div id="search" class="CoveoBox" data-design="new">
  <div class="CoveoFoldingForThread" data-field="@sffeeditemid" data-tab="Chatter" data-parent-field="@sfid" data-child-field="@sffeeditemid"
    data-rearrange="date descending" data-range="0"></div>
  <div class="CoveoFoldingForThread" data-field="@sfcaseid" data-tab="SalesforceCase" data-parent-field="@sfid" data-child-field="@sfcaseid"
    data-range="0"></div>
  <div class='CoveoAnalytics'></div>
  <div class='coveo-box-query-section'>
    <div class="CoveoBoxQuerySome" data-include="Subject"></div>
  </div>
  <div class='CoveoBoxHeader' data-open-sub-section-by-default="false">
    <div class="CoveoShareQuery">
    </div>
    <div class="CoveoPreferencesPanel">
      <div class="CoveoResultsPreferences">
      </div>
      <div class="CoveoResultsFiltersPreferences">
      </div>
    </div>
    <div class='coveo-box-popups-section'>
      <div class='coveo-tab-section coveo-inline-tab-section'>
        <a class="CoveoTab" data-id="All" data-caption="All Content"></a>
        <a class="CoveoTab" data-id="Chatter" data-caption="Chatter" data-expression="@objecttype==(FeedItem,FeedComment)"></a>
        <a class="CoveoTab" data-id="Salesforce" data-caption="Salesforce" data-expression="@sfid"></a>
        <a class="CoveoTab" data-id="SalesforceCase" data-caption="Cases" data-expression="@sfcaseid"></a>
        <a class="CoveoAttachedResultsTab" data-id="AttachedResults" data-caption="Attached results"></a>
        <div class='CoveoBoxPopup' data-hidden="true" data-full-height="true" data-full-width="true" data-title='Facets'>
          <div class="coveo-box-facet-column">
            <div class="CoveoFacet" data-title="Type" data-field="@objecttype" data-tab="All"></div>
            <div class="CoveoFacet" data-title="FileType" data-field="@filetype" data-tab="All"></div>
            <div class="CoveoFacet" data-title="Author" data-field="@author" data-tab="All"></div>
            <div class="CoveoFacet" data-title="Year" data-field="@year" data-tab="All"></div>
            <div class="CoveoFacet" data-title="Month" data-field="@month" data-tab="All"></div>
            <div class="CoveoFacet" data-title="Posted on" data-tab="Chatter" data-field="@sfparentname"></div>
            <div class="CoveoFacet" data-title="Posted by" data-tab="Chatter" data-field="@sfcreatedbyname"></div>
            <div class="CoveoFacet" data-title="Topic" data-tab="Chatter" data-field="@coveochatterfeedtopics"></div>
            <div class="CoveoFacet" data-title="Liked by" data-tab="Chatter" data-field="@sflikedby"></div>
            <div class="CoveoFacet" data-title="Type" data-field="@objecttype" data-number-of-values="5" data-tab="Salesforce"></div>
            <div class="CoveoFacet" data-title="Close quarter" data-field="@sfopportunityclosedquarterc" data-computed-field="@sfopportunityamountconverted"
              data-sort-criteria="AlphaDescending" data-tab="Salesforce"></div>
            <div class="CoveoFacet" data-title="Salesforce Account" data-field="@sfaccountname" data-computed-field="@sfopportunityamountconverted"
              data-sort-criteria="ComputedFieldDescending" data-number-of-values="7" data-tab="Salesforce"></div>
            <div class="CoveoFacet" data-title="Salesforce Owner" data-field="@sfownername" data-computed-field="@sfopportunityamountconverted"
              data-sort-criteria="ComputedFieldDescending" data-number-of-values="7" data-tab="Salesforce"></div>
            <div class="CoveoFacet" data-title="Opportunity Type" data-field="@sfopportunitytype" data-computed-field="@sfopportunityamountconverted"
              data-sort-criteria="ComputedFieldDescending" data-number-of-values="5" data-tab="Salesforce"></div>
            <div class="CoveoFacet" data-title="Opportunity Stage" data-field="@sfopportunitystagename" data-computed-field="@sfopportunityamountconverted"
              data-sort-criteria="ComputedFieldDescending" data-tab="Salesforce"></div>
            <div class="CoveoFacet" data-title="Lead Source" data-field="@sfleadsource" data-computed-field="@sfopportunityamountconverted"
              data-sort-criteria="ComputedFieldDescending" data-number-of-values="5" data-tab="Salesforce"></div>
            <div class="CoveoFacet" data-title="Type" data-field="@objecttype" data-tab="SalesforceCase"></div>
            <div class="CoveoFacet" data-title="Case Status" data-field="@sfcasestatus" data-tab="SalesforceCase"></div>
            <div class="CoveoFacet" data-title="Case Priority" data-field="@sfcasespriority" data-tab="SalesforceCase"></div>
            <div class="CoveoFacet" data-title="Account" data-field="@sfaccountname" data-tab="SalesforceCase"></div>
            <div class="CoveoFacet" data-title="Owner" data-field="@sfownername" data-tab="SalesforceCase"></div>
          </div>
        </div>
        <div class='CoveoBoxPopup' data-hidden="true">
          <div class='CoveoBoxCurrentSort'></div>
          <div class="coveo-sort-section">
            <span class="CoveoSort" data-sort-criteria="relevancy" data-caption="Relevance"></span>
            <span class="CoveoSort" data-sort-criteria="date descending,date ascending" data-caption="Date"></span>
            <span class="CoveoSort" data-sort-criteria="@sfopportunityamountconverted descending,@sfopportunityamountconverted ascending"
              data-tab="Salesforce" data-caption="Amount"></span>
          </div>
        </div>
      </div>
      <div class="coveo-box-settings">
        <a class='CoveoBoxExpandLink' target="_blank"></a>
        <a class='CoveoBoxEditLink' target="_top"></a>
        <a class='CoveoBoxCreateArticle' target="_blank"></a>
      </div>
      <div class="CoveoBoxQuerySummary"></div>
    </div>
  </div>
  <div class="CoveoTriggers"></div>
  <div class="CoveoBreadcrumb"></div>
  <div class="CoveoDidYouMean"></div>
  <div class="CoveoErrorReport"></div>
  <div class='CoveoBoxBody'>
    <script id="SalesforceUser" class="result-template" type="text/html" data-field-objecttype="User"><div class="coveo-result-frame">
      <div class="coveo-result-row">
        <div class="coveo-result-cell coveo-no-wrap" style="vertical-align: middle">
          <span class="CoveoIcon" data-small="true"></span>
          <a class="CoveoSalesforceResultLink"></a>
        </div>
        <div class="coveo-result-cell" style="text-align:right; padding-right:5px; width:126px;vertical-align: middle;font-size:12px;">
          <span class="CoveoAttachToCase" data-display-text="false"></span>
          <span class="CoveoFieldValue" data-field="@date" data-helper="dateTime"></span>
        </div>
        <div class="coveo-result-cell" style="width:20px; vertical-align:middle; text-align:right">
          <div class="CoveoBoxResultAction">
            <div class="CoveoBoxQuickview"></div>
            <div class="CoveoBoxAttachToCase"></div>
          </div>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell coveo-no-wrap">
          <span class="CoveoExcerpt"></span>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell coveo-no-wrap">
<div class='table-wrap'>
<table class="CoveoBoxFieldTable" data-use-json-template-fields="true" data-allow-minimization="false">
            <tr data-caption="Email" data-field="@sfemail" data-split-values="false" data-helper="email" data-html-value="true"></tr>
            <tr data-field="@sfprofilename" data-split-values="false" data-caption="Profile"></tr>
          </table>
          </div>
        </div>
      </div>
    </div></script>
    <script id="SalesforceLead" class="result-template" type="text/html" data-field-objecttype="Lead"><div class="coveo-result-frame">
      <div class="coveo-result-row">
        <div class="coveo-result-cell coveo-no-wrap" style="vertical-align: middle">
          <span class="CoveoIcon" data-small="true"></span>
          <a class="CoveoSalesforceResultLink"></a>
        </div>
        <div class="coveo-result-cell" style="text-align:right; padding-right:5px; width:126px;vertical-align: middle;font-size:12px;">
          <span class="CoveoAttachToCase" data-display-text="false"></span>
          <span class="CoveoFieldValue" data-field="@date" data-helper="dateTime"></span>
        </div>
        <div class="coveo-result-cell" style="width:20px; vertical-align:middle; text-align:right">
          <div class="CoveoBoxResultAction">
            <div class="CoveoBoxQuickview"></div>
            <div class="CoveoBoxAttachToCase"></div>
          </div>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell coveo-no-wrap">
          <span class="CoveoExcerpt"></span>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell">
<div class='table-wrap'>
<table class="CoveoFieldTable">
            <tr data-field="@sfcompany" data-split-values="false" data-caption="Company"></tr>
            <tr data-field="@sfcreateddate" data-helper="dateTime" data-split-values="false" data-caption="Created date"></tr>
            <tr data-field="@sfleadstatus" data-split-values="false" data-caption="Status"></tr>
          </table>
          </div>
        </div>
      </div>
    </div>
    </script>
    <script id="SalesforceContact" class="result-template" type="text/html" data-field-objecttype="Contact"><div class="coveo-result-frame">
      <div class="coveo-result-row">
        <div class="coveo-result-cell coveo-no-wrap" style="vertical-align: middle">
          <img class="CoveoThumbnail" data-no-thumbnail-class="coveo-sprites-user-small">
          <a class="CoveoSalesforceResultLink"></a>
        </div>
        <div class="coveo-result-cell" style="text-align:right; padding-right:5px; width:126px;vertical-align: middle;font-size:12px;">
          <span class="CoveoAttachToCase" data-display-text="false"></span>
          <span class="CoveoFieldValue" data-field="@date" data-helper="dateTime"></span>
        </div>
        <div class="coveo-result-cell" style="width:20px; vertical-align:middle; text-align:right">
          <div class="CoveoBoxResultAction">
            <div class="CoveoBoxQuickview"></div>
            <div class="CoveoBoxAttachToCase"></div>
          </div>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell coveo-no-wrap">
          <span class="CoveoExcerpt"></span>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell">
<div class='table-wrap'>
<table class="CoveoFieldTable" data-minimized-by-default="false" data-allow-minimization="false">
            <tr data-caption="Account name" data-field="@sfaccountname" data-split-values="false"></tr>
            <tr data-field="@sfcontactphone" data-split-values="false" data-caption="Phone"></tr>
            <tr data-field="@sfemail" data-split-values="false" data-caption="Email" data-helper="email" data-html-value="true"></tr>
            <tr data-caption="Last modified date" data-field="@sflastmodifieddate" data-helper="dateTime" data-split-values="false"></tr>
          </table>
          </div>
        </div>
      </div>
    </div>
    </script>
    <script id="Chatter" class="result-template" type="text/html" data-field-objecttype="FeedItem,FeedComment"><div class="coveo-result-frame">
      <div class="coveo-result-row">
        <div class="coveo-result-cell" style="vertical-align: middle;width: 40px;">
          <span class="CoveoIcon" data-small="true"></span>
        </div>
        <div class="coveo-result-cell" style="font-size:13px;padding-top:5px;padding-bottom:5px;vertical-align: middle">
          <span class="CoveoChatterPostedBy"></span>
        </div>
        <div class="coveo-result-cell" style="width:124px;text-align:right;font-size:12px; vertical-align: middle;padding-right: 5px">
          <span class="CoveoAttachToCase" data-display-text="false"></span>
          <span class="CoveoFieldValue" data-field="@date" data-helper="date"></span>
        </div>
        <div class="coveo-result-cell" style="width:20px; vertical-align:middle; text-align:right; vertical-align: middle">
          <div class="CoveoBoxResultAction">
            <div class="CoveoBoxQuickview"></div>
            <div class="CoveoBoxAttachToCase"></div>
          </div>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell coveo-no-wrap" style="font-size:15px">
          <a class="CoveoSalesforceResultLink"></a>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell" style="font-size:13px;padding-top:5px;padding-bottom:5px;">
          <span class="CoveoChatterLikedBy" data-nb-likes-to-render="1"></span>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell" style="font-size:13px;padding-top:5px;padding-bottom:5px;">
          <span class="CoveoChatterPostAttachment"></span>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell" style="font-size:13px;padding-top:5px;padding-bottom:5px;">
          <span class="CoveoResultFolding" data-result-template-id="Chatter"></span>
        </div>
      </div>
    </div>
    </script>
    <script id="Salesforce" class="result-template" type="text/html" data-field-sfid=""><div class="coveo-result-frame">
      <div class="coveo-result-row">
        <div class="coveo-result-cell coveo-no-wrap" style="vertical-align: middle">
          <span class="CoveoIcon" data-small="true"></span>
          <a class="CoveoSalesforceResultLink"></a>
        </div>
        <div class="coveo-result-cell" style="text-align:right; padding-right:5px; width:126px;vertical-align: middle;font-size:12px;">
          <span class="CoveoAttachToCase" data-display-text="false"></span>
          <span class="CoveoFieldValue" data-field="@date" data-helper="dateTime"></span>
        </div>
        <div class="coveo-result-cell" style="width:20px; vertical-align:middle; text-align:right">
          <div class="CoveoBoxResultAction">
            <div class="CoveoBoxQuickview"></div>
            <div class="CoveoBoxAttachToCase"></div>
          </div>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell coveo-no-wrap">
          <span class="CoveoExcerpt"></span>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell">
<div class='table-wrap'>
          <table class="CoveoFieldTable">
            <tr data-field="@sfaccountname" data-split-values="false" data-caption="Account"></tr>
            <tr data-field="@sfownername" data-split-values="false" data-caption="Owner"></tr>
            <tr data-field="@sfcasestatus" data-split-values="false" data-caption="Status"></tr>
            <tr data-field="@sfcasepriority" data-split-values="false" data-caption="Priority"></tr>
            <tr data-field="@sfcasecloseddate" data-helper="dateTime" data-split-values="false" data-caption="Case closed date"></tr>
            <tr data-field="@sfopportunityamountconverted" data-helper="currency" data-caption="Total"></tr>
            <tr data-field="@sfopportunitylicensingstotalcconverted" data-helper="currency" data-caption="License"></tr>
            <tr data-field="@sfopportunityamountsupportcconverted" data-helper="currency" data-caption="Support"></tr>
            <tr data-field="@sfopportunityconsultingstotalcconverted" data-helper="currency" data-caption="Consulting"></tr>
            <tr data-field="@sfopportunitystagename" data-split-values="false" data-caption="Stage"></tr>
            <tr data-field="@sfopportunitydealtypec" data-split-values="false" data-caption="Deal type"></tr>
            <tr data-field="@sfopportunitycompetitionc" data-split-values="false" data-caption="Competition"></tr>
            <tr data-field="@sfibdusername" data-split-values="false" data-caption="ISR"></tr>
            <tr data-field="@sfopportunityregionc" data-split-values="false" data-caption="Region"></tr>
            <tr data-field="@sfleadsource" data-split-values="false" data-caption="Lead source"></tr>
            <tr data-field="@sfleadstatus" data-split-values="false" data-caption="Lead status"></tr>
            <tr data-field="@sflastmodifieddate" data-helper="dateTime" data-split-values="false" data-caption="Last modified date"></tr>
            </tbody>
          </table>
        </div>
        </div>
      </div>
    </div></script>
    <script id="Default" class="result-template" type="text/html"><div class="coveo-result-frame">
      <div class="coveo-result-row">
        <div class="coveo-result-cell coveo-no-wrap" style="vertical-align: middle">
          <span class="CoveoIcon" data-small="true"></span>
          <a class="CoveoSalesforceResultLink"></a>
        </div>
        <div class="coveo-result-cell" style="text-align:right; padding-right:5px; width:124px;vertical-align: middle;font-size:12px;">
          <span class="CoveoAttachToCase" data-display-text="false"></span>
          <span class="CoveoFieldValue" data-field="@date" data-helper="dateTime"></span>
        </div>
        <div class="coveo-result-cell" style="width:20px; vertical-align:middle; text-align:right">
          <div class="CoveoBoxResultAction">
            <div class="CoveoBoxQuickview"></div>
            <div class="CoveoBoxAttachToCase"></div>
          </div>
        </div>
      </div>
      <div class="coveo-result-row">
        <div class="coveo-result-cell coveo-no-wrap">
          <span class="CoveoExcerpt"></span>
        </div>
      </div>
    </div></script>
  </div>
</div>

This article explains the different sections of the default Insight Panel.

Note

All the components that start with CoveoBox were created specifically for the Insight Panel.

CoveoBox

The whole Insight Panel is declared in the CoveoBox component.

You should consider this element as the root of your Insight Panel. Everything related to it should be inside of it.

For more information, see Box component.

CoveoFoldingForThread

The folding component is used to be able to show results as children of their parent result (see Folding results).

For more information, see FoldingForThread.

CoveoAnalytics

The Analytics component is used to automatically send Usage Analytics data to Coveo.

For more information, see Coveo Analytics Component.

coveo-box-query-section and CoveoBoxQuerySome

Note

When a class is in lower case and its words are separated by hyphens, it’s typically only used for CSS purposes.

The coveo-box-query-section is used to contain the CoveoBoxQuerySome component.

The BoxQuerySome component is used to automatically include Salesforce fields to the query of an Insight Panel.

For more information, see BoxQuerySome component.

CoveoBoxHeader

The BoxHeader component takes care of instantiating a Searchbox component with preconfigured options and a placeholder.

For more information, see BoxHeader component.

CoveoShareQuery

The ShareQuery component allows users to share their query with other users.

For more information, see Coveo ShareQuery component.

CoveoPreferencesPanel, CoveoResultsPreferences, and CoveoResultsFiltersPreferences

The PreferencesPanel component allows users to save user-specific preferences they want to keep when accessing a search page.

For more information, see Coveo PreferencesPanel component.

coveo-box-popups-section

Note

When a class is in lower case and its words are separated by hyphens, it’s typically only used for CSS purposes.

The coveo-box-popups-section contains the components that should appear under the search box, but before the result section.

It’s called as such because components in this section typically open in a pop up that momentarily covers the results.

coveo-tab-section and CoveoTab

Note

When a class is in lower case and its words are separated by hyphens, it’s typically only used for CSS purposes.

The coveo-tab-section is used to contain CoveoTab components. Tabs are used so users can easily switch the context of their search.

For more information, see Coveo Tab component.

CoveoAttachedResultsTab

The AttachedResultsTab is a special Tab component, and allows users to see all of the results they have attached to their currently viewed case.

For more information, see AttachedResults component.

CoveoBoxPopup

The BoxPopup component allows you to add sections that can be shown or hidden when the user clicks on them. It’s only a container inside of which you can put other components.

For more information, see BoxPopup component.

Note

When a class is in lower case and its words are separated by hyphens, it’s typically only used for CSS purposes.

The coveo-box-facet-column is used to contain CoveoFacet components.

Facets are used to display a selectable list of values for a certain field, so users can narrow their search.

For more information, see Coveo Facet component.

CoveoBoxCurrentSort

The BoxCurrentSort component is a utility that sets a title on its BoxPopup container.

For more information, see BoxCurrentSort component.

coveo-sort-section and CoveoSort

Note

When a class is in lower case and its words are separated by hyphens, it’s typically only used for CSS purposes.

The coveo-sort-column is used to contain the CoveoSort component. Sorts are used to allow end users to easily change the result ordering.

For more information, see Coveo Sort component.

coveo-box-settings

Note

When a class is in lower case and its words are separated by hyphens, it’s typically only used for CSS purposes.

The coveo-box-settings contains all the elements that should be shown between the tabs and the results.

It usually contains the BoxExpandLink, BoxEditLink, and BoxCreateArticle components.

CoveoBoxExpandLink

The BoxExpandLink component takes care of creating a clickable link that expands to a full search interface page.

For more information, see BoxExpandLink component.

CoveoBoxEditLink

The BoxEditComponent provides a clickable button that expands the current interface to another page that contains the Interface Editor.

For more information, see BoxEditLink component.

CoveoBoxCreateArticle

The BoxCreateArticle component allows users to create a knowledge article directly from a case.

For more information, see BoxCreateArticle component.

CoveoBoxQuerySummary

The BoxQuerySummary component displays information about the currently displayed range of results.

For more information, see BoxQuerySummary component.

CoveoTriggers

The Triggers component enables the use of triggers generated by the Coveo Search API in the query pipeline.

For more information, see Coveo Triggers component.

CoveoBreadcrumb

The Breadcrumb component displays a summary of the currently active filters.

For more information, see Coveo Breadcrumb component.

CoveoDidYouMean

The DidYouMean component is responsible for displaying query corrections.

For more information, see Coveo DidYouMean component.

CoveoErrorReport

The ErrorReport component takes care of handling fatal errors when doing a query on the index / Search API.

For more information, see Coveo ErrorReport component.

CoveoBoxBody and result-template

The BoxBody component takes care of appending a ResultList component and ensuring that the correct CSS styles are applied so that infinite scrolling works correctly.

Result templates are defined by a script tag with the result-template class.

For more information, see BoxBody component.