Announcement bar
One line across your site
Free delivery this week, a new opening, a holiday closure: some news needs to reach everybody, on every page, without a redesign. This widget is a single line with a button beside it, sitting in your page or stuck to the top or bottom of the window so it stays in view while the visitor scrolls.
Set it up
- Make an announcement bar widget. Sign in at dreamwidget.com/dashboard, press Announcement bar and give it a name for your own list.
- Write the line. On the Content tab, The line is the announcement itself. Keep it to one sentence: this is a bar, not a paragraph, and on a phone there is room for very little.
- Add the button, if you want one. Button text is what it says and Button link is where it goes. Leave the text empty for a bar with no button.
- Choose where it sits. On the Design tab, Position offers three answers, described below.
- Press Save and Publish. Then copy the embed code from the Settings tab and paste it on your page. To have the bar on every page, paste it into your website's header or footer template rather than into one page. Our embedding guide shows where for each website builder.
Where it sits
- In the page, where the code is pasted. The bar behaves like any other part of your page and scrolls away with it. This one needs nothing special from your website.
- Stuck to the top of the window. The bar stays across the top while the visitor scrolls, and the page is pushed down so nothing is hidden underneath it.
- Stuck to the bottom of the window. The same thing along the bottom edge.
The two stuck choices need the embed code copied from this editor, script included, because it is that script that holds the page clear of the bar. If you have pasted an older embed without it, copy the code again from the Settings tab.
The preview here always draws the bar in place so you can style it, whichever of the three you have chosen.
Letting visitors close it
Visitors can close it, on the Content tab, puts a small cross at the end of the bar. Stays closed for, days is how long that visitor's browser remembers, so 30 means a month of peace for somebody who has already read it and closed it.
The cross has its own Close button section on the Design tab, with a color and a size. That section only appears when visitors are allowed to close the bar, because otherwise there would be no cross for it to act on.
Making a new announcement show again
A visitor who closed your last announcement should still see the next one. Announcement id on the Content tab is what tells the two apart. It is any short word or number you like.
Change it whenever the announcement changes, for example from delivery-may to summer-hours, and everybody sees the new bar even if they closed the old one. Leave it alone and the bar stays closed for anyone who dismissed it.
The look
The line is a section of its own for the text: font, size, weight, letter spacing, line height, color and hover color. Bold line, when no weight is chosen above is a quick way to thicken the text if you have not set a weight yourself.
The Button section has the fill, the text color, the stroke, the corner radius, the padding and what happens under the pointer, and there is a library of ready made button styles to pick from. The widget's own background and its padding are at the bottom of the Design tab.
Desktop and Mobile
The editor has two screens, Desktop and Mobile. Every setting on the Design tab is kept once for each, and the buttons above the preview choose which one you are editing. A change lands on the screen you are looking at and nowhere else, unless you tick Edit all screens above the preview. A tablet is drawn from Desktop.
The words, the link and the closing behavior are shared by every screen. A bar is the widget where the mobile screen matters most, because a line that fits a desktop in one line can wrap to three on a phone. See both above the preview shows you exactly that before you publish.
Replay draws the widget again from the start, which brings back a bar you closed in the preview while looking around.
If something goes wrong
The bar is not stuck to the window. The embed code on your page is an older one without the script. Copy it again from the Settings tab and replace what you pasted.
The bar covers your own menu. Choose Stuck to the bottom of the window, or use In the page, where the code is pasted and paste it above your menu in your website's template.
You closed it and cannot get it back. Your own browser is remembering. Change Announcement id, or open your site in a private window to see it as a new visitor would.
The text wraps on a phone. Switch to Mobile above the preview and lower the text size there, or shorten the line.
Anything else: hello@dreamwidget.com, and tell us the widget's name.