> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appsloth.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Banners
> Add informational banners to your application with AppSloth
## Prerequisites
Before using the AppSloth Banner component, make sure you've already [set up AppSloth](/quickstart) 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:
```jsx Next.js App Router {3,14} theme={null}
// app/layout.js or app/layout.tsx
import { AppSlothProvider } from 'appsloth/provider';
import { Banner } from 'appsloth/banner';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
```jsx Next.js Pages Router {3,9} theme={null}
// pages/_app.js or pages/_app.tsx
import { AppSlothProvider } from "appsloth/provider";
import { Banner } from "appsloth/banner";
function MyApp({ Component, pageProps }) {
return (
);
}
export default MyApp;
```
```jsx React {3,9} theme={null}
// src/App.jsx or src/App.tsx
import { AppSlothProvider } from "appsloth/provider";
import { Banner } from "appsloth/banner";
function App() {
return (
);
}
export default App;
```
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
```jsx theme={null}
import { Banner } from 'appsloth/banner';
// The simplest implementation - the component handles everything automatically
// You can also add it to a specific section of your layout
{/* Your content */}
```
## 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](https://dashboard.appsloth.com) 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
## 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:
| Prop | Type | Default | Description |
| -------------------- | ----------------- | ------- | ----------------------------------------------------------- |
| `containerClassName` | string | "" | Class name for the container element that wraps all banners |
| `bannerClassName` | string | "" | Class name applied to each individual banner |
| `variant` | "info" \| "error" | "info" | Default variant style for all banners |
| `variantStyles` | Object | - | Custom styles for different variants to override defaults |
### Custom Styling Example
```jsx theme={null}
```
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:
```jsx theme={null}
import { BannerComponent } from "appsloth/banner";
// Static banner message
;
```
The `BannerComponent` accepts these props:
| Prop | Type | Default | Description |
| --------------- | ------------------- | ---------- | ------------------------------------ |
| `message` | string | *Required* | The message to display in the banner |
| `variant` | "info" \| "error" | "info" | Styling variant for the banner |
| `className` | string | "" | Additional CSS classes for styling |
| `link` | string | undefined | URL to navigate to when clicked |
| `allowedPaths` | string\[] \| string | undefined | Paths on which to show the banner |
| `excludedPaths` | string\[] \| string | undefined | Paths on which to hide the banner |
| `variantStyles` | Object | - | Custom styles for different variants |
## Next Steps
Now that you've added AppSloth Banners to your application, explore more features:
Collect and manage user feedback to improve your product
Send targeted in-app messages and alerts to your users
Collect feedback and present salvage offers when users try to cancel