Cookie consent banner

Fixed bottom bar that auto-shows on first page load. Persists accepted/rejected state in localStorage. Shows only once per visitor.

cookieconsentgdprprivacybannercomplianceinteractive

About this block

A slim banner fixed to the bottom of the screen that asks first-time visitors to accept or reject cookies. Their choice is saved in their browser, so the banner doesn't come back on the next page or the next visit. It needs no code and no third-party consent script.

When to use it

  • You use analytics, ad pixels, or embeds that set cookies, and you have visitors from the EU or UK.
  • You want a lightweight banner instead of a full consent-management platform.
  • You need a visible Reject option next to Accept, not hidden behind a settings link.

What's inside

  • A full-width bar pinned to the bottom of the viewport, on your theme's light surface colour with a soft top shadow.
  • A short message and two buttons: Reject (ghost style) and Accept (primary style).
  • It shows itself when the page loads, but only if the visitor hasn't answered before.
  • Clicking either button hides the bar and saves "accepted" or "rejected" in the browser's local storage under the key ph-cookie-consent.

How to customize it

  • Rewrite the message to say what you actually use cookies for, and add a Link next to it that points to your privacy policy.
  • Rename the buttons if you like ("Allow all" / "Only essential"), but keep Reject as easy to find as Accept.
  • Change the colours through your theme, or swap the bar's surface class to match your footer.
  • To show the banner again after a policy change, use a new storage key in the load trigger and both buttons.

Questions

Does this block stop tracking scripts until someone accepts?
No. It records the visitor's choice. Your scripts need to check the ph-cookie-consent value before they load. A banner on its own isn't full GDPR compliance.
Why doesn't the banner show up in the editor?
It starts hidden and only opens on page load in the live site or preview. In the editor you can select it in the layers panel to edit the text.
Will it cover my sticky footer or chat widget?
It sits above page content at a high z-index. If something else is pinned to the bottom, add bottom padding to that element or move one of them.
Previous
Navigation
Next
Stripe

Browse other blocks

Same library cards — preview live and grab structure from any block.

View full library

Dropdown menu

CSS-first click dropdown with trigger button and option panel. Zero JavaScript required.

Animated cards row

Three feature cards with staggered scroll-triggered fade-up entrance animations.

Accordion FAQ

Collapsible FAQ built on native details/summary elements, so it opens and closes with no JavaScript. Only one answer is open at a time.

Modal dialog

Click-triggered modal with backdrop overlay, content panel, and close behavior.

Newsletter popup modal

Popup that opens once per visitor when the page loads, with an email signup form. Closing it is remembered, so it doesn't come back.

Logo marquee

Logo strip that scrolls sideways in a seamless loop and pauses on hover. Logos sit grey and faded until hovered.

Hover lift card

Card with hover lift animation. Floats up on hover, settles on release.

Contact CTA with modal form

Accent-coloured CTA card whose button opens a centred contact modal with a name, email and message form. Fits bento grids, footers and pre-footer bands.

Image carousel

Image slideshow that shows one photo at a time, with previous and next arrows and dot indicators.

Tabs content switcher

Tabbed interface with 3 panels. Click a tab to show its content and hide the others; the active tab is underlined in the primary colour.

Hero split

Two-column hero with eyebrow, heading, description, and CTAs on the left. Image on the right.

Features three columns

Centered heading with three columns, each showing an icon, title, body text, and link.