Join the Webstudio community

Updated 3 months ago

Finsweet Cookie Consent for Webflow

At a glance

The community members are discussing alternatives to the popular Webflow cookie consent component, and whether a version of it can work in Webstudio. Some community members have tried to copy/paste the component from Webflow, but it doesn't work due to Webstudio's lack of interactions. Others suggest that the component likely uses JavaScript to show/hide the banner and write to a cookie, and that the interactions may just be for animations. A community member shares a tutorial for a simple cookie consent solution in Webflow, but is unsure if it can be implemented in Webstudio. Another community member tried to set up the Finsweet cookie consent component in Webstudio, but encountered an issue where the component's script tag was deleting the <link /> tags in the header. The community members are still looking for a solution that can be built and styled within Webstudio.

Useful resources
Greetings friends, what are some alternatives to the popular Webflow component https://finsweet.com/cookie-consent

Or maybe there is a version of it that can work in webstudio? Who uses what for these purposes, preferably easy to use free components?
2
O
a
p
25 comments
I haven't tried, but it should be possible to copy/paste it from webflow, maybe with some minimal changes
I think its basically a normal structure that we already support with some js script in html embed
I tried to copy/paste it from my weblow site - it does not work(( I think it's because webstudio doesn't have interactions yet and it's clearly using them.
need to check, interactions are probaly just for animations
I bet they use js to show/hide it and write to cookie
maybe interaction is used to animate the reveal and so you just need to set the display or something in their script directly
would love to get this running aswell. i failed integrating it too, but didn't dive deep into the Problem.
For some simple usecases, this tutorial helped me in Webflow:
https://youtu.be/MvmT9EBt7CM?si=bFzmkl34uYfTrOHo
I don't know if this can be implemented as well in Webstudio.
Hi, so I tried to set it up and kinda works the only thing is that the finsweet code it self is deleting all the <link rel="modulepreload"> in the header one you click on accept or on any button inside the banner. I dont know if @Oleg Isonen maybe knows something we can add to the script tag so that doesnt happen
So this is a before and after
Attachments
Screenshot_2024-12-06_at_2.58.51_PM.png
Screenshot_2024-12-06_at_2.58.57_PM.png
i think if that is solved the whole thing could technically work
Can you share a repro?
With repro do you mean like a screen recording or a webstudio clonable?
I can share both
this is the screen recording of what happens
and I'll prepare a clean webstudio file to clone
Share link is a repro
finsweet's script tag is added in project settings custom code
why not keep the script next to the html in the html embed?
this way it also works on canvas
I also tried that by adding the script like an html embed inside the body but got the same result
I'm still wondering if anyone has found a solution for this little problem yet πŸ™‚ It would be a really good solution for cookie compliance that can literally be built inside webstudio and styled with tokens
Add a reply
Sign up and join the conversation on Discord