Skip to main content

​
Prerequisites

Before using the AppSloth Banner component, make sure you’ve already set up AppSloth in your project.

​
Adding the Banner Component

The AppSloth Banner component allows you to display important messages to your users across your application. These banners can be informational alerts, announcements, or error notifications. Adding the Banner component to your application is simple: 
// app/layout.js or app/layout.tsx
import { AppSlothProvider } from 'appsloth/provider';
import { Banner } from 'appsloth/banner';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AppSlothProvider 
          userEmail="[email protected]"
          customerId="project-123"
        >
          <main className="flex w-full flex-col">
            <Banner />
            {children}
          </main>
        </AppSlothProvider>
      </body>
    </html>
  );
}
Position your Banner component strategically for optimal user visibility. The most common placement is at the top of your application, just above the navigation bar.

​
How It Works

The Banner component provides a simple yet powerful way to display messages to your users:
  1. Automatic Configuration: The component automatically fetches banner configurations from AppSloth’s servers
  2. Smart Display: The banner remains hidden unless there’s an active banner configured for the current page
  3. Path-Based Display: Banners only appear on the paths you specify in the dashboard
  4. User Interaction: If a link is provided, users can click on the banner to navigate to the specified URL
  5. Multiple Variants: Choose between different styles (info, error) to match the type of message
import { Banner } from 'appsloth/banner';

// The simplest implementation - the component handles everything automatically
<Banner />

// You can also add it to a specific section of your layout
<main className="flex w-full flex-col">
  <Banner />
  <div className="flex w-full justify-end px-12 py-1">
    {/* Your content */}
  </div>
</main>

​
Creating Banners from the Dashboard

Instead of hardcoding banner configurations in your code, AppSloth allows you to create and manage banners directly from the dashboard:
  1. Navigate to Banners: Log into your AppSloth Dashboard and go to the “Banners” section
  2. Create New Banner: Click on the “Create Banner” button
  3. Configure Banner: Set up your banner with the following options:
    • Message: The text to display in the banner
    • Variant: Choose between “info” (blue) or “error” (red) styling
    • Link: Optional URL for when users click the banner
    • Path Rules: Configure where the banner should appear:
      • Allow List: Paths where the banner should be shown
      • Deny List: Paths where the banner should be hidden
This dashboard approach gives you several advantages:
  • Create, update, or remove banners without deploying code changes
  • Instantly publish banners across your application
  • A/B test different banner messages to optimize effectiveness
AppSloth Banner Dashboard

​
Path-Based Display

The Banner component intelligently handles path-based display rules:
  • allowedPaths: Show the banner only on these paths (array or comma-separated string)
  • excludedPaths: Hide the banner on these paths (array or comma-separated string)
  • Path Patterns: Supports both exact paths and regular expression patterns
  • Default Behavior:
    • If no paths are specified, the banner shows on all pages
    • If only allowedPaths is specified, the banner shows only on those paths
    • If only excludedPaths is specified, the banner shows on all paths except those
    • If both are specified, excludedPaths takes precedence over allowedPaths
All of these rules can be configured directly from the AppSloth dashboard without touching your code.

​
Customization

The Banner component accepts a few props for customizing its appearance:
PropTypeDefaultDescription
containerClassNamestring""Class name for the container element that wraps all banners
bannerClassNamestring""Class name applied to each individual banner
variant”info” | “error""info”Default variant style for all banners
variantStylesObject-Custom styles for different variants to override defaults

​
Custom Styling Example

<Banner
  containerClassName="mt-4 sticky top-0 z-50"
  bannerClassName="text-sm font-medium"
  variant="info"
  variantStyles={{
    info: "bg-blue-100 text-blue-800 border-blue-200",
    error: "bg-red-100 text-red-800 border-red-200",
  }}
/>
You can override these styles partially or completely using the variantStyles prop.

​
Using the BannerComponent Directly

For more advanced use cases, you can also use the BannerComponent directly: 
import { BannerComponent } from "appsloth/banner";

// Static banner message
<BannerComponent
  message="Important announcement"
  variant="info"
  link="/learn-more"
  allowedPaths={["/dashboard", "/settings"]}
/>;
The BannerComponent accepts these props:
PropTypeDefaultDescription
messagestringRequiredThe message to display in the banner
variant”info” | “error""info”Styling variant for the banner
classNamestring""Additional CSS classes for styling
linkstringundefinedURL to navigate to when clicked
allowedPathsstring[] | stringundefinedPaths on which to show the banner
excludedPathsstring[] | stringundefinedPaths on which to hide the banner
variantStylesObject-Custom styles for different variants

​
Next Steps

Now that you’ve added AppSloth Banners to your application, explore more features:

Feedback

Collect and manage user feedback to improve your product

Inbox

Send targeted in-app messages and alerts to your users

Retention Modal

Collect feedback and present salvage offers when users try to cancel