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

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 integrationApp
  .integration('hubspot')
  .openNewConnection({
    allowMultipleConnections: true
  })

// Or, when using connect directly
await integrationApp
  .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 integrationApp.integration('hubspot').openNewConnection()

Or, if using connect():

await integrationApp
  .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 integrationApp.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