> ## Documentation Index
> Fetch the complete documentation index at: https://docs.membrane.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Integration UI

This article describes how to build UI for configuring a single integration after your tenant created a Connection.

If you are looking for how to create a Connection in the first place, check out [Custom Connection UI](/docs/ways-to-use-membrane/embedded-ui/connection-ui/custom-connection-ui).

## Get Integration

To get information about the integration and its connection, do the following:

```javascript theme={null}
const integration = await membrane.integration('hubspot').get()
```

<br />

To understand the state of the connection for a given integration, look at the following fields to display in the UI:

| Field                     | Description                                                                                         |
| ------------------------- | --------------------------------------------------------------------------------------------------- |
| `connection`              | If this integration has a connection established for the current user, this field will be non-empty |
| `connection.disconnected` | If a connection is disconnected and requires user to re-connect, this flag will be set to true.     |

## Re-connect and Disconnect

You can use the following code to re-connect an integration if it was disconnected or if the user wants to re-connect for any other reason:

```javascript theme={null}
await membrane.integration('hubspot').openNewConnection()
```

<br />

Or a custom version of this UI: [Custom Connection UI](/docs/ways-to-use-membrane/embedded-ui/connection-ui/custom-connection-ui).

You can disconnect the integration using the following code:

```javascript theme={null}
await membrane.connection('hubspot').archive()
```

<br />

## Manage Tenant-level Elements

To know which [Flows](/reference/workspace-elements/flows), [Actions](/docs/how-membrane-works/actions), or [Field Mappings](/reference/workspace-elements/field-mappings) are configured for the current integration, you can get their list this way:

```javascript theme={null}
const { items: flowInstances } = await membrane.connection('hubspot').flows.list()

const { items: actionInstances } = await membrane.connection('hubspot').actions.list()

const { items: fieldMappingInstances } = await membrane.connection('hubspot').fieldMappings.list()
```

<br />

Then you can use the corresponding elements API and UI to manage them:

| Element       | API                                                                                        | UI                                                                                        |
| ------------- | ------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- |
| Flow          | [Flows API](/reference/workspace-elements/flows)                                           | [Flows UI](/reference/workspace-elements/flows/flow-ui/custom-flow-ui)                    |
| Field Mapping | [Field Mappings API](/reference/workspace-elements/field-mappings/field-mapping-instances) | [Field Mappings UI](/reference/workspace-elements/field-mappings/field-mapping-instances) |