Navigation

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 });
});

Navigate Method

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:

Route	Description
/flows	Flows table
/flows/{flowId}	Opens up a flow in the builder
/runs	Runs table
/runs/{runId}	Opens up a run in the builder
/connections	Connections table