Documentation
Airdate Announcement Bar: setup guide
Airdate Announcement Bar is a free HubSpot module that shows a bar around one event, on its own. You type the start date and the duration once. Before the event, the bar shows your "Before" message, with a countdown if you want one. While the event is live, it shows your "During" message on a live color. After it, it shows your "After" message for the days you choose, then it goes away. Dates and times in the messages are shown in each visitor's time zone, and a visitor who closes a message does not see it again.
It works on every HubSpot plan. No app to install, no account to create, no outside script.
Important: the bar shows only on the pages where the module is added. It is not a site-wide setting. See "Install and add the module" below for the header of a template.
1. Install and add the module
- Install Airdate Announcement Bar from the HubSpot Template Marketplace.
- Open a website page or landing page in the editor.
- Add a new section at the top of the page, set it to full width with no padding (section settings, Style), then drag Airdate Announcement Bar from the Add panel into it. The bar sits under your site header; to show it above the header, add the module to the page template in the design manager, above the header. In a blog post or a blog listing, add the module to the template in the design manager instead: the editor of a post does not place modules above its content.
- Set the Start date and time and the Duration, add the links of the three messages, then publish.
A new module has no start date. In the editor, a yellow note says "Set a start date: without one, visitors do not see the bar." Visitors never see this note, and they see no bar until the start date is set.
On more pages. To show the bar on every page built with a template, a developer can add the module to the header of that template in the design manager. HubSpot also lets you make a module global, so that one copy is shared by every template or page that uses it and a change to it applies everywhere: see HubSpot's help on global content. The module itself has no site-wide option: each copy shows on the pages where it is placed.
2. Start and duration
- Start: the date and time the event starts. It is one exact moment: visitors see it in their own time zone.
- Duration (minutes): 60 by default, from 5 to 10080 (seven days). From the start, the "During" message shows for this long. The end of the event is the start plus this duration.
3. The three messages
The Before, During and After groups have the same fields:
- Show this message: on by default. Turn it off and nothing shows at that time: the other messages do not take its place.
- Message: one line of text.
{date}and{time}become the start date and the start time, in each visitor's time zone. See "Dates and times in the message" below. - Link: a page of your site, an outside address or an email address.
- Link text: the text of the button. The button shows only when the message has both a link and a link text. Leave the text empty to show no button.
Default texts:
- Before: "Live webinar on {date} at {time}: save your seat." with a Register button;
- During: "We are live now." with a Join the session button;
- After: "Missed it? The replay is available." with a Watch the replay button.
The Before group has two more fields:
- Show from (days before the start): 14 by default, from 0 to 365. With 0, the Before message shows at any time before the start, as soon as the module is on the page.
- Countdown: on by default. Shows the time left until the start, beside the message. See "Countdown" below.
The After group has one more field:
- Show for (days after the end): 7 by default, from 1 to 365.
4. Closing and key
- Visitors can close the bar: on by default. The bar gets a close button. A closed message stays closed for that visitor; the next message still shows at its time. Turn it off and the bar has no close button: every visitor sees each message for its whole time, even one they closed before.
- Announcement key (optional): bars with the same key share their closed state, on every page of the site. Leave it empty and the start date is the key. See "Closing the bar" below.
5. In the editor
- In the editor, show: Before by default, During, After, or The message of the moment. It only changes what you see in the editor and in previews. On the live page, each visitor sees the message of the moment.
See "In the editor" below for the details.
6. Texts
Every word the module adds is a field, in the Texts group. Write them in your page's language:
- Name of the bar, for screen readers ("Announcement");
- Close button, for screen readers ("Close the announcement");
- Countdown units: days ("d"), hours ("h"), minutes ("min"), seconds ("s");
- Countdown, before the number ("Starts in");
- Screen reader hint for links that open a new tab ("(opens in a new tab)");
- Editor note: no start date. Shown in the editor only.
Dates and times follow the language of the page (without one, the visitor's browser language).
7. Appearance
In the Style tab:
- Position: In the page, where the module is (the default) or Fixed at the bottom of the screen. See "Position" below.
- Alignment: Center (the default) or Left, for the message, the countdown and the button.
- Colors: background, text, background while live, button background and button text.
- Text size: 12 to 22 px, 15 px by default.
- Button corner radius: 0 to 24 px, 6 px by default.
The module uses your theme's font. On narrow screens, the message, the countdown and the button wrap onto several lines.
How the bar picks its message
From the start and the duration, the bar works out three windows:
- Before: from the number of days you set before the start (the start minus that many times 24 hours), up to the start. With 0 days, at any time before the start.
- During: from the start to the end (the start plus the duration). The bar takes the Background while live color.
- After: from the end, for the number of days you set.
Outside these windows, the bar is hidden and the module takes no space (the section around it keeps its own padding: hence the section without padding above). It is hidden too when the message of the moment is turned off, or was closed by this visitor.
The message is picked as the page loads, before it is shown, so the bar does not appear late and push the page down. On a page that is already open, the bar changes at the exact moments: when the Before window opens, at the start, at the end and when the After window closes. Cached pages stay right too: everything is worked out in the visitor's browser.
Dates and times in the message
The start is one exact moment. In every message, {date} and {time} show it in the visitor's own time zone:
{date}: the month and the day, such as "March 6";{time}: the time and the zone, such as "5:00 PM EST" or "17:00 GMT+1" (the short name when the language has one, otherwise the offset).
"Live webinar on {date} at {time}: save your seat." reads "Live webinar on March 6 at 5:00 PM EST: save your seat." for a visitor in New York, and the same moment in their own zone for a visitor in Paris. An evening start in one zone can fall on the next day in another. Both always show the start, in all three messages. The year is not shown.
Countdown
With Countdown on, the Before message shows the time left until the start, after "Starts in":
- one day or more: "Starts in 3 d 04 h 12 min";
- under a day: "Starts in 4 h 05 min";
- under an hour: "Starts in 35 min 07 s".
It changes every minute, then every second in the last hour. At the start, the bar moves on to the During message. The countdown is only part of the Before message. The units and the words before the number are fields in the Texts group.
Closing the bar
- A visitor clicks the close button. The bar goes away at once.
- The module notes, in the visitor's browser, that this message of this bar is closed. The note has no end date.
- On the next visits, that message stays hidden. When the next message's time comes (During after Before, After after During), it shows as usual, and can be closed in turn.
The note is kept in the browser's local storage for this site, under a name that starts with airdate-announcement-bar:. The module sets no cookie. A visitor on another browser or device sees the bar again. If the browser blocks site storage, the message stays closed for that page view only.
See it again to test. Once you closed a message, it stays closed in your browser. To see it again, clear the site data of your site in your browser (in Chrome: the icon left of the address, then Site settings, then Delete data), or open the page in a private window.
One key for several bars
By default, the key is the start date: bars with the same start date share their closed state, and a new date gives a new bar that nobody has closed yet. Type an Announcement key, such as spring-launch, to choose it yourself:
- a visitor who closes the Before message on one page does not see the Before message of any bar with that key, on any page of the site;
- each message is closed on its own: the During and After messages still show.
When you reuse a bar for a new event, change the key too, or leave it empty: with the same key, visitors who closed a message for the last event would not see it for the new one. The key is shared within one site address: pages on another domain or subdomain do not share it.
Position
- In the page, where the module is: the bar sits where you placed the module, and pushes the content below it down. Place it at the top of the page. It fills the width of the section it is in; its content is at most 1200 px wide.
- Fixed at the bottom of the screen: the bar spans the width of the screen, stays at the bottom while the visitor scrolls, and sits above the page content. The place of the module in the page does not change where the bar shows. While it is shown, it covers the bottom of the screen, so the last lines of the page stay under it until the visitor closes it (when closing is on) or its time ends.
In the editor
- In the editor and in previews, the bar shows the message chosen in In the editor, show, even when that message is turned off or you closed it. It does not change by itself there: reload the preview to see the countdown move.
- Without a start date, Before, During and After use a sample date so the texts read right: three days from now, ten minutes ago, or two days ago. The sample date is never used on the live page.
- The message of the moment uses your start date as visitors would, and follows the Show this message switches, but ignores closed messages (closing the bar in the editor or a preview is not remembered). With no start date, or outside the three windows, no bar shows.
- The close button hides the bar in the editor until you reload.
Without JavaScript
The message of the moment is worked out in the visitor's browser. If the browser does not run JavaScript, the bar does not show at all: it cannot know which message to show. The rest of the page is unchanged.
Accessibility
- The bar is a region named "Announcement" (Name of the bar in the Texts group), so screen reader users can find it or skip it.
- The countdown is hidden from screen readers, so a number that changes every second is not read again and again. Keep
{date}or{time}in the Before message: the start is then in the text, readable by everyone. - The close button is 44 by 44 px, has a name for screen readers ("Close the announcement") and a visible focus outline.
- When the bar is closed with the keyboard, the focus moves to the page itself, not lost with the hidden bar, and the page does not scroll. The next Tab starts from the top of the page.
- The button has a visible focus outline in the text color. Links that open a new tab say so to screen readers.
- The live color is only a background: say it with words in the During message, such as "We are live now."
- When the message changes on an open page, screen readers are not interrupted.
- Check the contrast of your colors: text on background, text on the live background, button text on the button.
Limits
- Two bars fixed at the bottom of the screen on the same page sit on top of each other: use one at a time.
- A bar fixed at the bottom stays inside its section if a theme animates sections with a CSS transform: then use the position in the page.
- Two bars on one page: give each a different Name of the bar, so screen reader users can tell them apart.
- One event per module. One start date, one duration, three messages. For the next event, change the start date (and the key, if you set one), or add another module.
- The date is typed by hand. It is not synced with HubSpot marketing events, your webinar tool or your CRM.
- Only the start in the message.
{date}and{time}show the start, not the end. - Only where it is added. The module shows on the pages where it is placed, or on the pages of a template whose header holds it.
- Fixed at the bottom covers the page. The bar sits over the bottom of the page while it is shown. Other elements fixed at the bottom of the screen, such as a cookie banner or a chat button, can overlap it.
- Per browser. A closed message is remembered by the browser, not the person, and for good. Another browser or device shows it again.
- The switch uses the clock of the visitor's device. A visitor whose clock is wrong sees the wrong message.
FAQ
Does it need Content Hub Pro?
No. It works on every HubSpot plan, including free.
Does it work in emails?
No. It works in website pages, landing pages and blog pages (posts and listing).
Can I show it on every page of my site?
The module shows where it is placed. Add it to the header of your templates in the design manager, or use HubSpot's global modules. See "Install and add the module".
The bar does not show on the live page. Why?
Check that Start is set, that you are inside one of the three windows (for Before, look at Show from), and that the message of the moment has Show this message on. If you closed it before, clear the site data or use a private window.
I closed the bar and now I cannot see it any more. How do I test again?
Clear the site data of your site in your browser, or use a private window. See "Closing the bar".
There is no button. Why?
The button needs both a Link and a Link text in that message.
Can I translate the labels?
Yes. The messages and all texts are fields. Dates and times follow the language of the page.
Can I use it more than once on a page?
Yes. Each module has its own event, messages and settings. Bars with the same key share their closed state.
Texts in French, German and Spanish
Every word the module shows is a field. To use the module on a page in another language, open the module in the editor and paste these texts in the matching fields. Keep the words in braces, such as {n}, as they are: the module replaces them. Dates, times and numbers already follow the language of the page.
French (Français)
| Field | Text to paste |
|---|---|
| Message | Webinaire en direct le {date} à {time} : réservez votre place. |
| Link text | S’inscrire |
| Message | Nous sommes en direct. |
| Link text | Rejoindre la session |
| Message | Vous l’avez manqué ? Le replay est disponible. |
| Link text | Voir le replay |
| Name of the bar (for screen readers) | Annonce |
| Close button (for screen readers) | Fermer l’annonce |
| Countdown: days | j |
| Countdown: hours | h |
| Countdown: minutes | min |
| Countdown: seconds | s |
| Countdown: before the number | Début dans |
| Screen reader hint for links that open a new tab | (s’ouvre dans un nouvel onglet) |
| Editor note: no start date | Définissez une date de début : sans elle, les visiteurs ne voient pas la barre. |
German (Deutsch)
| Field | Text to paste |
|---|---|
| Message | Live-Webinar am {date} um {time}: Sichern Sie sich Ihren Platz. |
| Link text | Anmelden |
| Message | Wir sind jetzt live. |
| Link text | Jetzt teilnehmen |
| Message | Verpasst? Die Aufzeichnung ist verfügbar. |
| Link text | Aufzeichnung ansehen |
| Name of the bar (for screen readers) | Ankündigung |
| Close button (for screen readers) | Ankündigung schließen |
| Countdown: days | Tg. |
| Countdown: hours | Std. |
| Countdown: minutes | Min. |
| Countdown: seconds | Sek. |
| Countdown: before the number | Beginnt in |
| Screen reader hint for links that open a new tab | (öffnet in einem neuen Tab) |
| Editor note: no start date | Legen Sie ein Startdatum fest: Ohne Startdatum sehen Besucher die Leiste nicht. |
Spanish (Español)
| Field | Text to paste |
|---|---|
| Message | Webinar en directo el {date} a las {time}: reserve su plaza. |
| Link text | Inscribirse |
| Message | Estamos en directo. |
| Link text | Unirse a la sesión |
| Message | ¿Se lo perdió? La grabación ya está disponible. |
| Link text | Ver la grabación |
| Name of the bar (for screen readers) | Anuncio |
| Close button (for screen readers) | Cerrar el anuncio |
| Countdown: days | d |
| Countdown: hours | h |
| Countdown: minutes | min |
| Countdown: seconds | s |
| Countdown: before the number | Empieza en |
| Screen reader hint for links that open a new tab | (se abre en una pestaña nueva) |
| Editor note: no start date | Defina una fecha de inicio: sin ella, los visitantes no ven la barra. |
Support
Questions or a bug? Email support@airdatethemes.com, in English or French. We answer within two business days.
Going further
This module announces one event, from one date you type. In Airdate Webinar (199 $), a theme for a whole webinar series, the next session, with its countdown, shows on the pages you choose and follows the series, without typing the date again. See it on the marketplace.