This lesson was released before Agents, Branching, and the CMS update on June 16, 2026. Some UI may differ, but the core concepts still apply.
Benjamin
9:43
Add a Cookie Banner to your site in Framer
Add the Cookie Banner Component to your site in Framer and connect it to Google Tag Manager. This lesson covers global placement, visual customization, the preview and trigger settings, and the container ID needed for Google Consent Mode. It also shows how the banner behaves before and after a visitor submits a consent choice.
Lesson details
In this Framer tutorial, you will learn Add a fully functional Cookie Banner to your Framer site. We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance. See An All-New Cookie Banner Component.
Frequently asked questions
How do I add a Cookie Banner in Framer?
Insert the Cookie Banner Component, customize its appearance, and place it inside a shared component that appears on every page. Add your Google Tag Manager container ID so the banner can send the visitor’s consent choices.
Why should the Cookie Banner sit inside a shared component?
A shared navigation, sidebar, or layout component already appears across your site in Framer. Placing the Cookie Banner there lets it load consistently without adding a separate instance to every page.
What does preview mode do on the Cookie Banner?
Preview mode keeps the banner visible while you edit its layout, type, and colors. Turn preview off to inspect the visitor-facing behavior, including the trigger used to reopen consent settings.
Can I hide the Cookie Banner trigger?
Yes. Set the trigger type to none when you only want the banner to appear for visitors who have not submitted a consent choice. The lesson also shows how the component behaves after consent is stored.
Does the Cookie Banner work with Google Consent Mode?
Yes. The component is designed to work with Google Tag Manager and Google Consent Mode. You need a valid container ID and should verify the setup on the published site before relying on it for analytics or marketing tags.