Flow UI

To let a user configure a Flow Instance, call the openConfiguration method:

await membrane
  .connection('hubspot')
  .flow('{FLOW_KEY}')
  .openConfiguration()

Flow Instance editor

To edit a Flow Instance, call the openEditor method:

await membrane
  .flowInstance('{FLOW_INSTANCE_ID}')
  .openEditor()

Alternatively, you can embed the Flow Instance editor directly into a specific element:

function FlowBuilderEmbedding() {
  const targetId = 'flow-builder-emdedding'
  const membrane = useIntegrationApp()
  const targetRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    void membrane
      .flowInstance({
        flowKey: parameters.FLOW_KEY,
        integrationKey: parameters.INTEGRATION_KEY,
        autoCreate: true,
      })
      .embedEditor({
        mountTargetSelector: `[data-container-id="${targetId}"]`,
      })
  }, [
    parameters.FLOW_KEY,
    parameters.INTEGRATION_KEY,
    membrane
  ])

  return (
    <div
      style={{ height: '490px' }}
      data-container-id={targetId}
      ref={targetRef}
    ></div>
  )
}

Flow Instance editor

See Also