Page load challenge

samsgree.n · 2024-10-23T10:20:00.428Z

Hello, I have a technical challenge that I can’t quite work my head around.

I have a url that a user scans from a qr code, this take them to a bubble page which then passes them to a landing page and triggers a notification to me.

I am trying to work out how to prevent users pressing the back button on their browser and triggering the notification again? If the second page is refreshed, it doesnt trigger a notification as that is set on the url originally scanned.

Im wondering if I can do something with session cookies, or somehow prevent users from clicking back? Any ideas would be appreciated.

senecadatabase · 2024-10-23T11:21:20.302Z

I’m curious why you wouldn’t just set the notification for when the qr code is scanned?

You can use javascript to disable a back button but it isn’t considered the best practice.

samsgree.n · 2024-10-23T11:33:43.438Z

The idea was to use the initial page to set a notification flag, then trigger the notification from the second page based on the flag. That would prevent a refresh button triggering another notification.

I can’t get JavaScript to stop the back button working.

senecadatabase · 2024-10-23T11:45:50.323Z

Ok, I’m probably not understanding completely. My thinking was the user will probably only scan the qr code once and when they do you’ll be notified.

To disable the back button from working are you doing a when page is loaded so you can load the javascript?

You’ll need the toolbox plugin:

history.pushState(null, null, window.location.href);
history.back();
window.onpopstate = () => history.forward();

This code immediately forces the page to go back forward without actually taking the user back.

But, as I said it is seldom recommended to disable a back button for a variety of reasons.

boston85719 · 2024-10-23T13:55:12.909Z

samsgree.n:

this take them to a bubble page which then passes them to a landing page and triggers a notification to me.

Your navigation within Bubble should use the ‘go to page’ action and in that action, you should check the box to remove from URL browser history.

If you are using go to page action to send to the same page the user is on, this is available

Screen Shot 2024-10-23 at 8.53.42 PM344×197 10.2 KB

If it is to a different page it is not available, but if you put the action into a reusable element and use the dynamic page, it is available

Screen Shot 2024-10-23 at 8.54.09 PM615×487 26.9 KB

senecadatabase · 2024-10-23T14:15:12.993Z

Interesting.

From what I understand ‘replace the entry in the browser history’ only bypasses the previous page.

So if page A had the qr code they scanned…

they would then go to page b and redirected to page c.

Pressing the back button would skip page b and go back to page a.

So I’m wondering why someone wouldn’t just make things easy and send the notification when the qr code on page a was scanned?

samsgree.n · 2024-10-23T14:28:06.141Z

Appreciate the help and thoughts, the reason for the second page is to avoid someone hitting refresh and triggering the notification again - hence the redirect to the second page.

The second page wouldnt trigger the notification again if the page were refreshed as the notification trigger is oin the first page. The issue appears when the user hits back and goes to the first page again

senecadatabase · 2024-10-23T14:37:32.444Z

There are several ways to do the same thing.

So, I’m not saying your way is wrong.

But, what i’ve found out after years of working with some of the best apps on the market…

if a user clicks the back button and it doesn’t work, they simply close the app. Users have a preconceived idea of how something should work…when it doesn’t work like their experience has been they become frustrated. You then lose all the valuable data a landing page should give you.

Your results may differ.

julpereira82 · 2024-10-24T02:17:45.739Z

Can you try just adding a field to the user or the notification? Narrow it down within date if you want to.

Ex:

Create/send your Notification thing however you do it… but just add a conditional… Only when Current user’s Notification is No (add a yes/no field to user) - assuming that you change Notification’s sent (field) to Yes once it’s sent so it doesn’t do it again until it’s No again

Or… Only when Current user’s Notifications (list of notifications) doesn’t contain Notification whose created date is less than 24h. Etc. Some ideas.

If they’re not logged in maybe you can try to create a custom state? If This page’s notification_sent_already is No, run the workflow, otherwise it doesn’t. If it’s the first time, run the workflow and set notification_sent_already to Yes. So on.

samsgree.n · 2024-10-24T08:39:22.290Z

Thanks for that thoughts, yeah thats roughly what I have now - what i’m finding is that in some cases users scan the qr code, get forwarded to the notification page and then leave. A few weeks later they open the tab again, hit the back button and re-trigger the notification even though they’ve not scanned the qr for weeks.

bonjour_17 · 2024-10-24T08:56:39.886Z

Can the user be logged/signed up or are those anonymous prospects with no user account?

If they are anonymous you can simply say that 1 given user can only create 1 notification.

samsgree.n · 2024-10-24T13:44:06.382Z

They’re anonymous unfortunately.

I really need to come up with a way of making that landing “trigger” page self destruct so that it isnt accessible again via refresh or browser controls. Maybe somesort of session ID would resolve the refresh button one?

bonjour_17 · 2024-10-24T15:40:57.357Z

This is good, even anonymous users are given a unique ID by bubble. (it is stored locally, so if a person is not logged and comes every day on you site, he will have the same ID as long as he does not clear it’s browser data.

You can work your way with those users just like you would with any logged-in user.

So : once the QR-code is scanned, have a workflow that :
1- check if this user already has created a log
2- if 1=yes, do not create a new log. if 1=no, create a log