Custom Console Component
A Custom Console Component in Salesforce is an admin-added Visualforce page, Lightning component, or Canvas app that lives in a designated area of a Service Console or Sales Console: the sidebar, footer, highlights panel, or related-list area.
Definition
A Custom Console Component in Salesforce is an admin-added Visualforce page, Lightning component, or Canvas app that lives in a designated area of a Service Console or Sales Console: the sidebar, footer, highlights panel, or related-list area. The component extends the console with functionality that the standard Salesforce UI does not provide, such as showing external data alongside the Salesforce record, providing agent productivity tools (notes, scratchpad, snippets), or embedding a third-party app inside the agent workspace.
Custom Console Components exist because console agents need fast access to context that lives outside the current record. A support agent on a Case needs to see the customer order history, an order-line system, the contract terms, and maybe a billing system snapshot. Cramming all of that into Salesforce native components is slow; embedding a Custom Console Component pulls the external context into the agent flow without forcing a tab switch.
How Custom Console Components extend the agent workspace
Component types and where they live
A Custom Console Component is one of three things: a Visualforce page, a Lightning component (Aura or LWC), or a Canvas app. It lives in one of five console regions: the left sidebar, the right sidebar, the footer, the highlights panel, or as a related-list extension. Each region has its own size constraints and rendering rules.
Sidebar and footer components
Left and right sidebar components live alongside the main record view and persist as the agent navigates between subtabs. Footer components live at the bottom of the console and pop up on click. The persistence behavior makes sidebars right for context that should always be visible (timer, agent state, recently viewed records) and footers right for occasional-use tools (snippets, knowledge search).
Highlights Panel and Related-List components
The Highlights Panel sits at the top of the record view and shows key fields. Custom components can replace or augment it with computed values, badges, or external data. Related-list extensions extend the right-rail related lists with custom row formatting or aggregated data.
Building a Lightning Custom Console Component
For modern builds, use a Lightning Web Component or Aura component. Configure the component in the Lightning App Builder, place it on the App Page, and use the workspaceAPI to interact with the active tab. The component can read the current record ID, refresh on data change, and trigger console actions like openTab or openSubtab.
Visualforce Custom Console Components
Older orgs and Classic console apps use Visualforce-based Custom Console Components. These run inside an iframe and use the older sforce.console JavaScript API. They still work in Lightning Console Apps through a compatibility layer, but new builds should use Lightning.
Canvas-based Custom Console Components
For embedding an external web app, Canvas is the right pattern. The Canvas app renders in an iframe, receives a signed request with user identity and org context, and can render any web content. Canvas Custom Console Components are how teams bring Splunk dashboards, billing portals, or chatbot interfaces into the agent workspace.
Communication between components and the console
The workspaceAPI (Lightning) or sforce.console (Classic) JavaScript APIs let Custom Console Components interact with the rest of the console. Read the active tab, open subtabs, refresh the page, set tab labels, fire toast notifications. Without this API, the component is isolated; with it, the component participates in the agent workflow.
How to add a Custom Console Component
Most of the work is building the component itself. Wiring it into the console takes a few clicks in Setup or App Builder.
- Build the component
Lightning Web Component, Aura, Visualforce, or Canvas. Pick based on existing codebase, modern best practice (LWC for new builds), or what the embedded content requires (Canvas for external apps).
- Add the component to the console app
In Setup, App Manager, edit the Lightning Console App. In App Builder, drag the component into the desired region (sidebar, footer, highlights). Save and activate.
- Configure permissions
Grant access to the component through permission sets. Components that read external data also need the supporting integration permissions.
- Test in the console
Open the console as an agent user. Confirm the component renders in the right region, shows the right data, and responds correctly to record navigation.
- Configure component-level settings
Many Custom Console Components have their own settings (data source, refresh interval, display options). Configure these per app or per user.
- Iterate based on agent feedback
Custom Console Components evolve based on real-world use. Build a feedback loop with the agent team to refine functionality.
- Visualforce Custom Console Components in Lightning console apps run through a compatibility iframe. The iframe adds overhead; LWC is faster.
- Component placement in App Builder is per console app. Adding to the Service Console does not add to the Sales Console; configure both if needed.
- External-data components have to handle authentication. Named Credentials are the recommended pattern, not stored API keys.
- Footer components are easy to overlook; agents do not see them unless they click. Test usability with real agents.
- Custom Console Components compete for screen real estate with the standard record view. Crowded layouts slow agents down; pilot carefully.
Trust & references
Cross-checked against the following references.
- Custom Components for Lightning Console AppsSalesforce Help
Straight from the source - Salesforce's reference material on Custom Console Component.
- Console Components OverviewSalesforce Help
- Canvas Developer GuideSalesforce Developers
About the Author
Dipojjal Chakrabarti is a B2C Solution Architect with 29 Salesforce certifications and over 13 years in the Salesforce ecosystem. He runs salesforcedictionary.com to help admins, developers, architects, and cert/interview candidates sharpen their fundamentals. More about Dipojjal.
Test your knowledge
Q1. What is a Custom Console Component?
Q2. What technologies can be used to build Custom Console Components?
Q3. What's a common use case for a Custom Console Component?
Discussion
Loading discussion…