🌐 URL Router for Navigation - New Free Plugin from Zeroqode

[levon]

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 ‘/’.

For live demo please check out this page: URL Router for Navigation Plugin for Bubble | Plugin for Bubble by 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

Bubble Templates
Zeroqode Blocks
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services

[sharma.himanshu0608]

HI @levon. Can you please share access to the demo editor for this plugin?

What do we have to fill in 1st and 2nd parameter field? And I’ve got the basic setup up and running and the URL changes but how do I send data and change what the user sees? To be clear, I have a Dashboard page where all the job applications saved by a user are displayed and another dynamic page which displays the data of that particular job application. The user clicks on a cell of a RG to dictate which application to open. Will this plugin work with that?

[VitalieProcopan]

Hello @sharma.himanshu0608.

Thanks for reaching out!

@sharma.himanshu0608

Can you please share access to the demo editor for this plugin?

Sure thing, take a look at the editor link here: https://zeroqode-demo-17.bubbleapps.io/router_for_navigation

@sharma.himanshu0608

What do we have to fill in 1st and 2nd parameter field?

These parameters are optional. So you actually don’t necessarily have to introduce them.

@sharma.himanshu0608

And I’ve got the basic setup up and running and the URL changes but how do I send data and change what the user sees? To be clear, I have a Dashboard page where all the job applications saved by a user are displayed and another dynamic page which displays the data of that particular job application. The user clicks on a cell of a RG to dictate which application to open. Will this plugin work with that?

Please check the plugin demo page for references.
https://zeroqode-demo-17.bubbleapps.io/router_for_navigation
From there you will be able to get to the editor and work your way to the features you requested.
Thanks for understanding,
Best regards,
Vitalie

[sharma.himanshu0608]

Hi @VitalieProcopan. I have setup the workflow to change the URL but I am stuck on how to change the displayed data.

In the demo app shared, there are a few conditional statements set that I cannot grasp.

What do these do and how do they work? I guess these are the one which help to display the data?

My app - Jobtrackable-beta | Bubble Editor

[alexandru]

Hi @sharma.himanshu0608,

Thanks for provided screenshots. The logic behind this conditionals is that the action of searching items in your database is made only when the n-th path is not empty, where n is the URL path number. In case of the demo app, the 1st path would be /category and the 2nd path is for instance /developer, so it checks whether it’s not empty and then searching for related items to display them on page.

Changing the displayed data is done in the “Appearance” section where you dynamically can set it to display whatever you desire. I would also suggest you take a look at our Bubble online courses at https://lab.zeroqode.com/ where you can grasp more knowledge on Bubble itself and build your app much faster and easier.

Hope it is helpful.

Best regards,
Alexandru

[sharma.himanshu0608]

And I am correct that we need to have all the content in one page only and keep them under different groups? Can I not have them under actual different pages? The new pages that we can create from the top left corner in the Bubble editor?

[alexandru]

Hi @sharma.himanshu0608,

You are free to build your app with as many pages you like while using this plugin. Yes, you are also able to have your content under different pages. The plugin has no restrictions on this matter. Feel free to inform me in case you have some questions regarding the plugin itself and I’ll try to help you. If you experience some difficulties with the Bubble development itself, there is a great community I would suggest you check here at https://forum.bubble.io/ that might be very helpful.

Best regards,
Alexandru

[shpak.serhiy]

Добрый день. Тестирую этот плагин. Он отлично изменяет URL. Но если попытаться открыть измененный адрес в браузере, то Bubble говорит, что такой страницы нет.

Вот пример:
Исходный URL: https://test-app.com/version-test/index/sample:user

Изменяю на: https://test-app.com/version-test/signup

Измененный URL ничего не открывает сам по себе. Можете подсказать что я упустил?

[alexandru]

Hi @shpak.serhiy,

Thanks for reaching out. Unfortunately, this issue is not reproducing on our side after testing the plugin. Without knowing more about your workflow, I can give you a tip that might help. Please check the editor of our demo app here https://bubble.io/page?type=page&name=router_for_navigation&id=zeroqode-demo-17&tab=tabs-1 to preview all settings to see how it works and perhaps try to replicate.
However, if it still doesn’t work, then please share screenshots of your app and workflow settings, also describe the issue with exact steps to reproduce. Additional details like browser and OS you are using would be helpful, so we better check on possible issue and get back to you with a solution asap.

Thank you for understanding.

Best,
Alex

[ben]

Anyone have solution to having a dynamic SEO for the page?

I cannot seem to get any data from my elements

[alexandru]

Hi @ben,

Thanks for reaching out. As I see, there was already an opened question in this thread : https://forum.bubble.io/t/url-router-for-navigation-new-free-plugin-from-zeroqode/60311/66.

We’ll check this request and reply on the matter asap.
Thanks

Best,
Alex

[Andrey]

Hi!

Perhaps someone knows. Can this plugin be used to implement multilanguage functionality on different URLs without the “lang” parameter in the URL?

The task is to make that all language versions of the site are available on the different URL branches. For example:
domain.com/ru/page1
domain.com/en/page1
…and redirect from index / to one of /lang/

Now, in order for Bubble to apply the user’s language before loading the page, you need to use the “lang=en_us” parameter in the URL. This is not a very working option. It is impossible to make a site addressing using the parameters in the URL, and this method is clearly not recommended by Google.

In other words. Is it possible with the help of this plugin to replace the parameter in the URL with the level of nesting in the URL of the /en/ for example, so that Bubble understands such an URL as if it contained a lang parameter?

[Serg]

Hi @Andrey, thanks for an interesting question and sorry for a delayed reply (due to the weekend).
I am afraid that the current plugin functionality is not supporting such option (multilanguage functionality on different URLs).

Allow me to propose you a workaround that might be useful somehow in your case :
See the Loom record for reference:

Hope it helps,

Regards,

[Serg]

@Andrey

Perhaps someone knows. Can this plugin be used to implement multilanguage functionality on different URLs without the “lang” parameter in the URL?

Just to add here - it can be possible if you add multiple actions “change URL” with the condition “Only when”. In those conditions, for each action, set which word it should add/change in your URL, depending on the language you are currently displaying.
It is just a suggestion, but I hope this direction will be useful for you.

Regards,

[Andrey]

Hello!

Thanks a lot for the idea.
I will experiment with changing URL in this way.

I hope this will work with the parameter in the URL, and I can add it to each current URL.

[dann9]

Looks like the demo may have a few issues?

[Greg.P]

Hi @dann9, thank you for your message, and thanks for noticing the empty condition on our Demo page.

We will need some more time to check it out and fix it.

Thanks again for noticing and letting us know

[Greg.P]

Hello @dann9, thank you for your patience.

@dann9

Looks like the demo may have a few issues?

We managed to fix the missing Conditional on our Demo page. Thanks again for noticing it, please take a look at the demo editor and check it for yourself.

Let us know if there is anything else I can assist you with.
Have a nice day!

[dann9]

Cheers thank you for that!

[lionot77]

Hi @levon
Thanks for the great Plugin.

In a home page with url “abcc.com/home” (for example), when customer click on a product, it will trigger “Change URL” action and url will become ““abcc.com/product/product1’s ID””. and when customer click on next product it will also trigger “Change URL” action and url will become ““abcc.com/product/product2’s ID””.

My question is: in above situation, after clicking many times on BACK button (trigger GO BACK Router A’s ), and URL arrives at the first URL(“abcc.com/product/product1’s ID”), after clicking again, we must go to HOME PAGE (with url “abcc.com/home”). BUT PROBLEM IS Router A can not do it.

Where I missed ?

TIA