Banner (Default)
Customize the default discount banner — colors, top/bottom toggles, text template, countdown timers, and more.
The default display mode shows a banner bar at the top, bottom, or both edges of your page with the discount info. No code needed — just configure it in the dashboard.
Best for: Most sites. Drop a script tag, customize from the dashboard, done.
Want a centered modal instead (or in addition)? See Popup.
Setup
Add this before </body>:
<script src="https://www.evendeals.com/banner.js"></script>That's it. The script detects the visitor's country, fetches the discount, and renders the banner.
Top + bottom
The banner is split into two independent slots — top and bottom. Each has its own enable toggle and its own design settings, so you can:
- Enable just the top banner (default).
- Enable just the bottom banner.
- Enable both simultaneously — handy if you want a sticky offer up top and a compact reminder pinned to the bottom.
Each slot is configured separately in Dashboard → Display → Top Banner and Dashboard → Display → Bottom Banner.
Text template
The banner text supports these template variables:
| Variable | Replaced with | Example |
|---|---|---|
{country} | Visitor's country name | India |
{discount_amount} | Discount percentage | 30% |
{coupon_code} | The coupon code (click-to-copy) | PPP_IN_30 |
{country_flag} | Country flag image |  |
{timer} | Countdown timer (if enabled) | 02:45:30 |
Default template:
{country_flag} It looks like you're visiting from {country}! Get {discount_amount} off with code {coupon_code}Design options
Configure these per slot in Dashboard → Display → Top Banner / Bottom Banner:
| Option | Description | Default |
|---|---|---|
| Background color | Banner background | #1a1a2e |
| Font color | Text color | #ffffff |
| Font size | Text size | 0.875rem |
| Sticky | Banner stays visible on scroll | false |
| Show close icon | Adds an X button to dismiss | true |
| Container selector | Place banner inside a specific element instead of body | body |
| Show powered by | Evendeals branding | Plan-dependent |
Click-to-copy
The {coupon_code} variable renders as a clickable element. When visitors click it, the code is copied to their clipboard and a "Copied!" tooltip appears.
Powered-by badge
Free plans show a small "⚡ Evendeals" badge in the banner. Paid plans can hide it.
Countdown timer
Add urgency by showing a countdown in the banner. Configure in Dashboard → Display → Timer.
Timer types
Fixed deadline — Set a specific date and time. All visitors see the same countdown. Use case: time-limited sales, product launches.
Evergreen (per visitor) — Each visitor gets their own timer starting from their first visit. Persists across page reloads. Use case: always-on urgency without a real deadline.
Changing the timer config in the dashboard automatically resets all visitors' timers.
Display modes
Inline — Renders inside the banner text wherever you place {timer}:
Get {discount_amount} off — offer ends in {timer}!Result: Get 30% off — offer ends in 02:45:30!
Block — Renders as a separate block with large segmented digits next to the banner text. Labels (Days, Hours, etc.) appear below each segment.
Format options
| Format | Example |
|---|---|
dhms | 02:14:45:30 |
hms | 62:45:30 |
ms | 3765:30 |
human_readable | 2 days 14 hours 45 minutes 30 seconds |
human_readable_short | 2d 14h 45m 30s |
You can also customize the separator (default :), show labels, background color, and border radius of the timer block.
When the timer ends
| Behavior | What happens |
|---|---|
| Hide | The entire banner is removed from the page |
| Freeze | Timer stops at 00:00:00, banner stays visible |
| Alternate text | Banner text changes to a different message (supports the same template variables) |