Skip to main content

Floating Preferences Center Icon

Rogelyn
Updated

Overview

The floating preferences center icon provides users with persistent access to the Termly Preferences Center after their initial consent interaction.

The icon is included in the page markup by default but remains hidden unless explicitly enabled. Visibility is controlled entirely via CSS.

Default Behavior

  • The floating preferences icon is present in the DOM

  • The icon is hidden by default

  • The icon only appears when no other Resource Blocker UI (such as a consent banner) is visible

No visual changes occur unless the icon is explicitly enabled.

How to Enable the Floating Preferences Icon

Step 1: Load the Resource Blocker Test Page

Open your Resource Blocker test page.

You should not see any visible changes on the page.

Step 2: Confirm the Icon Exists in the DOM

Using your browser’s developer tools, inspect the DOM.

You should see the floating preferences element present:

.termly-floating-preferences

At this stage, the element exists but is not displayed.

Add the following CSS inside the document’s <head>:

<style>
  #termly-code-snippet-support {
    .termly-floating-preferences {
      display: block;
    }
  }
</style>

Step 3: Reload the Page

Reload the Resource Blocker test page.

The floating preferences icon should now appear in the lower left-hand corner of the browser window.

Visibility Rules

The floating preferences icon follows these rules:

  • The icon appears only when no other Resource Blocker UI is visible

  • If the consent banner or another Resource Blocker interface is displayed, the floating icon will remain hidden

  • This ensures a single active consent interface at all times

Customization (Optional)

The floating preferences icon is fully customizable using CSS.

You may adjust:

  • Position

  • Size

  • Colors

  • Background

  • Hover effects

Refer to the associated pull request for styling examples.

Behavior Summary

  • Icon is included by default

  • Icon is hidden by default

  • Icon is enabled via CSS

  • Icon does not appear when the banner is visible

  • No consent logic or storage behavior is affected

If you have any questions please reach out to Termly's customer support.

Related articles