Scrolling Announcement Bar

What it does

This scrolling announcement bar keeps your latest news moving in front of your visitors, so it gets noticed right inside your page.

They read each message as it slides by, and you can even add a link to a URL inside it to make them land on the page you want. This way they can catch your sale, your free shipping deal or your newest product.

Designers call this a marquee (a strip of text that keeps sliding sideways). It works great for online stores, apps and creators who always have news to share.

But note that it's part of your page, it's not a popup or a banner, so it can't be closed.

The strip can show:

• your short messages, each one with or without a link
• a small symbol between them (a star, a dot, a lightning bolt or a slash)

Customize it to your liking with the options above, copy the prompt (the set of instructions for your AI) with the button above, then paste it in your AI (ChatGPT, Cursor, Copilot, whatever you use). It then builds the bar in your site's colors and fonts with the options you selected above.

How it works

1. 01

   The visitor reaches your bar as they scroll, with your messages sliding by one by one, each one after the other.

2. 02

   The messages move at one steady pace, so they have time to read each one, even when your list is long.

3. 03

   They put the mouse on the bar and it stops, so they can finish reading or click.

4. 04

   They click a linked message and it opens that page, in the same tab for your own pages or in a new tab for another website.

5. 05

   They move the mouse away and the messages slide on from where they stopped.

6. 06

   On a phone (iPhone or Android), the bar stays on one line, with text big enough to read and links easy to tap.

What you can customize

• Messages: separate them with |, and a page in parentheses turns one into a link. Or leave it empty and your AI finds what's current and asks which to show.
• Speed: go normal, slow or fast. It always keeps a steady pace, so a long list takes longer instead of racing. By default it moves at normal speed.
• Direction: choose if the messages slide from right to left, so each message comes in word by word in reading order, or from left to right. By default they go right to left.
• Separator: you get to pick the little symbol between messages (a star, a dot, a lightning bolt or a slash). We put the star by default. Or you can ask your AI to use a custom one.
• Style: keep the strip flat, or tilt it slightly for a bolder, more playful look. By default it stays flat.
• Colors: by default we use your brand colors, but you can pick your own colors for the strip, the text and the separator with the color picker we show you.
• Placement: set it between sections, stuck to the top, above your header so it scrolls away, pinned to the bottom, or anywhere else. By default it sits between sections.
• Your placement: shows when you pick Other. This way you can describe the spot where you want to add it in your own words, like "under the product photos". Or leave it empty and your AI will ask you where it goes.

Note that our prompt will automatically tell your AI to check the contrast (how much the text stands out from the strip) to improve accessibility. When it's too low, it tells you and suggests the closest color that works.

Your AI never makes up a message, a price or an offer. It takes them from your site, or asks you to define them.

If your visitors should be able to close it, use a slim announcement ribbon with a close button at the top of your site instead.

To slide your partners' logos the same way, add a scrolling strip of partner logos.

When your sale has a real end date, show the time left with a countdown bar for your deadline.