🌐 URL Router for Navigation - New Free Plugin from Zeroqode

Make your application better with prettified URLs and routing. You can use routing to define URLs that are semantically meaningful to users and that can help with search-engine optimization (SEO).
This plugin helps you change the URL without re-loading and also extracts the different sections of the URL split by ‘/’.

URL

For live demo please check out this page: URL Router for Navigation Plugin for Bubble | Zeroqode

This is plugin is suitable for use on all pages except index.

  • Add the Router element to any page you would like to perform routing in.
  • Use the “Change URL” action to make changes to the current URL and as a result, fire the “URL Changed” event automatically.
  • Use the “URL Changed” event to trigger workflow actions that will change what the user should be seeing based on the values of the different paths & parameters extracted from the URL.

Note: The first path is the path immediately after the page name. For example if the url is https://test.bubbleapps.io/library/books the 1st path will be books.

This plugin also handles dev version and live version which can be set in the router element properties.
So for example if the url is https://test.bubbleapps.io/version-test/library/books the 1st path will still be books.

Levon Terteryan

Founder @ Zeroqode

zeroqode-for-web-160x120
Bubble Templates
Zeroqode Blocks
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services

26 Likes

Ouch! :wink: Figured it would happen at some point though. Nice job. :grin: :+1:

2 Likes

Does this work in ALL web browsers? I remember using the Sudsy plugin (great plugin btw) but finding out shortly after that it didn’t work in IE.

1 Like

@sudsy Hey Steve, sorry mate, didn’t mean to attack your territory, it’s just that we use this functionality very often in the templates, before we were doing it with custom code, but when some users started complaining that there is too much code for no-code template we decided to pack it into a free plugin :slight_smile:
Thanks for understanding :pray:

we’ll double check this and I’ll get back to you shortly

4 Likes

No worries at all, Levon. No apology necessary. :slightly_smiling_face:

2 Likes

Hi @jamesbond,

This plugin uses the popstate event and you can find browser support for that here:

Cheers.

3 Likes

I was waiting for a confirmation from @levon tbh

Yinka is on our team.

Does the plugin work in IE? It’s better practice to let us know of any shortfalls the plugin has, rather than having us find out ourselves.

yes, it should work in IE. The best is to subscribe and give it a try. It won’t cost much anyways

3 Likes

Does anyone know how to navigate back to the original “index” page once the refresh button gets clicked?

@levon Does this work with across resusable elements? ie a button in a header that triggers a reusable element in the same page to show. I can get the URL to change, but Router on the page wont recognize the change.

1 Like

Hello Daniel,
Greetings from Zeroqode team!
As I understand, you’d like to add the router to the reusable elements not to add it to every page apart.
Sorry, but it’s not supposed to work this way. Could you do it in the order described by Levon in the first message please?

Kind regards,
Olga

Hello @Levon and @ZeroqodeSupport team, thanks for the plugin!

Could you add the option for history.replaceState(), my users are experiencing some weird things when the browser back button is pressed.

1 Like

Hi @Sophie,

Can you please provide more information about this weird things your users are experiencing? In the mean time you can install the Browser plugin by Copilot which I believe has a replaceState function.

2 Likes

When a user clicks back; my conditionals for displaying elements based on /path are sometimes too slow or out of sync with the rest of what is displaying, it’s hard to articulate.

Thanks for the tip about copilot browser plugin, this is what I need, I will use both of your plugins together.

@ZeroqodeSupport @levon i want to know if this is possible and how to do it, if it is possible, i want to still be on the same url when a page is refreshed, how can i do that… , right now when the page is refreshed(reloaded) the url moves back to the default one.

Maybe you need to adjust how you setup your conditions. You can use states which are set from workflow sections but you can also reference the Router element’s values directly.

Not sure what you mean. The URL shouldn’t change when the page is refreshed unless there is a workflow that changes the URL.

@Yinka hmmm that what i think but it seems am not doing something right. care to take a look?