​
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.
1

Turn on the Sync Pages With The URL setting

You can find this in the Embeddable-Wide Options.To find these options, make sure to press Escape to deselect and pages or components, and then open the Options sidebar on the right-hand side.
2

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.