Skip to main content

How to add an event alert banner to your website

Announce your next event in a banner at the top or bottom of your website. It updates itself from your calendar and disappears when the event is over.

Written by Piotr Poźniak

An event alert is a banner at the top or bottom of your website that announces your next event. Revisual picks the event from your calendar, can count down to the start, and hides the banner when the event is over. You set it up once and never have to update it.

Event alerts work with any calendar you use in Revisual: Google Calendar, or Outlook and Microsoft 365 calendars.

Before you start: add your website to Revisual, see Managing your websites, and connect your calendar.

Step 1: Create an event alert

In the left-hand menu, click Widgets › Event alerts, then Create alert.

To change an alert you already have, click its name in the list.

Step 2: Choose where it shows

On the Setup tab, under Display on:

  • Website: the website the alert shows on.

  • Show on: All pages, Home page or Specific page. For a specific page, type the part of its address after your domain in Page URL, for example /promo.

The box above the fields confirms where the alert will show. Revisual can't check that the page exists, so copy the address from your browser.

Step 3: Choose which events it announces

Under Filtering, click + Add filter to choose which events can show in the alert, for example only one calendar, or only events with a tag. To announce only events that have a cover image, turn on Show events with images only.

Filters work the same as for calendars. See How to choose which events show on your website (filters).

To check your filters, open Events matching filter criteria under the preview. It lists the events the alert can show, soonest first.

Step 4: Name it and choose the calendar

Open Name & Integration. Give the alert a name you'll recognise in the list, and choose the calendar connection its events come from. Click Update.

Step 5: Choose where and when the banner appears

On the Design tab, open Configuration. Under Location:

  • Position: top or bottom of the page.

  • Placement: Stick keeps the banner in view while visitors scroll. Otherwise it scrolls away with the page.

  • Push content down (add spacing): moves your page down so the banner doesn't cover its top.

Under Behavior and Messaging:

  • Show after: when the banner appears, for example On page load.

  • Allow user to hide the banner: lets visitors close it with ×.

  • Show banner again after: when a closed banner comes back, for example Every page reload.

  • Opening and Closing: the text around the event's name, date and time.

For example, with the opening "Join us for the next" and the closing "See you there!", the banner reads: "Join us for the next HIIT Bootcamp on Thursday 5 November at 6:00 pm. See you there!"

To change its colours, add a button or show a countdown, see How to design your event alert: colours, button and countdown.

Step 6: Add it to your website

WordPress: nothing to add. Once the Revisual plugin is active and connected, you control your alerts from Revisual. See How to add Google Calendar or Outlook events to WordPress.

Any other website: open the Install tab, click Copy next to the snippet, and paste it into the <head> of your website. The guide for your website builder in Add to your website shows where.

  • You only add it once. The same snippet shows all your event alerts on that website.

  • It's a different snippet from the one for calendar widgets. If your website already shows a Revisual calendar, you still need to add this one.

One alert at a time

You can create as many alerts as you like, but a page shows only one at a time: the alert for the earliest upcoming event. When that event is over, the next one takes its place.

Related

Did this answer your question?