Embed Iframe

To embed Activepieces into iframe, follow these steps:

Step 1: Embed SDK

Add the embed SDK script. This script helps synchronize the iframe and host routes, which initialize activepieces object and call configure method.

The script shouldn’t contain async or defer attributes as it must load before the iframe.

<script src="https://cdn.activepieces.com/sdk/embed-sdk.js">
</script>
<script>
activepieces.configure({
    prefix:"/",
    initialRoute: "/flows",
    hideSidebar:true
})
</script>

Configure Parameters:

Parameter Name	Required	Description
prefix	❌	You can choose a URL prefix for generating URLs. URL prefixes for embedding follow this pattern: <embedding_url_prefix>/<Activepieces_url>. For example, if the prefix is /automation and the Activepieces URL is /flows, the corresponding vendor URL will be /automations/flows.
initialRoute	❌	Its value must be one of the following: /flows, /runs, /connections, /flows/:id, /runs/:id. Any other path will result in a 404 page. If left undefined, it will redirect to /flows.
hideSidebar	❌	Its value can be either false or true, and it controls the visibility of the sidebar in the dashboard, by default it is false.
disableNavigationInBuilder	❌	Its value can be either false or true, and it hide the folder name and back button in the builder, by default it is false.

Step 2: Generate a JWT token

Follow the instructions in the generate jwt page

Step 3: Add an iframe

Add an iframe into your html, set its source to <your_instance_url>/embed. If you are using the cloud, just use https://cloud.activepieces.com/embed.

Insert the script before the embedding iframe.

<iframe src="<your_instance_url>/embed?jwtToken=YOUR_GENERATED_TOKEN" >

Query Parameters:

Parameter Name	Required	Description
jwtToken	✅	To create the JWT token, refer to this guide.