Ideal for disclaimers, data privacy statements, and other important details, the COVID Alert Modal provides a collapsible window at the footer of your website that's fast and easy to customize.
In Part 2 of our series, we showed you how to build a Hero Banner to display important COVID-19 updates at the top of your website. In Part 3, we'll show you how to build an Alert Modal.
Alert Modals are collapsible windows that typically appear at the bottom or footer area of your website. They're useful for informing website visitors about data privacy policies (such as using "cookies"), but they can also be used to promote any of your COVID-19 policies or disclaimers.
Not only are Alert Modals easy to use and customize, but they are complementary to your other emergency alert strategies. They are particularly effective as they don't obstruct how visitors interact with your website. However, because they appear at the bottom of the page, they are typically reserved for lower-level alerts, legal footnotes, or other pertinent information.
Here's how to build a simple HTML Alert Modal for your COVID-19 response:
Add the HTML snippet to your templates or webpages, preferably at the bottom since the element will be fixed to the bottom of the page. Add a URL to the "Learn More" link so that users can get additional information.
Customize all colors to meet your individual brand needs. The main "covid-banner" selector uses the fixed position so that a user prominently sees it when the page loads.