Building a Connection UI

You can launch a working connection flow with a single line of code using Membrane’s pre-built UI. This guide explains how to build the minimal viable experience for users to connect to external apps.

Basic Example

Use the openNewConnection() method to open the default connection flow for an integration:

await membrane.integration('hubspot').openNewConnection()

This method will start the authentication flow and create the connection.

If required, it will also display a parameter form to collect any necessary inputs from the user.

Disconnecting

You can disconnect a customer account for an integration by archiving their connection. Here's how to achieved that:

await membrane.connection(integration.connection.id).archive();

Allowing Multiple Connections

If your app supports multiple connections to the same integration, pass the allowMultipleConnections option. Depending on your flow, this can be done with either openNewConnection() or connect():

// Using openNewConnection
await membrane
  .integration('hubspot')
  .openNewConnection({
    allowMultipleConnections: true
  })

// Or, when using connect directly
await membrane
  .integration('hubspot')
  .connect({
    parameters,
    allowMultipleConnections: true
  })

Reconnecting

When a connection becomes disconnected, you can re-connect it using the same method as creating a new one:

await membrane.integration('hubspot').openNewConnection()

Or, if using connect():

await membrane
  .integration('hubspot')
  .connect({ parameters })

Redirect Instead of New Window

To avoid opening a new popup window (e.g. in mobile web environments), you can use the sameWindow and redirectUri options. The URI will be used for redirection after the connection is created or fails:

await membrane.integration('hubspot').openNewConnection({
  sameWindow: true,
  redirectUri: window.location.href
})

Query parameters will be appended to the redirect URI:

• connectionId — if successful
• error and errorData — if connection fails