Banner: announcement and promo bars

The Banner widget puts a short, high-visibility message on your site: a sale, a shipping cutoff, a new feature, a policy update, a webinar link. It can be a full-width bar pinned to the top or bottom of the page, or a small card floating in a corner. You can add a call-to-action button, capture emails inline, run a countdown, rotate several messages, and target it to specific pages, devices, or a date window. It’s also the reference widget for the whole editor, so once you’ve set up the banner you already know how every other Amabrik widget works.

This guide walks through it tab by tab. The editor has the same five tabs every widget uses (Content, Style, Display, Targeting, Advanced), each with clearly named sections you drill into. A live desktop and mobile preview sits beside your settings, and your work saves as you go.

Turn it on

From the Widgets page in the dashboard, click Banner. If you don’t have a banner yet, that click opens the editor on a fresh one right away. If you already have one or more, you get the list, with a button to add another. Set it up, and it goes live to your visitors the next time they load a page (there’s nothing to paste: the one Amabrik snippet you already installed runs the banner too). A banner is a page-level widget, so it needs no anchor snippet anywhere in your HTML.

Content tab

This is where you write what the banner says.

Message

Type your announcement in the message box. You can add more than one message: click “Add message” and you’ll get a second box, a third, and so on. With two or more messages the Rotation controls below become useful.

The message box accepts a small set of inline formatting. Write plainly and keep it short: a banner is one line of attention, not a paragraph.

You edit the default language here. Translations for every other language live in the Languages section (under the Advanced tab), so you keep one place per language.

Rotation. Turn on “Rotate messages” to cycle through your messages one at a time. Set the interval in seconds, and pick the transition effect (Fade or Slide). You need at least two messages for rotation to run. Rotation pauses while a visitor hovers the banner, and it respects reduced-motion preferences (the swap is instant for visitors who ask for less motion).

Call to action

Turn on “Show button” to add a CTA button. You then set the button label (per language) and the button URL it links to. Keep the label specific to the action (“Get 20% off”, “Read the update”) rather than vague.

Email capture. Below the button, turn on “Capture emails” to put an email field and a submit button right in the banner. This is how you grow a list from a promo bar.

Because Amabrik is a pass-through and never stores leads, captured emails go straight to the tool you connect. When email capture is on, a “Where emails go” panel appears so you can connect your CRM, email tool, or webhook for this banner. If nothing is connected, you’ll see a warning, since there’s no destination to deliver to.

You set the input placeholder, the submit button label, and the success message shown after a visitor subscribes. You can also:

• Ask for first name and Ask for last name, each with its own placeholder and a “required” switch. These are forwarded to your provider as the contact’s first and last name.
• Show a consent checkbox above the submit button, with your own consent text (word it for your jurisdiction and link your privacy policy). Keep “Consent required” on for GDPR.
• Enable spam protection, a built-in check that blocks bots without a visible CAPTCHA for real people.

The look of the form (layout, input style, colors, padding, corners, border) is set in the Style tab under Form, which only appears once email capture is on.

Element

You can add one optional element before the message. Pick a kind with the button group: None, Icon, Badge, Image, or Video.

• Icon. Choose a curated icon from a searchable grid. It’s tinted with your text color. Only curated icons are allowed (no pasted SVG), so there’s no security risk.
• Badge. A small pill with its own text (like “NEW”) plus a background and text color.
• Image. An https image URL with a height and corner radius. A free image host works fine.
• Video. A YouTube or Vimeo URL (https). It shows as a thumbnail that opens a popup player on click, with an optional Autoplay switch (autoplay is always muted, which devices require).

Style tab

Everything visual lives here. Colors are always full-width rows you click to open a picker, never cramped two-up grids.

Colors

At the top, an Accent color palette sets the banner’s primary color, which is the CTA and submit button background. Click a preset, or open the pen for a custom color.

Below that, a Customize elements list with one row each:

• Background. Opens a popover with three tabs: a solid Color, a Gradient (presets, two color stops, and a direction angle), or an Image (an https URL with a darkness overlay slider so text stays readable). The background always spans the full width of the bar.
• Text. The message text color.
• Button. Filled or Outline, then Normal and Hover states as tabs. Filled has background and text per state; Outline has text and border per state. (This row appears only when the button is on.)

Typography

The shared typography control for the message text, and, when the button is on, for the button. Each opens the full popover: font family, weight, line height, letter spacing, and transform. You can set a separate mobile size with the device toggle.

Decoration

An optional tasteful overlay painted behind the text, with a glyph color and an opacity slider. It works on any background.

Container

The background always goes edge to edge. This section controls the content row inside it: keep it Full width, or turn that off to set a max content width that centers the text. Useful for matching your site’s content column.

Alignment

Text alignment for the message and button: Left, Center, or Right. (Under right-to-left languages this mirrors automatically.)

Disposition

How the message and the button sit together in the row:

• Inline. Text and button on one row.
• Stacked. Button under the text, centered.
• Apart. Text at the start, button pushed to the far end.

On narrow screens the content always stacks, whatever you pick here.

Spacing

Vertical padding for the bar, and (when the button is on) the button’s horizontal and vertical padding.

Corners

The button corner radius, and, when you’re in card mode, the card corner radius.

Form

Visible only when email capture is on. This is the full styling for the inline form: the layout style and input style (each with a visual carousel), form alignment, the input colors as full-width rows (background, text, placeholder, and border normal/hover/focus, each on Auto until you change it), a corner radius, padding (which sets the field height), and a border style and width.

Display tab

Where, when, and how the banner appears.

Mode

Pick Bar or Card.

• A bar spans the full width and pushes the page down. Choose its Position: Top or Bottom.
• A card floats over the page in a corner. Pick the Corner (bottom right, bottom left, top right, top left) and its width. A card always floats and never pushes content, so the Sticky setting doesn’t apply to it.

Trigger

When to show: Show immediately, After a delay (set the seconds), After scroll (set a scroll-depth percent), or On exit intent (when the cursor moves to leave the page; on touch devices, where exit intent isn’t reliable, this falls back to a delay plus a scroll threshold so mobile still gets it).

Auto-hide. Optionally hide the banner after it has shown: After time, or After scroll. You then choose what happens: Hide (it can show again on the next visit) or Dismiss permanently (treated like the visitor closing it: it never shows again on that browser). For the scroll type you can also turn on “Re-show when scrolling back up”, so the banner only appears within a scroll band.

Countdown

Turn on a live timer next to the message for urgency.

• Fixed date counts down to one shared deadline for every visitor (pick the date and time).
• Evergreen counts down a window (in hours) from each visitor’s own first view, stored per visitor, so everyone gets a fresh, personal timer that doesn’t reset on reload.

Set When it reaches zero: Hide the banner or Keep showing it. The countdown drops the days segment once it hits zero days.

Entrance animation

How the banner appears: None, Slide, or Fade. It respects reduced-motion preferences.

Behavior

• Dismissible. Show a close button so visitors can hide it. A dismissed banner stays gone on return visits.
• Sticky. Keep the bar pinned while the page scrolls (on by default). Turn it off and the bar scrolls away with the page.

Targeting tab

Decide who sees the banner.

• Show on. All pages, or only specific pages. For specific pages you get a searchable picker of your site’s real pages (read from its sitemap) plus a manual pattern field for globs like /blog/*.
• Devices. All devices, desktop only, or mobile only. You can run different banners for each.
• Schedule. An optional start and end date and time, so a promo bar turns itself on and off without you remembering. Leave the end empty to run indefinitely.
• Frequency. How often a returning visitor sees it: Always, Once per session, Once every N days (you set the days), or Until dismissed.

Advanced tab

Languages

Every banner is multi-language. The default language is what shows in the preview and to visitors by default. Turn on Auto-detect from the page language to read your page’s html lang and show the matching translation when one exists. The preview language selector lets you check any language in the live preview.

Below that, each language has its own row: the default language is edited in the Message section, and any other language has a Translate button that opens per-message fields plus the button label. Add a language from the picker at the bottom, and remove a non-default one with its trash button. This is the same Languages panel used in every Amabrik widget.

Custom CSS

Raw CSS scoped to the banner element, for fine adjustments. Target selectors like .bar, .cta, and button.

Direction

Reading direction: Auto, Left to right, or Right to left. Auto follows the displayed language (right to left for Arabic, Hebrew, and similar scripts; otherwise left to right) and falls back to your page’s own direction. The whole banner mirrors cleanly either way, including the close button, which moves to the correct side on its own.

Tips

• Keep the message to one short line. A banner competes with your page, so make the words earn their space.
• Use a date Schedule for any time-bound promo, so it switches off on its own when the sale ends.
• For a sale, pair an Evergreen countdown with a clear CTA. Each visitor gets their own deadline, which reads as more honest than a timer that resets.
• If you turn on email capture, connect your destination first. Without one, submissions have nowhere to go.
• Rotate two or three messages rather than cramming everything into one. The rotation pauses on hover so people can read.
• Set a mobile typography size so the message stays readable on small screens without shrinking it everywhere.
• Pick Once per session or Once every N days frequency so regulars aren’t shown the same bar on every page.

FAQ

Should I use a bar or a card?

Use a bar for site-wide announcements you want everyone to see at the top or bottom of the page; it pushes content down so it never covers anything. Use a card when you want a smaller, lower-key message that floats in a corner without taking the full width.

Where do captured emails go?

Straight to the tool you connect in the “Where emails go” panel (your CRM, email tool, or webhook). Amabrik does not store them and there’s no leads viewer, because nothing is kept. Connect a destination before you turn capture on.

What’s the difference between a fixed and an evergreen countdown?

A fixed countdown ends at one date and time for everyone. An evergreen countdown gives each visitor their own window (in hours) starting from the first time they see the banner, and it’s stored per visitor so it doesn’t reset when they reload.

Can I show different banners to desktop and mobile?

Yes. Set one banner to desktop only and another to mobile only in the Targeting tab, and each device sees its own.

Is the banner right-to-left ready?

Yes. Set Direction to Auto (or RTL) in the Advanced tab and the layout mirrors automatically, including the close button. Auto switches to right-to-left for Arabic, Hebrew, and similar scripts.

How do I stop the banner from showing on every page?

In the Targeting tab, set Show on to specific pages and pick them, and set a Frequency like Once per session or Once every N days so returning visitors aren’t shown it repeatedly.

Will the close button keep the banner hidden on the next visit?

Yes. When Dismissible is on and a visitor closes it, the banner stays gone for that browser on return visits. An auto-hide set to “Dismiss permanently” does the same thing without a close button.

Does the banner slow my page down?

No. Its code is fetched only when the banner actually runs, served from Amabrik’s CDN, and it renders in an isolated shadow root so your site’s styles and the banner’s never collide.