What is the best script I can use in Webflow for a pop-up to allow visitors to accept cookies?

TL;DR
  • Use a GDPR-compliant service like Cookiebot or Osano by signing up, configuring your banner, copying the script, and pasting it into Webflow’s Project Settings > Custom Code section.  
  • Alternatively, create a manual banner using Webflow elements and localStorage, but ensure advanced setup for full compliance.

To add a cookie consent pop-up in Webflow, use a lightweight script that displays a banner and stores the user’s choice in local storage or cookies. This helps with GDPR compliance.

​

1. Use a Third-Party Cookie Consent Tool (Recommended)

​

  • Cookiebot and Osano are two widely used, GDPR-compliant tools that integrate easily via script.
  • These tools:
  • Provide auto-generated scripts.
  • Block cookies until consent is given.
  • Offer design customization and multilingual support.

​

Steps to use Cookiebot in Webflow:

  • Go to Cookiebot.com and sign up.
  • Configure your domain and style in the dashboard.
  • Copy the provided JavaScript script tag.
  • In Webflow, go to Project Settings > Custom Code.
  • Paste the script into the Header or Footer section (as instructed by Cookiebot).
  • Publish your site to apply.

​

2. Use Osano for a Customizable Banner

​

  • Go to Osano.com, create an account, and configure your banner.
  • Copy the generated embed script and paste it into Project Settings > Custom Code.
  • Osano stores consents and gives you analytics tools.

​

3. Manual Cookie Banner with Custom Code (Basic Option)

​

  • Use this if you want full control but no third-party dependency.
  • Embed a script that checks localStorage, displays a custom div in Webflow, and hides it once accepted.
  • Create a custom cookie banner symbol in Webflow with a close button.
  • Add interactions to hide the banner when clicked, and stack it with a short script to remember the choice using localStorage.

​

Note: Manual banners using basic localStorage or document.cookie do not block cookies automatically and may not be fully GDPR compliant unless you manually configure all scripts to wait until consent is given.

​

4. Add Script to Webflow Correctly

​

  • Always go to Project Settings > Custom Code > Footer section to insert external scripts.
  • Embed the script just before the closing </body> tag.
  • If using Site-wide embeds, this ensures the code works across all pages.

​

Summary

​

The best solution for a cookie consent pop-up in Webflow is to use a compliant, easy-to-integrate service like Cookiebot or Osano. These tools simplify GDPR compliance and require minimal setup—just embed a script in Webflow’s Custom Code section. For full manual control, you can build a banner using Webflow interactions and local storage, but this requires advanced handling for compliance.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I load a JSON file in the Webflow Custom Code section, and where should I place or write a new PHP file to display Jobvite data?
How can I test transactions on my Webflow Ecommerce site before launching, specifically with regards to UK card numbers and potential issues with Stripe's test card numbers?
How can I generate a unique HTML ID for a heading inside a collection list item in Webflow without duplicating it when new collection list items are added?
What are some of the features of Webflow?
Which Webflow subscription would be the most suitable for a hosting and development service that plans to have separate website plans for each customer in the workspace?
Is it possible to highlight the link to the current page in the Navbar/Menu in Webflow?
How can I change the style of the bullet points to match the introduction text in Webflow?
How can I add a File Upload component to my Webflow site's new employment opportunities section, as the Designer isn't allowing me to do so?
Why are the images on my website stretched on mobile devices after replacing the source image in Webflow?
Will the application that pulls data from Webflow CMS and is used in a React application be publicly listed by Webflow if we have to register it?
How can I add a PDF to Webflow to automatically download when a button is clicked?
How can I properly embed an Elfsight Instagram widget using Webflow's CMS so that each item in the collection can have its own unique widget displayed on the Collection page? I have tried adding the provided code as Plain Text in the CMS collection, as well as including the script in the site footer and Collection Page's custom code, but the div keeps appearing as text. Can you provide a clear solution for this issue?
How can I create a navigation with a sub-menu option in Webflow's navbar component?
How can I prevent the "mailto" function in Webflow from opening an empty new tab along with the email client?
What Webflow account plan is required to publish multiple websites, as I have a free account with 2 websites?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?