Page component: Privacy banner
A reference guide to the optional privacy banner component that can appear on all hub front end pages
This reference guide describes the hub privacy banner, which is an optional fixed banner that appears at the bottom of all hub page types until dismissed.
Usage
Use this guide to understand how this component works, how its individual elements are structured, and how to target them for customization.
The tables in this guide list the constituent elements of this page component, as well as the relevant CSS selectors (for both the component itself, and its container). The listed elements are present in this page component out-of-the-box.
About the privacy banner
Uberflip hubs have optional privacy features built in that allow for hub front ends to be GDPR-compliant. These features are the Privacy Page, the Privacy Banner, and Privacy Groups. For information about the hub privacy features, see this help article.
The Privacy Page and Privacy Groups are covered in the reference guide to functionality pages.
This guide covers the Privacy Banner component. It can appear on any page in the hub front end, and may be customized and styled in various ways.
If enabled, the Privacy Banner component is a fixed banner that is displayed at the bottom of hub pages, on top of all other elements. It consists of a user-configurable message, an optional "Accept" button, a "Dismiss" button, and a link to the Privacy Page (if enabled). Its purpose is to provide visitors with GDPR-mandated notifications about data privacy and cookies.
Privacy banner
This component is displayed on all pages in the hub front end until a visitor interacts with it by either clicking "Accept" or "Dismiss". The banner disappears after the first interaction, but will reappear when certain settings in the hub backend are changed.
Elements & CSS Selectors
The following table lists the elements found in this component, along with their CSS selectors:
| Element | Container CSS Selector | Element CSS Selector | HTML Element | Notes |
|---|---|---|---|---|
| Privacy Banner Container | body | #uf-privacy-banner | <aside> | |
| Dismiss Button | div.columns | #uf-privacy-banner-close | <button> | |
| Accept Button | div.uf-privacy-banner-controls | #uf-privacy-banner-accept | <button> | Only displayed when enabled. User-configurable text and button color. |
| Privacy Page Link | div.uf-privacy-banner-controls | #uf-privacy-banner-manage | <a> | Links to the Privacy Page, if enabled. |
| First Visit Message Text | div.uf-privacy-banner-controls | #uf-privacy-banner-primary | <div> | Used to display privacy policy (summary) to first-time visitors. |
| Policy Update Message Text | div.uf-privacy-banner-controls | #uf-privacy-banner-secondary | <div> | Used to notify visitors of changes to a privacy policy. Only displayed when configured. |
Hub backend configuration
The component itself and several of its elements are user-configurable in the hub backend. These options are configured under Hubs > Hub Privacy > Privacy Banner using the following settings:
- Privacy Banner (show or hide): Enable Privacy Banner toggle
- First Visit Message Text: Set content with First Visit Message textbox
- Policy Update Message Text: Set content with Policy Update Message textbox
- Accept Button (show or hide): Accept Button > Enabled toggle
- Accept Button (button text): Set text label with Accept Button > Button Caption field
- Accept Button (button color): Set button color with Accept Button > Button Color dropdown
Updated over 3 years ago