This feature is available in our paid editions. Contact us here, and we'll be delighted to assist you!

This documentation explains how to embed the Activepieces iframe inside your application and customize it.

Configure SDK

Adding the embedding SDK script will initialize an object in your window called activepieces, which has a method called configure that you should call after the container has been rendered.

The following scripts shouldn’t contain the async or defer attributes.

These steps assume you have already generated a JWT token from the backend. If not, please check the provision-users page.

<script src="">
  prefix: "/",
  instanceUrl: 'INSTANCE_URL',
  embedding: {
    containerId: "container",
    builder: {
      disableNavigation: false,
      hideLogo: false,
      hideFlowName: false
    dashboard: {
      hideSidebar: false
    hideFolders: false,
    navigation: {
      handler: ({ route }) => {
          // The iframe route has changed, make sure you check the navigation section.


configure returns a promise which is resolved after authentication is done.

Please check the navigation section, as it’s very important to understand how navigation works and how to supply an auto-sync experience.

Configure Parameters:

Parameter NameRequiredTypeDescription
prefixstringSome customers have an embedding prefix, like this <embedding_url_prefix>/<Activepieces_url>. For example if the prefix is /automation and the Activepieces url is /flows the full url would be /automation/flows.
instanceUrlstringThe url of the instance hosting Activepieces, could be if you are a cloud user.
jwtTokenstringThe jwt token you generated to authenticate your users to Activepieces.
embedding.containerIdstringThe html element’s id that is going to be containing Activepieces’s iframe.
embedding.builder.disableNavigationbooleanHides the folder name and back button in the builder, by default it is false.
embedding.builder.hideLogobooleanHides the logo in the builder’s header, by default it is false.
embedding.builder.hideFlowNamebooleanHides the flow name and flow actions dropdown in the builder’s header, by default it is false.
embedding.dashboard.hideSidebarbooleanControls the visibility of the sidebar in the dashboard, by default it is false.
embedding.hideFoldersbooleanHides all things related to folders in both the flows table and builder by default it is false.
navigation.handler({route:string}) => voidIf defined the callback will be triggered each time a route in Activepieces changes, you can read more about it here