[UPDATED v2.2.0] 😃 Sudsy Page router for SEO-friendly clean URLs! (by Tech-Tonic)

sudsy · April 16, 2019, 3:09pm

Just a quick note that I’ve added compatibility information to the description. Basically, this plugin works with all modern browsers. It does NOT work with Internet Explorer.

sudsy · April 24, 2019, 6:59pm

Just wanted to follow up on this to report that I can now say with confidence, “Yes, indeed.” See this forum post.

rio · May 10, 2019, 9:13am

Hi, @sudsy

Is this plugin usable for html element??

I got my app “reloaded” when I clicked on the link written in the html element.
It worked fine if I use link element.

Is there a way to avoid the reloading, or is this made only for the link element??

My app is a single page app, and I really need your plugin!!

sudsy · May 10, 2019, 2:25pm

Hi @rio, as you discovered, it works only with Bubble’s Link element - not just any anchor tag on the page (such as one appearing in an HTML element).

If you have a unique problem or challenge, however, please post to the plugin help forum with the details, and I’d be glad to see if I can help you come up with a solution or work-around.

There’s often more than one way to accomplish something in Bubble (as with most programming).

rio · May 19, 2019, 8:56am

Finally, I got the solution for HTML element.

Thanks! Sudsy Page rocks!

danielowega · May 28, 2019, 6:15am

onClick="history.pushState('','','https://yourapp.com/page/item')">

This is working for me thank you @Rio. I now hide the annoying link preview.

danielowega · June 23, 2019, 1:47am

Hi @rio do you know how this code would look using toolbox run javascript.
We have a button here that is an image.

rio · June 23, 2019, 5:16am

Hi @danielowega,

You mean to change the URL? Sorry, I don’t know how to do that with javascript.

Why don’t you just place a regular shape element on the image with the workflow and replace it by Link element later.

This is how it looks like with the link. Note that this link has a workflow since it is replaced from a “shape”.

danielowega · June 23, 2019, 1:17pm

Thanks yes I could do that but I’m sure there is a way with javascript. @keith I think you are proficient in this, could you explain please?

danielowega · June 23, 2019, 2:15pm

@Rio I have solution! The code used before was correct but the url we tested with was causing an error and we never checked console.

VM622:2 Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'https://yourapp.com/page/item' cannot be created in a document with origin 'https://storywall.app' and URL 'https://storywall.app/version-test/test'.
at HTMLButtonElement.eval (eval at <anonymous> (eval at b.create_code (https://dhtiece9044ep.cloudfront.net/package/run_js/290513b1c2ddb3f484b957c5c8fd24edd6d8c803e8b5e893061fdc3fc3d8c4c0/xfalse/x5:17:1063907)), <anonymous>:2:9)
at HTMLButtonElement.dispatch (https://dhtiece9044ep.cloudfront.net/package/run_js/290513b1c2ddb3f484b957c5c8fd24edd6d8c803e8b5e893061fdc3fc3d8c4c0/xfalse/x5:11:10315)
at HTMLButtonElement.q.handle (https://dhtiece9044ep.cloudfront.net/package/run_js/290513b1c2ddb3f484b957c5c8fd24edd6d8c803e8b5e893061fdc3fc3d8c4c0/xfalse/x5:11:8342)

Here it is:

rio · June 24, 2019, 3:04am

Great! You gave me some insight here.

stone · June 26, 2019, 1:35pm

@sudsy I’m using this plugin, seems to work pretty well, thank you.

Can you make the element resizable? It’s pretty big and could get in the way.

sudsy · June 26, 2019, 1:53pm

Thanks for the feedback, @stone. That’s not an unreasonable request. FWIW, what I do (and would suggest considering in the interim) is simply “Send to back” and stash it in a corner somewhere. Then, it’s not in the way and won’t be easily clickable. As long as a portion of it remains visible between other elements on the page, it can easily be accessed when needed.

stone · June 26, 2019, 2:00pm

That’s what I do at the moment, just send to back. But due to it’s fixed width it could mess with responsive settings, say with collapsing groups.

mebeingken · June 26, 2019, 2:08pm

I haven’t used this plugin, but for many others I place the element in a popup that is never shown, or a floating group beneath the page to avoid responsive issues.

stone · June 26, 2019, 2:18pm

Every plugin element should be resizable and responsive by default. I don’t see a reason not to.

sudsy · June 26, 2019, 3:55pm

Except that neither makes sense in the context of a plugin with no runtime UI. It seems to me a proper solution would enable the developer to designate an “element” of a plugin as having no visual interface. Seems to suggest the notion of a “faceless” plugin element wasn’t anticipated in Bubble’s early days.

At any rate, thanks for the helpful input, @stone and @mebeingken.

newlee · July 6, 2019, 11:14pm

Do I have to add the plug-in element to the 404 page? and
Why do I get the double slash symbol in the url “//” ?
Capture
I setup the link button as same as yours.

sudsy · July 6, 2019, 11:46pm

Hi @newlee,

What’s the desired URL structure and behavior? What exactly is it you’re trying to accomplish?

sudsy · July 7, 2019, 12:00am

Ah, I see. After taking a closer look, it appears you’re attempting to use the plugin on the home (index) page. As stated in the product announcement at top of this thread, that won’t work…