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

This is for:

Developer System Administrator

In this article

Create a new Visualforce page
Edit the layout of the Console to display the page
Verify your layout
Create a standard Coveo Box component
What’s Next?

Salesforce Classic

Pro and Enterprise editions

Deprecated

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 Creating 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: This is the standard Salesforce controller that you need to reference in order to get the current record id. In this case, this is a custom Box that would be used for Case objects.

For other types of objects, you could of course reference any other controller, such as Contact , Account, Lead, Opportunity, etc.
cache: false. Since you’re developing, you don’t want to cache the page.
showHeader: false. Setting this to true would display the standard Salesforce header in the page.
sidebar: false. Setting this to true would display the standard Salesforce sidebar in the page.
standardstylesheets: false. Setting this to true would include the standard Salesforce CSS in the page.

Edit the layout of the Console to display the page

You then need to edit the layout of your Console in order to display your Visualforce page (see the Salesforce article Add Console Components to Page Layouts).

You can then reference your page as such:

style: Accordion. This works very well if you want to have many pages/component in your layout. You can stack them all independently.
width: You can set it as wide as you want. However, the wider you set it, the more information you will eventually be able to display.
type: Choose Visualforce page, which is what you just created.
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:

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:

What’s Next?

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