How To: Sync page changes with the browser URL
Updating the URL on page changes so that the browser back buttons control the embeddable
What’s the issue?
Because embeddables are, well, embedded in the webpage, they have a slightly strange relationship with the browser: namely, that pages inside an embeddable are distinct from webpages in the browser.
The main consequence of this that people tend to notice is that pressing the browser’s Back button doesn’t go back a page in the embeddable - in fact, it goes back to the previous webpage (normally a page without an embeddable on at all).
This is expected behavior, but in some situations can confuse users who were actually trying to just go back one step in the flow, and find that they’ve gone back to before the beginning.
The solution: syncing embeddable pages with the URL
The solution to this is our Sync Pages With The URL feature.
Turn on the Sync Pages With The URL setting
You can find this in the Embeddable-Wide Options.
Test for edge-cases and enjoy.
This feature can have some interesting edge-cases, especially in embeddables that already have custom logic to do with navigation (such as blocking users from going back after auth or payments). Tread carefully!
How does it work?
When turned on, this works by automatically updating the URL with an that corresponds to the current page key of the embeddable.
So, if a user heads to mywebsite.com/get-started then that will immediately become
mywebsite.com/get-started#intro_page, and when the user clicks next inside the embeddables their
URL bar will then show mywebsite.com/get-started#your_name_page, etc etc.
Why is this helpful? Well, it means that if the user presses the browser’s Back button,
it will just return to mywebsite.com/get-started#intro_page - a different anchor link but still on the same webpage.
Embeddables then listens for changes to the URL and updates the embeddable page accordingly, so the user will feel no difference between that and using the Back button inside the embeddable itself.
The browser’s Forward button works in the same way, meaning that users should have a smooth experience pretty much whatever they choose to do.
There are certain edge-cases to be aware of with this feature - details to be added to this page soon!
Another use-case (to be explained further on this page soon) for this feature is to make it easier to track analytics, since tools like Google Analytics tend to prefer to track user progress via changes to the URL.