Here is the common path: add an existing Lightning component to a console app as a Custom Console Component, either on the page or in the utility bar. This assumes the component is already built and exposed with the right target.
- Expose the component for the console
In the component js-meta.xml file, set isExposed to true and add the target you need: lightning__AppPage to place it on a console page, or lightning__UtilityBar to add it to the utility bar. Add design properties under targetConfigs if admins should configure it.
- Open the console app in Setup
Go to Setup, then App Manager. Find your Lightning console app and choose Edit. This opens the app in the Lightning Experience App Manager where both the pages and the utility bar are configured.
- Place it on a page or in the utility bar
For a page region, edit the relevant console Lightning page in the Lightning App Builder and drag your component into a sidebar, the main region, or the highlights area. For the utility bar, open the Utility Bar Items section, add a utility, and select your component.
- Set properties and save
Fill in any exposed design properties, set the utility label and icon if it is a utility, then save. For a page, activate it and assign it to the app and the right profiles or app contexts.
- Verify in the running console
Open the console app as an agent would, navigate to a record, and confirm the component renders, reads the active record, and responds when you move between tabs.
Lets the component be dropped onto a console Lightning page region, such as a sidebar or the main area, or used as a navigation item.
Lets the component be added to the app utility bar as a docked panel tool, hidden until the agent clicks its icon.
Expose inputs that an admin can fill in from App Manager, so one component can be reused with different configuration and no code change.
Add a single SVG file named for the component to give a utility-bar item a custom icon; only one SVG is allowed per component folder.
- The utility bar does not support Visualforce pages or components. A footer tool must be a Lightning component.
- A utility bar built through the App Manager wizard can be assigned to only one app; assigning the same bar to several apps needs the Metadata API.
- Keep the utility bar short. Salesforce recommends no more than about ten utilities with brief labels so agents can scan it quickly.
- Use the Lightning Console JavaScript API for new components, not the Classic sforce.console toolkit, which is kept working only for migration.