FlowGenie SDK

FlowGenie provides a server-friendly SDK plus React helpers for rendering and submitting forms.

Install

npm add flowgenie

Get an API key

1. Go to Settings → API Keys: https://app.flowgenie.pro/settings/api
2. Click Create API Key

SDK usage

import { fetchForm, submitForm, fetchFlow, submitFlow, createClient } from 'flowgenie'

const client = createClient({
  apiKey: process.env.FLOWGENIE_API_KEY
})

const formConfig = await client.fetchForm({ id: 'form-id' })
await client.submitForm({
  id: 'form-id',
  data: {
    name: 'Ada Lovelace',
    email: '[email protected]'
  }
})

const run = await client.submitFlow({ id: 'flow-id', inputs: { name: 'Ada' } })

React usage

import { Form } from 'flowgenie/react'

export default function ContactForm() {
  return <Form slug="contact-us" successUrl="/contact/success" />
}

To fully control fetching, pass a preloaded config:

import { fetchForm } from 'flowgenie'
import { Form } from 'flowgenie/react'

const form = await fetchForm({ id: 'form-id', apiKey: process.env.FLOWGENIE_API_KEY })

export default function ContactForm() {
  return <Form config={form} successUrl="/contact/success" />
}

For private forms, fetch the config server-side with an API key and pass it to Form.

CSS class names

The Form component applies a default fg- prefix. Override it with classNamePrefix or classNameKey.

• Layout: fg-form, fg-page, fg-section, fg-section-header, fg-section-title, fg-section-description, fg-row, fg-question
• Labels and helpers: fg-label, fg-label-text, fg-label-required, fg-sublabel, fg-helper, fg-tooltip, fg-tooltip-icon, fg-tooltip-content
• Inputs and groups: fg-input, fg-radio-group, fg-radio-option, fg-button-group, fg-button, fg-button-selected, fg-checkbox-group, fg-checkbox-option, fg-checkbox
• Toggles: fg-toggle, fg-toggle-input, fg-toggle-track, fg-toggle-thumb, fg-toggle-label
• Selects and lists: fg-list, fg-list-item, fg-list-item-selected, fg-list-check, fg-dropdown, fg-dropdown-trigger, fg-dropdown-menu, fg-dropdown-item, fg-dropdown-item-selected, fg-dropdown-check
• Ordered lists: fg-ordered-list, fg-ordered-item, fg-ordered-handle, fg-ordered-index, fg-ordered-label
• Sliders: fg-slider, fg-slider-input, fg-slider-labels
• Code editor: fg-code, fg-code-editor, fg-code-toolbar, fg-code-language
• File upload: fg-file-upload, fg-file-input, fg-file-list, fg-file-item, fg-file-name, fg-file-meta, fg-file-clear
• Signature: fg-signature, fg-signature-canvas, fg-signature-clear
• Rich content: fg-header, fg-header-1, fg-header-2, fg-header-3, fg-header-4, fg-header-5, fg-header-6, fg-paragraph, fg-divider, fg-markdown, fg-image
• States: fg-submit, fg-error, fg-submit-error, fg-loading, fg-options-empty, fg-options-loading