Create a custom Coveo box inside the Salesforce Console for a Coveo Insight Panel Classic Component

Coveo for Salesforce offers a way to create a completely customizable box to be used inside the Salesforce Console.

Here are the steps required to achieve this.

Note

There’s an alternative way of doing this, which doesn’t require as much configuration (see Integrate a Coveo Insight Panel Classic Component and Create a custom Coveo Insight Panel Classic Component).

Create a new Visualforce page

Create a new page inside Salesforce with the following basic markup.

Example

MyCustomBox

<apex:page standardController="Case" cache="false" showheader="false" sidebar="false" standardstylesheets="false">
    Hello world !
</apex:page>
  • standardController: The standard Salesforce controller that must be referenced to get the current record id. In this example, it’s the custom Box that’s used for Case objects. For other types of objects, you can reference other controllers such as Contact , Account, Lead, or Opportunity.

  • cache: false: Since you’re developing, you don’t want to cache the page.

  • showHeader: false: Displays the standard Salesforce header in the page if set to true.

  • sidebar: false: Displays the standard Salesforce sidebar in the page if set to true.

  • standardstylesheets: false: Includes the standard Salesforce CSS in the page if set to true.

Edit the layout of the Console to display the page

To display your Visualforce page, you must edit the layout of your Console. See Add Console Components to Page Layouts for details.

You can then reference your page as follows:

Salesforce layout editor displaying Accordion style subtab component MyBoxForCase Visualforce page in knowledge sidebar Coveo for Salesforce
  • Style: Select Accordion to have many pages/component in your layout. You can stack them all independently.

  • Width: Specify the width of the component in the layout. The wider the component, the more information it can display.

  • Type: Select Visualforce Page.

  • Component: Enter the name of your Visualforce page, with a custom label.

Verify your layout

Normally, with the page you just created, you should get something that looks like this:

Salesforce Case page with a Coveo Box Visualforce component showing Hello world placeholder

Create a standard Coveo Box component

Edit your new page to include the Box Visualforce component.

<apex:page standardController="Case" cache="false" showheader="false" sidebar="false" standardstylesheets="false">
    <CoveoV2:Box recordId="{!id}" debug="true"/>
</apex:page>
  • recordId: The record id of the current object in the page. The Box component needs this id to create its query and initialize itself.

  • debug: True. This includes the debugging version of the resources in the page (Non-minified).

    Don’t forget to remove this attribute before going to production to speedup loading time.

You should then be able to see something similar to this:

Coveo for Salesforce Visualforce preview showing links Go to edition and Go to full search above documentation links

What’s next?

Since the default Full Search page is linked to a Visualforce page, if you want to customize your Full Search component, you must create a new page including your custom code (see Create a custom Visualforce search page).