The announcement banner is a powerful tool to grab your visitors' attention instantly.
Use it to promote limited-time offers, announce new programs, or share important updates.
This guide covers everything from basic setup to advanced countdown timers.
Where to find this section
Go to Admin panel
Click on Website in the sidebar
Select the Announcement tab
You'll see a page with five configuration tabs: Content, Style, Timer, Action, and Advanced.
Step 1: Enable your banner and add content
Content tab
Start by enabling your banner and writing your message.
Enable banner Toggle the switch to make your banner visible.
When enabled, you'll see "Banner is visible on your website."
When disabled, it shows "Banner is currently hidden."
Banner text
Write your announcement message in the text area. Keep it short and impactful — this is what visitors see first.
Good examples:
"🎉 New year special: 20% off all coaching packages!"
"Limited spots available for January — Book your free call today"
"New online program launching next week 🚀"
Bad examples:
"Welcome to my website, I'm a personal trainer and I offer various services including..." (too long)
"Click here" (not informative)
💡 Tip: Emojis work great in banners to grab attention. The text automatically translates to your other enabled languages.
Avatar (optional)
Upload a small profile picture to appear on the left side of your banner.
This adds a personal touch and makes the announcement feel more human.
Step 2: Customize the style
Style tab
Make your banner match your brand and choose where it appears.
Placement options
Option | Description |
Inline (full width) | Banner spans the entire width of the screen |
Floating (card) | Banner appears as a smaller card that floats on the page |
Position options
Option | Description |
Top | Banner appears at the very top of the page |
Bottom | Banner appears at the bottom of the screen |
Color settings
By default, your banner uses your branding color (set in Website Settings → Branding).
You'll see a badge showing "Using branding color" with a color preview.
To use a custom color instead:
Turn off the "Use branding color" toggle
A color picker appears — choose your background color
Optionally adjust the text color for better contrast
💡 Tip: White text on your brand color usually works best. Make sure there's enough contrast for readability.
Step 3: Add a countdown timer (optional)
Timer tab
Create urgency by adding a live countdown timer to your banner.
Enable countdown timer
Toggle the switch to add a timer. When enabled, you'll see additional options.
Link to pricing timer
If you already have a timer in your pricing section, you can link them together.
Click "Use pricing timer" to sync the dates automatically.
This keeps your offer dates consistent across your website.
Manual timer settings
If not linking to pricing, set your own dates:
Start date (optional): When the countdown should begin showing
End date & time: When the offer expires and countdown reaches zero
Timer styles
Choose from 8 beautiful timer designs:
Style | Best for |
Boxed | Clear, professional look with labeled units |
Minimal | Simple inline text (02h 15m 30s) |
Pills | Compact rounded badges |
Bold | Large, attention-grabbing numbers with colons |
Elegant | Refined with subtle backgrounds |
Flip | Flip clock style with 3D effect |
Neon | Glowing effect for high-energy offers |
Gradient | Modern with colorful backgrounds |
Animation effects
Add movement to draw attention to the seconds:
Animation | Effect |
None | No animation |
Pulse | Gentle pulsing on seconds |
Bounce | Bouncing animation |
Glow | Glowing shadow effect on entire timer |
Shake | Shaking effect on seconds |
Text before timer Add text that appears before the countdown, like "Offer ends in" or "Hurry! Only"
Step 4: Configure the action
Action tab
Decide what happens when visitors interact with your banner.
Action types
Type | What it does |
None (just show text) | Banner displays your message with no clickable action |
Click anywhere opens URL | Clicking anywhere on the banner opens a link |
Show CTA button | Displays a button with custom text and link |
Ask for reactions | Shows thumbs up/down for visitor feedback |
For link or button actions:
URL: Enter where visitors should go. Can be a full URL (https://...) or an internal link (#coaching, /your-username/tools)
Link target: Choose "Same tab" or "New tab"
For button action only:
Button label: Text on the button (e.g., "Book now", "Claim offer", "Learn more")
Button color (optional): Custom button color, defaults to white
Step 5: Advanced settings
Advanced tab
Fine-tune how your banner behaves.
Allow dismiss
Toggle whether visitors can close the banner with an X button. If disabled, the banner stays visible.
After dismissing (when dismissible)
Option | Behavior |
Show again on next visit | Banner reappears in a new browser session |
Hide for X days | Banner stays hidden for the number of days you specify |
Never show again | Banner never shows again for that visitor |
💡 Tip: "Show again on next visit" is usually best for time-sensitive offers. "Never show again" works for one-time announcements.
Banner scheduling
Set specific dates for when your banner should appear and disappear:
Start date: Banner only appears after this date
End date: Banner automatically hides after this date
This is perfect for promotions that start in the future or need to stop automatically.
Improving your banner with AI
Click the "Improve with AI" button at the top of the page to have Dwayne AI suggest better banner text and button copy. This costs 1 AI credit.
Save and publish
After configuring your banner:
Click "Save banner" to save your changes
Click "Publish" at the top of the admin panel to make it live
⚠️ Important: Your banner won't appear on your live website until you publish. You'll see a reminder if you have unpublished changes.
Testing your banner
After dismissing your banner during testing, use the "Clear dismissed state (testing)" button at the bottom of the page.
This resets the dismissed status so you can see your banner again.
Best practices
Do:
Keep your message under 15 words
Include a clear benefit or offer
Use emojis sparingly for visual interest
Set an end date for limited-time offers
Test your banner on mobile devices
Link to a specific page or booking, not just your homepage
Don't:
Write paragraphs of text
Use all caps (feels like shouting)
Set "never show again" for offers that repeat
Forget to publish after saving
Use low-contrast colors that make text hard to read
Troubleshooting
Problem | Solution |
Banner doesn't appear | Check if "Enable banner" is on and you've published changes |
Banner keeps showing after dismiss | Check your dismiss behavior setting in Advanced tab |
Timer shows 00:00:00 | Your end date has passed — update it to a future date |
Colors look wrong | Make sure text color has enough contrast with background |
Banner appears then disappears | Check schedule dates in Advanced tab |
Can't test banner | Use "Clear dismissed state" button at the bottom |