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—no code required. See Dynamic Carousel Banner Overview for product details.

✓ Before You Begin

Ensure you have the following before proceeding:

1. 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.
2. Permissions: You must have System Administrator profile or the Customize Application permission to edit Lightning Home Pages and access Custom Metadata Types.
3. Salesforce edition: Supported on Sales Cloud, Service Cloud, Marketing Cloud, and Community Cloud.
4. 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:

1. Open Lightning App Builder
   From the Home tab in Salesforce, click the gear icon (⚙️) in the top right and select Edit Page. This opens Lightning App Builder for your Home Page.
2. 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.)
3. Drag to Your Page
   Drag the Carousel Banner component onto your page layout. Position it where you want announcements to appear (typically near the top).
4. Configure Component Properties
   On the right side panel, a Properties section appears. Set the following fields:
5. Number of Items Per Page (required): Enter the number of carousel slides visible at one time. For example, enter 1 to show one slide, or 3 to show three slides side-by-side. (Typical value: 1)
6. App Name (required): Enter the exact API name of the app where this carousel should appear. For example, Service_Console, Sales_Console, or LightningHome. Carousels configured for a specific app only display when users are within that app. (To find the API name, go to Setup → Apps → App Manager and view the app's API name.)
7. (Optional) Set Component Visibility
   If you want to limit this carousel to specific users or profiles, click Add a condition under the Visibility section. You can filter by:
8. User profile (e.g., show only to Administrators)
9. User roles
10. Permission sets
11. Custom metadata conditions

📏 Step 2: Configure Banner Content via Custom Metadata

Banner content is managed through Custom Metadata Types—this means you can update or add announcements without editing the page layout. Follow these steps:

Access Custom Metadata Records

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

Field Reference

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

💡 Best Practices

1. 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 by viewing the app's API name in Setup → Apps → App Manager.
2. Use consistent image sizes: All banner images should have the same aspect ratio (recommend 8:3, e.g., 800x300px or 1200x450px) to prevent layout shifts as users navigate the carousel.
3. Deactivate instead of delete: For seasonal or expired announcements, check the Deactivated box instead of deleting the record. This preserves your configuration for future reuse.
4. Test before rollout: After creating your first banner, log out and back in to verify it appears on your Home Page. Make sure visibility filters (if any) are working as expected.
5. Keep content fresh: Update or add new banners regularly to maintain engagement. Stale announcements reduce user attention to new messages.

📋 Next Steps

1. After creating your first banner, test it by navigating to your Home Page and confirming the carousel displays correctly.
2. Create additional banners for different apps or audiences by following Step 2 again.
3. Use component visibility filters to show/hide the carousel based on user profile, role, or permission set.

❓ Troubleshooting

Carousel not appearing on Home Page?

1. Confirm the component has been added to the page in Lightning App Builder and the page has been saved.
2. Check that you have at least one active (non-deactivated) banner item in Custom Metadata Types.
3. Verify the App Name in the component properties matches the current app's API name. If you're on the Home Page, use LightningHome or leave blank.
4. Check component visibility conditions—if a visibility filter is applied, you may not meet the criteria to see the carousel.

Banners showing in wrong app?

1. Verify the App Name Filter field in your metadata record matches the target app's API name exactly (case-sensitive).
2. 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?

1. Check that the image URL is publicly accessible and not behind a login wall.
2. Ensure all images use consistent aspect ratios (recommend 8:3 ratio) to prevent distortion.

Can't access Custom Metadata Types?

1. You must have System Administrator profile or Customize Application permission. Contact your Salesforce admin if you lack these permissions.

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

Knowledge Article Number: KA-00178