Global element always active regardless of page

Need help
1

Hey,

I’m building a website that includes an internet radio station. The owner would like the radio element to be available on every page, and once you are playing the radio, it doesn’t stop playing until you “pause/stop” it, regardless of changing pages.

Is there a way to do with with global elements?

2

You would want an SPA (Single Page App) where each of your “pages” are actually just reusable elements that you show/hide via URL parameter. on the same real page.

1 Like
3

That’s what I was considering. I guess I’ll just need to add handling for the paths on page load haha

I like SPA but, I hate building them with bubble lmfao

1 Like
4

I do have a question, I’ve not much experience building an SPA on bubble, I know with angular, I can set up the routing, however, with everything on the same page, if I alter the URL to say

https://website.com/timetable

and the user were to refresh the page, they’d get sent to the 404 since the page “timetable” does not technically exist outside of the main index page.

Is there a way to handle this? I’m at a loss lol. Only built basic bubble apps so far.

5

On page 404 you can redirect the user to the main page and assign the ‘path’ as a parameter. Say ?v=timetable and then on page load, check for a v parameter and then change the url accordingly. This is just one way of doing it.

6

I usually do a URL parameter for each page so really your URL looks like
https://website.com/home?p=timetable (real page name is home)
with a condition on the timetable “page” to show it if p=timetable. Then on refresh you don’t have to do anything it will automatically show.

You could also do index page then I am pretty sure it becomes
https://website.com?p=timetable

I’ve seen people assign a datatype “Page” to the index and you set slugs to the page names, but then you end up with https://website.com/index/timetable because Bubble includes index in the name if the url if the page Thing is not empty

7

Y

Yes it’s not a issue in bubble.io because, unlike angular, the page itself always exists, you’re just using url params to dictate which screen should be visible.