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.


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:

ElementContainer CSS SelectorElement CSS SelectorHTML ElementNotes
Privacy Banner Containerbody#uf-privacy-banner<aside>
Dismiss Buttondiv.columns#uf-privacy-banner-close<button>
Accept Buttondiv.uf-privacy-banner-controls#uf-privacy-banner-accept<button>Only displayed when enabled. User-configurable text and button color.
Privacy Page Linkdiv.uf-privacy-banner-controls#uf-privacy-banner-manage<a>Links to the Privacy Page, if enabled.
First Visit Message Textdiv.uf-privacy-banner-controls#uf-privacy-banner-primary<div>Used to display privacy policy (summary) to first-time visitors.
Policy Update Message Textdiv.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