Quick Start Guide

Published on February 16, 2026 Dynamic Carousel Banner

Setting Up the Dynamic Carousel Banner

This guide walks you through installing and configuring the Dynamic Carousel Banner component on your Salesforce Lightning Home Page. The carousel displays rotating announcements, training content, or updates using custom metadata, with no code required. See Dynamic Carousel Banner Overview for product details.

At a glance: Step 1 adds the component to a Home Page. Step 2 creates slides with Custom Metadata. The whole setup typically takes 10 to 15 minutes.

Before You Begin

Ensure you have the following before proceeding:

Installed package: The Dynamic Carousel Banner managed package must be installed in your org. If not yet installed, contact info@codeylabs.com for the installation URL.
Permissions: You need the System Administrator profile or the Customize Application permission to edit Lightning Home Pages and access Custom Metadata Types.
Salesforce edition: Supported on Sales Cloud, Service Cloud, Marketing Cloud, and Community Cloud.
Lightning enabled: Your org must have Lightning Experience enabled.

Supported Salesforce versions: Winter '21 and later.

Step 1: Add the Component to Your Home Page

Follow these steps to add the carousel component to a Lightning Home Page:

Open Lightning App Builder.
From the Home tab, click the gear icon in the top right and select Edit Page. This opens Lightning App Builder for your Home Page.
Find the component.
In the left panel, scroll down to Custom - Managed and locate Carousel Banner. If you don't see it, the package may not be installed; contact support.
Drag it to your page.
Drag the Carousel Banner component onto your page layout. Position it where you want announcements to appear (typically near the top).
Configure component properties.
In the Properties panel on the right, set the following fields:
Number of Items Per Page (required): The number of carousel slides visible at one time. Enter 1 to show one slide, or 3 to show three side by side. Typical value: 1.
App Name (required): The exact API name of the app where this carousel should appear, for example Service_Console, Sales_Console, or LightningHome. A carousel configured for a specific app only displays when users are within that app. To find the API name, go to Setup > Apps > App Manager and view the app's API name.
(Optional) Set component visibility.
To limit the carousel to specific users, click Add a condition under Visibility. You can filter by:
User profile (for example, show only to Administrators)
User roles
Permission sets
Custom metadata conditions

Step 2: Configure Banner Content via Custom Metadata

Banner content is managed through Custom Metadata Types. You can update or add announcements without editing the page layout.

Access Custom Metadata Records

Click the gear icon in the top right and select Setup.
In the left sidebar, search for Custom Metadata Types and click it.
Find PSC Carousel Banner Item and click Manage Records.
You'll see a list of existing banner slides. Click New to add a banner, or click an existing one to edit it.

Field Reference

When creating or editing a carousel banner item, fill in the following fields:

Field	Required?	Description
Label / Name	Yes	Internal identifier for this banner slide (for example, "Q4 Announcement" or "SSO Training Slide 2"). Not visible to end users.
Display Order	Yes	Numeric sequence in which this slide appears. Use 1, 2, 3, and so on. Slides display in ascending order.
App Name Filter	No	API name of the app where this banner should appear. If blank, the banner appears in all apps. Examples: `Service_Console`, `Sales_Console`, `LightningHome`. Must match the "App Name" configured on the component.
Header Image URL	No	Full URL to the banner's background image (for example, `https://example.com/banner.jpg`). Use landscape images (recommended 800x300px, or a similar 8:3 ratio).
Title	Yes	Main heading displayed on the banner. Keep to 50 characters or less for best display.
Body Content	No	Announcement text or description. Supports plain text and basic HTML. Keep to 200 characters for best readability.
YouTube Embed URL	No	YouTube video URL for embedding (for example, `https://www.youtube.com/embed/VIDEO_ID`). If provided, the video appears alongside or replaces the body content.
Button 1 Label	No	Text on the first action button (for example, "Learn More" or "View Details").
Button 1 Link URL	No	URL the button opens when clicked (for example, `https://help.example.com/article` or a Salesforce internal URL).
Button 2 Label	No	Text for a second optional action button.
Button 2 Link URL	No	URL for the second button.
Deactivated	No	Check this box to hide the banner from all users without deleting the record. Useful for seasonal or temporary banners you may reuse.

Best Practices

Match app names exactly: The App Name in the component properties must match the App Name Filter in your metadata records. If they don't match, the banner won't appear. Double-check the API name in Setup > Apps > App Manager.
Use consistent image sizes: Keep all banner images at the same aspect ratio (8:3, for example 800x300px or 1200x450px) to prevent layout shifts as users move through the carousel.
Deactivate instead of delete: For seasonal or expired announcements, check the Deactivated box rather than deleting the record. This preserves your configuration for reuse.
Test before rollout: After creating your first banner, log out and back in to verify it appears on your Home Page, and confirm any visibility filters work as expected.
Keep content fresh: Update or add banners regularly. Stale announcements reduce attention to new messages.

Next Steps

Navigate to your Home Page and confirm the carousel displays correctly.
Create additional banners for different apps or audiences by repeating Step 2.
Use component visibility filters to show or hide the carousel by user profile, role, or permission set.

Troubleshooting

Carousel not appearing on Home Page? Confirm the component has been added in Lightning App Builder and the page has been saved. Check that at least one active (non-deactivated) banner item exists in Custom Metadata Types. Verify the App Name in the component properties matches the current app's API name. On the Home Page, use LightningHome or leave it blank. Check component visibility conditions. A filter may exclude you from seeing the carousel.

Banners showing in the wrong app?

Verify the App Name Filter in your metadata record matches the target app's API name exactly (case-sensitive).

If the filter is blank, the banner appears in all apps. To restrict it, populate the App Name Filter field.

Images not displaying or appearing distorted?

Check that the image URL is publicly accessible and not behind a login wall.

Ensure all images use a consistent aspect ratio (8:3 recommended) to prevent distortion.

Can't access Custom Metadata Types?
You need the System Administrator profile or the Customize Application permission. Contact your Salesforce admin if you lack these permissions.

Get Support

Still having issues? Contact support at info@codeylabs.com with details about your configuration and any error messages.

Knowledge Article Number: KA-00178