How to show a popup for new visitors only?

Hi everyone.

I have a newsletter popup that I want to be shown to new visitors. Else, the popup stills hidden.

I’m wondering how can I identify if it is the first visit or not? Is there any default Bubble cookie to get this?

Any other ideas are appreciated!

Regards

Maybe, it’s kind of weird but just like you can make carts for people not singed up by using the “current user” field on the cart object that essentially populates off their cookie id assume you can make changes to current user “views” number field = 0 show popup.

It’s odd bc a user won’t actually appear in db and if you do carts in like a marketplace with a user field the user tied to current user even though they aren’t signed in the field appears blank in db it still tracks across sessions using cookies.

I can’t confirm 100% this will work with views but in theory it should, give it a try.

You could also use @keith plug-in to drop your own custom cookies. Can’t remember the name of it though.

Or the cookie dropper / reader by rapid dev.

Definitely not my plugin, wrong guy :sweat_smile:

My bad, had to lookup who actually owned it and edited😅

Guess I just had you on my mind :smirk:

1 Like

You mean I can get the cookie id by Current User? So, your idea is to store in database the cookie id and identify if is or not a new visitor?

Well if you use the “current user” method then no cookie ID is necessary. It’s built in standard with bubble.

Cookie id on necessary with the custom cookie drop/read but yes. (I’d try to make the current user route work first before this route)

I think what you’re thinking of @chris.williamson1996 is my Floppy plugin which writes values to various forms of browser storage. You could use this as an alternative to writing a value on Current User, but I’m not sure why you’d do that. (Floppy does not write cookies, which are not the correct way to store persistent local values these days.)

But the OP’s question isn’t about “cookies” per se, they are just throwing terms around. If some new user (browser) arrives at a Bubble site, that visitor is assigned a Current User which does persist for some time. (And yeah, that’s probably managed via a cookie, but you don’t access it that way.) You can just write some flag on the Current User when they dismiss the Annoying Popup (and you don’t show the popup if Current User has the Dismissed Annoying Popup flag set to yes).

Now, writing a value to localStorage would be persistent until that value is specifically cleared in some way from that particular browser, so that would potentially be more persistent than relying on Current User (which will, in fact, change over time), but again “why?”. I wouldn’t focus on someone’s “first time” visit as important in any meaningful way. We instead think about the experience for the logged in vs non-logged in user, right?

1 Like

If there is a user involved:

I have a wizard page where it shows after every login. But the user has a checkbox to skip it next time they log in.
image

The way I do it through a yes/no field in the user data type:
image

If it is checked, the login page checks this and immediately goes to dashboard instead of wizard. You can do something similar. The popup might display based on a flag like my Skip Wizard. If it is checked, don’t show popup again.

Or you can do the same automatically as well. On page load, you can display the popup only if the flag is no. Once the popup is displayed, you can automatically check this flag as yes and the next time, the popup won’t display.

OR you can do this with or without a current user:
The same thing can be done through cookies as well. I have used this plugin successfully for cookies: Local Storage & Cookies Plugin | Bubble

The logic will be similar. On page load, you will check a cookie like “first time” exists or not.

  • If it doesn’t exist, that means you didn’t create a cookie a yet (which means the popup is not displayed). Just display the popup and create the cookie.
  • If it exists, that means you have created one before, therefore the popup is displayed before, so don’t display the popup again.

There is always technically a user involved even if not logged in. (Refer to my first comment) user doesn’t need to exist to track

2 Likes

You are right. I actually meant if you want to include your user data type design involved :slight_smile:

1 Like

That’s exactly what I did and it did not work. On page load and having no values on localStorage (I use localStorage only for this, so, any values belong to the cookie I have set), write the cookie and open the newsletter popup.

Then, inspecting the localStorage variable, there is no values set!

So, when I refresh the page, the popup stills opening. Why?

This is not how you read a cookie with this plugin. You can’t just call LocalStorage A’s Values immediately.

You use Get action first to get it to the LocalStorage:

Then, you can get or check the value:

Simply, reading a cookie is two steps.

You can check the demo page of the plugin:
Editor: Bubble-essential-plugins | Bubble Editor
Demo: https://bubble-essential-plugins.bubbleapps.io/version-test/local-storage?debug_mode=true

It does not matter the values of the cookies.

As the attached1 file shows, the condition that I used is "Page is loaded and LocalStorage A's Values:first item is empty" means that the condition to proceed is: no cookie has been set.

So, if there is no cookie set, the Step 1 forces to Write LocalStorage A with key “first_visit” and value “yes” (for example) and show de newsletter popup.

At this point, I should have a cookie named “first_visit” with value “yes” set, right?

IF I refresh the page, the condition "LocalStorage A's Values:first item is empty" should not be empty, because, there is at least the value “yes” from the key “first_visit”.

However, the cookie stills not set.

This is the problem.

That’s what I am trying to say. That’s your misconception. LocalStorageA’s values is not holding all the cookies at the first load of the page. No matter what you do, it won’t read and find cookies if you don’t get the cookie to the local storage first by using Get a Local Storage action. Local storage A is empty unless you get a cookie, even if you have written a cookie value before.

3 Likes

Opening this back up as it was the top thread in Google when I searched how to achieve this. While it got me most of the way there, below is my solution for anyone else looking to control who sees the popup and when.

I achieved this using the Local Storage & Cookies Plugin mentioned in previous comments.

First I set up 2 LocalStorage elements - signedup & expiry

In the workflows, you want to create a Custom Workflow to Show the Popup when the user isn’t logged in, then write the LocalStorage expiry values.

The values here set the expiry key as 7 days from when the Popup shows and the view key to yes.

Expiry date is formatted as ddmmyyyyHHMMss so that we can convert to a number for a calculation in another workflow.

The only relevant action in this workflow is once the user signs up to our Newsletter, we set the signedup key to yes

Pulling this together, we do the following workflow once the page is loaded:

Get LocalStorage signedup value

Get LocalStorage expiry value - We’re getting both keys here

Delete Values in LocalStorage expiry

The expression here is checking for the first value, which is expiry. If the popup has shown before, then this value was set in the Custom workflow above as that day’s date (ddmmyyyyHHMMss).

This is converted to a number and checked if it is Less Than today’s date, formatted the same. If this is true, both values in LocalStorage expiry are deleted.

Show Popup

The last action in the workflow will schedule the Custom Event “Show Popup” after 10 seconds, only when the 2 LocalStorage Values are not Yes

That’s pretty much it and it functions for me, but any questions just shout!

Thanks for posting the guide!

Though, unless you’ve checked the ‘do not set cookies on new users by default’ checkbox in the editor, just using Current User’s popupShown is no and showing the popup and updating Current User’s popupShown to yes is likely the easiest and most maintainable way to create this feature.

I’ve built this type of feature recently for a few clients and I’ve done some complex stuff with it too, like showing it after the user has been on the site for X number of minutes, which does track them from page to page and really does show only after the time limit. Using the approach of Current Users popupShown is no to show the popup and updating the value to yes when the popup is shown is not the best way to approach it, for at least a few reasons.

  1. It costs WUs to implement when that is unnecessary
  2. It will mean that any user not logged in will be shown the popup whether they have seen it or not.
  3. It means when the user is logged in and then subsequently logs out, the popup will be shown because at that point the logged out user is not the same user that the value was update to yes for, and so would either be empty or the default value of no if you set a default value.

The best approach is to use local storage. Keep in mind that local storage is both device and browser based, so a user who is on the same device but a different browser, the cookies are not set. But, still best approach is to use the local storage. The conditions in the original post were incorrect to use ‘when page is loaded and the local storage value is empty’ because as others pointed out, the local storage value needs to be retrieved first.

What I do is have a condition that ‘when the local storage plugin element is visible’ to run an action to read the local storage value and I use the plugin (I use a paid plugin) trigger for ‘when local storage value is read’ to have an action to show the popup if the local storage value is not yes. It is important to use is not yes, because you only set the local storage value when the popup is made visible to yes, which means, otherwise it is empty. And be sure to not set an expiration date unless you actually want the cookie to expire.

Yes, this is a good reason to use the cookie

This is exactly why I used the Local Storage method. Allows customisation of when a non logged in User will be shown the popup - and if they will be shown it again in the future.

I might be naive here, but I don’t know of a way to track this across multiple browsers or devices for a non logged in user?