Sitewide Alert

The Sitewide Alert module adds the ability to show alerts at the top of your site.

This module can be used for showing alerts to your visitors to inform them of planned maintenance periods, emergency/weather information, shipping delays, flash sales, and more. How you use it is up to you.

Features

• Cache-friendly by design. Adding or updating alerts does not invalidate the full page cache for all pages on the site.
  • (Experimental) Server-side rendering available to reduce layout shift. See the README for caching considerations.
• Renders at the top of every page, no block configuration needed.
  • Optional sub-module for block placement.
• Multiple alerts with configurable styles (e.g., red for urgent, white for subtle).
• Visitor-dismissible, with editor option to reset dismissals.
• Page visibility controls and scheduled start/end times.
• Live updates -- new alerts appear without a page reload.
• Fieldable, themeable, and works with Domain.

Getting started

Installation

Install the Sitewide Alert module with Composer.

$ composer require 'drupal/sitewide_alert:^3.1'

Configuration

Once installed, Sitewide Alert is ready to use. However, some customization is likely necessary.

Upon installation, there is only one Alert Style (Default). This can be extended by navigating to /admin/config/sitewide_alerts and defining new Alert Style types. Define each key|value pair on its own line.

To show Sitewide Alerts on administrative pages, navigate to /admin/config/sitewide_alerts and select the "Show on Administrative Pages" checkbox.

Creating a Sitewide Alert

Navigate to /admin/content/sitewide_alert and click the "Add New Sitewide Alert" button and complete the following fields:

• Name
  • Give your alert an administrative name.
• Alert Style
  • Select a style for your alert.
• Alert Message
  • Compose your alert message. Full WYSIWYG support available.
• Dismissible
  • Select this checkbox if the alert should be dismissable by visitors.
• Schedule Alert
  • Select this checkbox if the alert should only appear during a specific time period.
• PAGE VISIBILITY - Limit by Page
  • Select this checkbox if alert should only appear on specific pages. Use the "Pages" input field to specify pages by using their paths.
• Any additional fields
  • Additional fields can be added to alerts by site builders with sufficient permissions.

Theming/Styling Sidewide Alerts

Using CSS classes

Sitewide Alerts receive a wrapping class that can be used to apply specific styles. For each entry added to the Alert Style field, a corresponding HTML class is added to the element's wrapper. The class is created by concatenating "alert-" with each key defined under Alert Style. Use these classes to apply different styles to each type of alert needed.

Using twig templates

Alerts can themed by overriding the sitewide-alert.html.twig twig templates. Template suggestions also exist for each
of the Alert Style types and if the alert is or is not dismissible.

Template suggestions

• sitewide-alert.html.twig
• sitewide-alert--STYLETYPE.html.twig
• sitewide-alert--dismissible.html.twig
• sitewide-alert--notdismissible.html.twig
• sitewide-alert--STYLETYPE--dismissible.html.twig
• sitewide-alert--STYLETYPE--notdismissible.html.twig

Troubleshooting

Scheduled alerts not showing/disappearing when they should.

• Make sure the scheduled sitewide alert is marked as "Active". Scheduled alerts still need to be set as active to be shown.
• If using the Redis caching module, you may need to apply this patch to allow Drupal's Page Cache to actually expire when it should.

Similar modules

• Site Alert