Can’t figure this one out. I have a popup cookie alert which users much agree to in order for the alert to disappear (forever).
I have a Yes/No field in the User data type called ‘Cookie alert accepted’ and once a user clicks ‘Agree’ the DB is updated and the user will not see the alert again. But, when the user logs out, the alert shows because the DB can’t tell the difference between a logged out user and a logged in/accepted user?
Yes, if you’re using a database field for this then obviously it will only apply when the user is logged in (once they log out they are no longer considered the same user)…
For it to work whether they are logged in or not you’ll need to save this value in a cookie on their browser as well as (or instead of) in the DB.
Thanks @adamhholmes Would you advise I save as a cookie, I mean is that the standard way to handle this? Also, how do I save something as a cookie on their browser?
Yes, that’s the standard way to handle cookie consent…
You’ll need to make sure you disable setting cookies by default in your app settings (although you’ll need to do that even if you’re only saving the cookie consent field in the DB) and then handle all cookie setting manually (depending on whether they’ve given consent or not). you can read more about that here: General - Bubble Docs
As far as saving cookies goes, there a a few plugins available, or you can use standard JavaScript. There are also cookie APIs available…
Personally I use JS-Cookie - as it’s simple to use and more flexible than any of the Bubble plugins…
But for simplicity you might be better off with any of the Bubble cookie plugins.
Alternatively, there are also some pre-made Bubble Cookie Consent plugins that do it all for you.
Oh no, more to learn! Right, I think I need to finish my app completely and then dig into the cookies at the end. Really appreciate your overview of how it works and the recommendation of JS-Cookie which sounds good.
I read the General - Bubble Docs and as advised I switched off Opt-in to Cookies.
Next, when someone clicks the ‘Accept cookies’ button on my website, the button’s workflow is set to Opt-in to Cookies.
I want to add a condition to my cookie popup alert so that when someone clicks the ‘Accept cookies’ button, the alert won’t display again (regardless of if the user is logged in or out). I assume I first need to add the JS-Cookie code but the Github refers to NPM installation which I didn’t understand - presumably I am required to install in onto Bubble somehow?
Any chance you can advise on how to do this?
You just need to add the following script to your page (or app) html header:
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
I’m just sorting this out now, in order to add the code to my header, does that require I add an HTML element anywhere on the index page or is there an actual ‘header’ for this?
No, you add it to the html header from the page properties editor…
Thanks @adamhholmes, screenshot below for anyone who wants to see.
I have a conundrum!
I want a signed in user to be able to accept cookies, which will save to the database as CookieAccepted = Yes.
However, I also want a new unsigned user to be able to dismiss the cookie alert, which is why I have implemented the js-cookie code.
The conundrum is that most new users will immediately dismiss the cookie alert, so when they log in it is no longer showing, so they can’t click it again to save their User’s CookieAccepted field to the database!
What is the standard solution to this?!
I have found a solution to this now, you need to set a state on the page so that when the user first clicks to accept the cookie you can store that in the browser, then you need to update your database “on page load” so it’s permanently saved. I posted the solution on this page as they had the same query.
hello. Could you please tell me how you did it?
To show a cookie popup only once per user, create a using_cookies field (yes/no) on the User data type, defaulting to “no”. Design a popup or floating group for the cookie message. On page load, show the popup only when Current User's using_cookies is “no”. When the user clicks “Accept”, set using_cookies to “yes” and hide the popup.
And if the user has never been registered on the site or logged out, it turns out that the popup will be displayed every time. And how to make it so that if the user is logged out and has already clicked on cookie yes, the popup is not displayed?
Ah yeah, this is the bit I forgot. I think my coding partner may have used some JavaScript - I can’t locate it. My site is so massive that it’s takes a long time to find things!
Essentially, for logged-out or new users, you’ll need to store their cookie preference in local storage. On page load, run a script or workflow to check if cookies_accepted exists in local storage. If not, show the cookie popup. When the user clicks “Accept”, set cookies_accepted = true in local storage and hide the popup. This way, the popup only shows once—even for anonymous users.
Can you ask ChatGPT for suitable JavaScript?
I asked and he seems to give the wrong option. Maybe you could look at your place?
So sorry for delay in response, today I travel to present my software to a potential 5000 customers after 3 years in development - very stressful!
I am unable to find how we did it but after next week I will have time back again and can try and help. I do remember it was a tricky thing to get sorted.
Thank you very much! And I wish you the best of luck with your project!