Hi,
I’ve built a webapp with bubble. It’s a single page where I display groups then my “apps” menuchoice(state) is “statename”.
Example: User click on “My profile”. It triggers a workflow where bubble set state “MyProfile” for my page “app”. Then I have a group called “My Profile” which is only visible when “app menuchoice is MyProfile”.
Whis works great. Good performance and so on, no pageloads. Feels modern.
But.
When the user click “BACK” in their browser they leave the entire site.
My ideal solution would be that back in the browser triggers a workflow moving the user to last state. The other solution would be to view a message “DONT CLICK ON BACK BUTTON”.
I’m no expert in Bubble by any means, but the approach that I use in my app is to combat this with UX design. I try to always have a natural way to get to a specific page of my one-page, so a visible menu perhaps looking enticing with icons for your different one-pagers. This becomes an issue of course if you’re taking them through a multi-page flow (like a sign up flow perhaps?). For this I would create my own back button in top left corner which gives full control over where to take the user, and try to nudge the user into using the app’s back button instead of the browsers.
I also try to get them onto my index page for every session and then into my app so if they click the back button, at least they still stay on my site and just need to load the /app again. Preferably with an eye catching button so they don’t have to spend time finding out how to get back in.
When the user is more comfortable with the app they will start going directly to mydomain.com/app
Use “go to page” to go to the same page. Send the necessary url parameters in it. It works great!
Example:
Say you have 3 container groups vertically stacked, hidden and set to collapse when hidden
Set your group 1 conditionality to show when "get url parameter tab is 1
Set your group 2 conditionality to show when "get url parameter tab is 2
Set your group 3 conditionality to show when "get url parameter tab is 3
Send a parameter called “tab” with a value of 1 when you want group 1 to be visible
Send a parameter called “tab” with a value of 2 when you want group 2 to be visible
Send a parameter called “tab” with a value of 3 when you want group 3 to be visible
Thanks, i’ll try this. I was using the “get path segments as list” to keep the URL nice and readable but that required me to use “open external website” instead of “go to page”
Hi guys, so would that url trick fix the issue where the user ends up leaving the website if they click the back button on the browser?
I might have to use tabs near the bottom to make it easier to move around on the app so users won’t click the back button but that design would ruin the effort I put in to make it look goooood lol
Yes until he/she reaches the point in which the back button takes them somewhere else. Example > they arrived and navigate clicking 3 times … then to be taken outside of your site would require 3+ back clicks.
Thanks! This works great also when sending to another page and hitting the back button. You can add the URL parameter (by using “go to page” being the current page) in the workflow and then send to the “real” next page. Then when the back button is hit on the next page, it retains the previous URL with the parameter set previously. When the previous page is loaded, you can grab the data from the parameter to set the state of your page back to what it was.
Hi. Can you, please, give an example of how to use URL parameters to save the state and how to use a custom state to hold the last referring state of a one-page app?
