By default, navigating within your embedded instance of Activepieces doesn’t affect the client’s browser history or viewed URL. Activepieces only provide a handler, that trigger on every route change in the iframe.

​
Automatically Sync URL

You can use the following snippet when configuring the SDK, which will implement a handler that syncs the Activepieces iframe with your browser:

The following snippet listens when the user clicks backward, so it syncs the route back to the iframe using activepieces.navigate and in the handler, it updates the URL of the browser.

activepieces.configure({
  prefix: "/",
  instanceUrl: 'INSTANCE_URL',
  jwtToken: "GENERATED_JWT_TOKEN",
  embedding: {
    containerId: "container",
    builder: {
      disableNavigation: false,
      hideLogo: false,
      hideFlowName: false
    },
    dashboard: {
      hideSidebar: false
    },
    hideFolders: false,
    navigation: {
      handler: ({ route }) => {
        if (!window.location.href.endsWith(route)) {
          window.history.pushState({}, "", window.location.origin + route);
        }
      }
    }
  },
});

window.addEventListener("popstate", () => {
  const route = activepieces.extractActivepiecesRouteFromUrl({ vendorUrl: window.location.href });
  activepieces.navigate({ route });
});

If you use activepieces.navigate({ route: '/flows' }) this will tell the embedded sdk where to navigate to.

Here is the list for routes the sdk can navigate to:

RouteDescription
/flowsFlows table
/flows/{flowId}Opens up a flow in the builder
/runsRuns table
/runs/{runId}Opens up a run in the builder
/connectionsConnections table
Embed BuilderCustomize Pieces