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

# Embed Builder

<Snippet file="enterprise-feature.mdx" />

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.

<Tip>
  The following scripts shouldn't contain the `async` or `defer` attributes.
</Tip>

<Tip>
  These steps assume you have already generated a JWT token from the backend. If not, please check the [provision-users](./provision-users) page.
</Tip>

```html
<script src="https://cdn.activepieces.com/sdk/embed/0.2.4.js">
</script>
<script>
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 }) => {
          // The iframe route has changed, make sure you check the navigation section.
        }
    }
  },
});

</script>
```

<Tip>
  `configure` returns a promise which is resolved after authentication is done.
</Tip>

<Tip>
  Please check the [navigation](./navigation.mdx) section, as it's very important to understand how navigation works and how to supply an auto-sync experience.
</Tip>

**Configure Parameters:**

| Parameter Name                      | Required | Type                       | Description                                                                                                                                                                                                                |
| ----------------------------------- | -------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| prefix                              | ❌        | string                     | Some 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`. |
| instanceUrl                         | ✅        | string                     | The url of the instance hosting Activepieces, could be [https://cloud.activepieces.com](https://cloud.activepieces.com) if you are a cloud user.                                                                           |
| jwtToken                            | ✅        | string                     | The jwt token you generated to authenticate your users to Activepieces.                                                                                                                                                    |
| embedding.containerId               | ❌        | string                     | The html element's id that is going to be containing Activepieces's iframe.                                                                                                                                                |
| embedding.builder.disableNavigation | ❌        | boolean                    | Hides the folder name and back button in the builder, by default it is false.                                                                                                                                              |
| embedding.builder.hideLogo          | ❌        | boolean                    | Hides the logo in the builder's header, by default it is false.                                                                                                                                                            |
| embedding.builder.hideFlowName      | ❌        | boolean                    | Hides the flow name and flow actions dropdown in the builder's header, by default it is false.                                                                                                                             |
| embedding.dashboard.hideSidebar     | ❌        | boolean                    | Controls the visibility of the sidebar in the dashboard, by default it is false.                                                                                                                                           |
| embedding.hideFolders               | ❌        | boolean                    | Hides all things related to folders in both the flows table and builder by default it is false.                                                                                                                            |
| navigation.handler                  | ❌        | `({route:string}) => void` | If defined the callback will be triggered each time a route in Activepieces changes, you can read more about it [here](/embedding/navigation)                                                                              |