> ## Documentation Index
> Fetch the complete documentation index at: https://activepieces-feat-selfhost-appwebhooks.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

<Tip>
  The script shouldn't contain async or defer attributes as it must load before the iframe.
</Tip>

```html
<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](./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`.

<Tip>
  Insert the script before the embedding iframe.
</Tip>

```
<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](./generate-jwt). |