Cookie popup showing when it shouldn't

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.

1 Like

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>

Thanks Adam :slight_smile:

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.

1 Like

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.