> ## Documentation Index
> Fetch the complete documentation index at: https://docs.embeddables.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Steps>
  <Step title="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.
  </Step>

  <Step title="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!
  </Step>
</Steps>

## How does it work?

When turned on, this works by automatically updating the URL with an <Tooltip tip="Anchor links start with a '#' in the URL (e.g. 'mysite.com/about#summary') and
link to something within a webpage, such as a section or heading."> anchor link</Tooltip>
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.

<Note>
  There are **certain edge-cases** to be aware of with this feature - details to
  be added to this page soon!
</Note>

<Info>
  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.
</Info>