Feb 24, 2024
Madhuri Maram
To add a cookie banner to your Framer website, you can utilize the Cookie BannerComponent, which is designed to integrate seamlessly with Google Tag Manager and Google's Consent Mode. This component allows for a comprehensive cookie consent system that can be customized to fit the design and legal requirements of your site. Here's a step-by-step guide based on the information provided in the search results:
Step 1: Access the Cookie Banner Component
Go to the Insert Menu in Framer and drag the Cookie Banner Component onto the Canvas to start working with it.
Ensure you add the component to every page where you want the cookie banner to be visible. For convenience, consider adding it to a common component like a navbar, footer, or sidebar.
Step 2: Customize the Banner
The Cookie Banner Component allows for customization of positioning rules, animations, and responsive layouts.
You can adjust the banner settings for both the EU and the rest of the world, with a basic banner set as the default option and a more detailed version for the EU to comply with GDPR regulations.
Customize the appearance of your banner through the Preview option, which lets you switch between the component’s appearance on your page and the actual banner.
Step 3: Connect to Google Tag Manager
Add your Google Tag Manager container ID to the properties panel of the Cookie Banner Component. This ID can be found in the top right of the Google Tag Manager dashboard.
Enable consent mode in Google Tag Manager by going to Admin → Container Settings → Enable Consent Overview.
Step 4: Configure Consent Types
The Cookie Banner Component maps consent types from Google to options in the UI, allowing you to determine the choices presented to users. These include Necessary, Preferences, Analytics, and Marketing consents.
You can choose how users can interact with the banner, whether they have no choice, can accept/reject all cookies, or can customize their consent levels.
.
Step 5: Design and Behavior Customization
The component allows for separate control of behavior for the EU and the rest of the world, including options to show a trigger to re-open the banner or run it completely invisible.
You can set default consent, like accepting necessary cookies by default, and design custom enter and exit animations.
Tutorial by Framer
Additional Considerations
If you add any service or script that might collect data (such as Google Analytics, HubSpot, or YouTube), it's your responsibility to add the appropriate cookie banner to your site.
Framer's built-in analytics tool does not use cookies and does not generate any persistent identifiers, so no cookie consent is needed for its use. However, you are responsible for ensuring that your site is GDPR compliant.