Manage Webflow Cookie Consent - Finsweet X Cloudflare

When you own a website, depending on the information you collect and your location, you need to comply with various regulations. One of the best-known regulations concerns data protection for users in the European Union: the RGPD.

In this article, we'll explore one of the essential rules for being RGPD compliant: storing cookie consents. We'll look at how, on our Webflow site, it's possible to store cookies using Finsweet Cookies Consents and Cloudflare completely free of charge to comply with the current standards.

RGPD, Cookies, Storage and Website Compliance?

General rule

If you are a business or other entity based in the European Union (EU) and own a website, you must comply with the GDPR(General Data Protection Regulation). This requirement also applies to companies or entities based outside the EU, but collecting data on users residing in the European Union.

The RGPD imposes numerous rules to preserve and guarantee users' personal information. If you manage a website and have to comply with the RGPD, you'll inevitably find yourself faced with the issue of making your website's cookies compliant.

Definition - Cookies : small text files that websites store on your browser to remember your preferences and offer you a more personalized online experience.

These cookies represent information, data collected by websites about you. Under the RGPD, they must be protected and stored. But why store cookie consents? It's much more than ticking boxes to comply with the law. Here's why it's crucial, in a few key points:

• Respect for privacy: storing consents means you respect your users' private space, a bit like knocking on the door before entering.
• Building trust: Users want to be sure that their data is in safe hands. By storing consent, you establish a relationship of trust.
• Avoid legal trouble: Poor data management can lead to legal problems. Properly storing consents means avoiding legal trouble - a legal shield for your site.
• Anonymizing IP addresses: Let's not forget IP addresses. By anonymizing them, you strengthen data protection, a bit like scrambling the map to protect the treasure.

New 2024 regulations

Since March 2024, regulations have changed for managing cookie consents with Google tools. If you use solutions such as Google Analytics or Google Ads, you'll need to use a cookie management solution compatible with Google Consent Mode V2.

Guide to Google Consent Mode V2

How do I store consent for cookies on my Webflow site?

1 - Requirements for storing cookie consent data

Before getting down to the nitty-gritty, there are a few things you'll need to consider in advance:

• Own a Webflow project.
• Integrate the Finsweet Cookie Consent solution into your project (Please note that this article does not present how to integrate the Finsweet Cookie Consent solution into Webflow, but rather how to store consents once the solution is already in place).
• Get a Cloudflare account (free).

2 - Creating a Cloudflare account

If you're new to Cloudflare, let's find out how to create an account quickly.

Tool - Cloudflare: Cloudflare is a cloud services platform offering solutions for security, performance and content distribution, helping to improve the availability and protection of websites.

To get started, go to the Cloudflare registration page. In the "Developer platform" tab, select the"Workers: free offer".

Next, you'll be taken to a page where you can create your account by providing an e-mail address and password.

Once you've created your account, be sure to verify it according to the instructions provided.

3 - Configuring data logging - Technical part

3.1 - Creating a Cloudflare Worker

Once your Cloudflare account has been validated, go to the"Workers & Pages" section and create a new"Worker" by clicking on"Overview" then"Create Worker".

Definition - Worker: a small program that runs directly on Cloudflare servers, allowing custom features to be added to websites without having to modify the original server code.

After clicking on the button to create the Worker, give it a name, preferably an explicit one. Then, further down the page, click on"Deploy" to deploy the newly created Worker.

3.2 - Creating a namespace for KV Cloudflare

Once the Worker has been created, access the"KV" tab (still in the "Workers & Pages" submenu).

Definition - KV (Key-Value store): short for key-value store, this is a database that stores information in pairs (key-value, where a key is associated with a value), offering a fast and efficient way of storing and retrieving data. It is often used with Cloudflare Workers to manage information dynamically.

On the KV page, create anamespace by clicking on"Create a namespace". Assign a name to your namespace, then click on"Add".

Definition - Namespace: a storage space dedicated to a specific set of data within Cloudflare's Key-Value (KV) database. It allows data to be organized and structured separately, providing better management and isolation of the information stored in the KV store.

Your namespace has now been successfully created.

3.3 - Modifying your Worker with the Finsweet Cookie Consents Script

Now return to the"Overview" section to locate your"Worker". Click on it to access editing.

In the Worker editing interface, locate the"Quick edit" button in the top right-hand corner and click on it.

Once in the code section, delete the existing code.

Then paste the code from the Finsweet Cookie Consents script:

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.corsHeaders=void 0,t.corsHeaders={"Access-Control-Allow-Origin":"*","Access-Control-Allow-Methods":"GET,HEAD,POST,OPTIONS","Access-Control-Allow-Headers":"Content-Type","Access-Control-Allow-Credentials":"true","Access-Control-Max-Age":"86400"}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=n(2);addEventListener("fetch",e=>{e.respondWith(r.handleRequest(e.request))})},function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.handleRequest=void 0;const o=n(3),s=n(4),u=r(n(5)),l=o.Router();l.post("/",u.default),l.options("*",s.handleOptions),l.get("*",()=>new Response("Not found",{status:404})),t.handleRequest=e=>l.handle(e)},function(e,t){e.exports={Router:(e={})=>new Proxy(e,{get:(t,n,r)=>"handle"===n?async(n,...r)=>{for([p,hs]of[t.all||[],t[(n.method||"GET").toLowerCase()]||[]].flat())if(m=(u=new URL(n.url)).pathname.match(p))for(h of(n.params=m.groups,n.query=Object.fromEntries(u.searchParams.entries()),hs))if(void 0!==(s=await h(n,...r)))return s;if(e.else)return e.else(n,...r)}:(o,...s)=>(t[n]=t[n]||[]).push([`^${(e.base||"")+o.replace(/(\/?)\*/g,"($1.*)?").replace(/\/$/,"").replace(/:([^\/\?\.]+)(\?)?/g,"$2(?<$1>[^/.]+)$2")}/*$`,s])&&r})}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.handleOptions=void 0;const r=n(0);t.handleOptions=e=>{const t=e.headers,n=t.get("Origin"),o=t.get("Access-Control-Request-Method"),s=t.get("Access-Control-Request-Headers");if(null!==n&&null!==o&&null!==s){const e=new Headers({...r.corsHeaders,"Access-Control-Allow-Headers":s});return new Response(null,{headers:e})}return new Response(null,{headers:{Allow:"GET, HEAD, POST, OPTIONS"}})}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=n(0);t.default=async e=>{const{id:t,action:n,url:o,userAgent:s,consents:u,bannerText:l}=await e.json();if(!(t&&n&&o&&s&&u&&l))return new Response("Some parameter is missing",{status:400,headers:r.corsHeaders});const a=(new Date).toISOString(),c=[n,(e.headers.get("x-real-ip")||"").replace(/\d*$/,"0"),a,o,s,Object.entries(u).reduce((e,[t,n])=>(n&&e.push(t),e),[]).join(","),l].join(";");await CONSENTS.put(t,c);const i={...r.corsHeaders,"Content-type":"application/json"};return new Response(c,{status:200,headers:i})}}]);

Finally, click on the "Save and deploy" button in the top right-hand corner.

3.4 - Linking the "Worker" to the "KV

After saving and deploying the Worker, return to the Worker editing interface.

Now go to the"Settings" section, then"Variables".

Moving down a little, look for the section entitled"KV Namespace Bindings".

Click on the"Add binding" button. Please note that :

• For variable names, use"CONSENTS" in uppercase.
• For "KV", select the "KV" you created earlier.

Finally, click on"Save and deploy"!

3.5 - Recovering your Worker's Endpoint URL

When you're in your Worker editor, at the very top of the page, look for a preview link. This is your endpoint URL.

Definition - Endpoint: a specific URL or single access point in an API (Application Programming Interface) or web service. It represents the destination where requests can be sent to interact with an application or access specific functionality. Endpoints are defined to perform operations such as retrieving, modifying, adding or deleting data from a resource via the API. In short, an endpoint is a specific address enabling applications or services to communicate with each other via HTTP or similar protocols.

In this step, you will :

1. Open the endpoint URL in a new tab (IMPORTANT).
2. Copy the endpoint URL from the new tab.

3.6 - Setting up the Finsweet Cookie Consent script in your Webflow project

The last step in this tutorial is to return to your Webflow project and access your project's"custom code"(the place where you integrated the Finsweet Cookie Consent script).

Modify this script by adding fs-cc-endpoint="[URL endpoint Cloudflare]" inside, replacing [URL endpoint Cloudflare] with the URL you previously copied.

Publish your Webflow project, and that's it! You now have a mechanism that retrieves cookie consents from your site's users.

Retrieve my Webflow site's cookie consents in Cloudflare

Now that everything's set up, let's see how to access cookie consent records.

To do this, go to Cloudflare, then to the "KV" tab.

Then click on the"view" button to access all the consents submitted from your website.

You can obtain detailed information on each value by clicking on "view". The key points to remember are as follows:

• "Allow" means that the user has accepted all cookies.
• "Deny" means that the user has rejected all cookies.
• "Submit" means that the user has changed their cookie preferences (you can find details of accepted cookies in the information).

Conclusion

Congratulations, you're now ready to ensure your website's RGPD compliance by storing cookie consents thanks to Finsweet Cookie Consent and Cloudflare. For an in-depth exploration, we recommend you consult the full Finsweet Cookie Consent documentation. In particular, you'll find details if you plan to use your own endpoint API instead of Cloudflare to store these consents.

By equipping yourself with these powerful tools, you not only strengthen the protection of your users' data, but also build solid trust with your audience. Don't forget to keep abreast of legislative developments and best practices to maintain ongoing compliance.

If you use Axeptio, learn how to translate your banners according to the language of your page.