Banners are a powerful way to deliver timely announcements directly within your application. This guide will walk you through the configuration process step-by-step.
1. Get Started
Log in to your Usetiful account. From the Overview page, click the Banners module to enter the banner management area.
2. Choose a Template
You can either build a banner from scratch or save time by selecting a predefined template:
Sales Campaign: Perfect for promotions and discounts.
Maintenance Announcement: Ideal for scheduled downtime or technical updates.
Feature Announcement: Use this to highlight new tools or updates in your app.
Help Articles: Guide users toward educational resources and documentation.
Create New: Start with a blank canvas for a custom design.
3. Configure Placement & Layout
Decide exactly where your banner will appear on the screen:
Position: Choose Top, Bottom, or Embedded.
Embedded Settings: If you choose "Embedded," you can anchor the banner to a specific element on your page (Before, After, or Inside) and adjust the distance.
Alignment: Specify if the content should lean toward the Left or Right.
4. Define Action Buttons and Interactions
How should users engage with your banner? You have two main options:
Individual Buttons: Add specific buttons like "Close," "Open Tour," "Open URL," or "Open Survey."
Clickable Banner: Make the Whole Banner a link. Any click on the banner will trigger your chosen action.
Action Behavior & Logic
When setting up your buttons or clickable banner, you can refine how they behave:
Close Banner on Click: Enable this to automatically dismiss the banner once a user clicks a button or the banner itself.
Open in a New Tab: You can decide whether a page, tour, or survey opens in the current window or in a new tab.
Display Close Action: Choose whether to explicitly show a close option to give users an easy exit.
Available Actions
| Action | Result |
| Open URL | Redirects the user to a specific webpage. |
| Open Tour | Starts a guided tour (you can specify the starting URL). |
| Open Survey | Triggers a custom survey you have created. |
5. Customize Styling
Make the banner match your brand identity:
Close Button: Enable "Display as cross" to replace the text button with an (X) icon.
Borders: Customize the Style (Solid, Dashed, etc.), Width (thickness), Radius (rounded corners), and Color.
6. Advanced Settings
Click on Settings to fine-tune how and where the banner behaves:
Page Targeting: Limit the banner to specific pages.
Frequency: Toggle "Show to each user just once" to prevent repetitive pop-ups.
Themes: Apply your saved layout Theme for instant brand consistency.
Localization: Enable Localization to translate your banner into multiple languages.