FG API

Appearance

Flow Builder Overview ​

The Flow Builder is FG API's visual interface for creating and configuring APIs. It guides you through a 6-step process to build powerful APIs without writing code.

Flow Builder Interface ​

The Flow Builder consists of:

  • Step Navigation: Shows your progress through the 6 steps

  • Current Section: Displays the active configuration step

  • Progress Indicator: Visual progress bar

  • Action Buttons: Navigate between steps and complete setup

The 6-Step Process ​

Step 1: Endpoint Setup ​

Purpose: Define your API endpoint basics

What you configure:

  • Endpoint name (URL path)

  • Description

  • Basic settings

Example:

  • Name: user-feedback

  • Description: "Collect user feedback and ratings"

Step 2: Field Configuration ​

Purpose: Define what data your API accepts

What you configure:

  • Field names and types

  • Data validation rules

  • Required vs optional fields

  • Field options (for select fields)

Example fields:

  • name (text, required)

  • email (text, required)

  • rating (single_select: 1-5 stars)

  • feedback (text, optional)

Step 3: Form Integration ​

Purpose: Connect your API to forms and external services

What you configure:

  • Form connection settings

  • Field mapping between forms and API

  • Data transformation rules

  • Integration endpoints

Example integrations:

  • Typeform webhooks

  • Google Forms

  • Custom HTML forms

  • Third-party form builders

Step 4: Validation Rules ​

Purpose: Set up advanced data validation and business logic

What you configure:

  • Field length limits and format validation

  • Custom validation rules

  • Error messages and responses

  • Data sanitization

Example validations:

  • Email format validation

  • Phone number formatting

  • Required field checking

  • Custom business rules

Step 5: Response Configuration ​

Purpose: Configure how your API responds to requests

What you configure:

  • Success/error response formats

  • HTTP status codes

  • Response headers

  • Data transformation and filtering

Example responses:

  • JSON success responses

  • Error handling

  • Data formatting

  • Response caching

Step 6: Testing & Deployment ​

Purpose: Test your API and deploy it live

What you do:

  • Send test requests with sample data

  • Preview responses and validate behavior

  • Deploy to production

  • Configure monitoring and analytics

Example testing:

  • Form submission testing

  • Error scenario testing

  • Performance validation

  • Integration verification

Moving Between Steps ​

  • Next: Click "Continue" to move to the next step

  • Previous: Click "Back" to return to previous step

  • Jump: Click any step number to jump directly to that step

Saving Progress ​

  • Your progress is automatically saved

  • You can leave and return to continue later

  • All configurations are preserved

Completing Setup ​

  • Click "Complete Setup" in the final step

  • Your API is immediately deployed

  • You'll receive the endpoint URL

Step 1: Endpoint Setup ​

Endpoint Name ​

  • Format: lowercase with hyphens (e.g., user-feedback)

  • Requirements: Must be unique, no spaces or special characters

  • URL: Becomes part of your API endpoint URL

Description ​

  • Purpose: Explain what your API does

  • Usage: Helps team members understand the endpoint

  • Example: "Collects user feedback and ratings for products"

Best Practices ​

  • Use descriptive, clear names

  • Keep names consistent with your naming conventions

  • Write helpful descriptions for team collaboration

Step 2: Field Configuration ​

Adding Fields ​

  1. Click "Add Field"
  2. Configure field properties
  3. Click "Save Field"
  4. Repeat for additional fields

Field Properties ​

Field Name ​

  • Format: lowercase with underscores (e.g., first_name)

  • Usage: The parameter name in API requests

  • Requirements: Must be unique within the endpoint

Data Type ​

Choose the appropriate data type:

  • string: Text data (names, emails, messages)

  • number: Numeric data (ages, prices, quantities)

  • boolean: True/false values (yes/no questions)

  • array: Lists of items (multiple selections)

  • object: Complex data structures

Field Type ​

Choose how the field is presented:

  • text: Single line text input

  • single_select: Dropdown with one selection

  • multi_select: Dropdown with multiple selections

  • date: Date picker

  • object: Complex nested data

Required ​

  • Yes: Field must be provided in API requests

  • No: Field is optional

Active ​

  • Yes: Field is enabled and accepts data

  • No: Field is disabled (useful for temporary disabling)

Field Examples ​

Text Field ​

Field Name: name
Data Type: string
Field Type: text
Required: Yes
Active: Yes

Select Field ​

Field Name: category
Data Type: string
Field Type: single_select
Options: ["General", "Support", "Sales", "Other"]
Required: Yes
Active: Yes

Date Field ​

Field Name: event_date
Data Type: string
Field Type: date
Required: Yes
Active: Yes

Tips for Success ​

Planning Your API ​

  1. Define your data: What information do you need to collect?
  2. Identify required fields: Which fields are essential?
  3. Choose appropriate types: Match field types to your data
  4. Test your design: Think through how users will interact with your API

Field Naming ​

  • Use clear, descriptive names

  • Follow consistent naming conventions

  • Avoid abbreviations when possible

  • Use underscores for multi-word names

Data Types ​

  • Choose the most specific type that fits your data

  • Use string for text that might contain numbers

  • Use number only for actual numeric calculations

  • Use boolean for simple yes/no questions

Required Fields ​

  • Only mark fields as required if they're truly essential

  • Consider making optional fields that users might not always have

  • Provide clear error messages for missing required fields

Common Use Cases ​

Contact Form ​

  • name (text, required)

  • email (text, required)

  • subject (single_select, required)

  • message (text, required)

User Registration ​

  • first_name (text, required)

  • last_name (text, required)

  • email (text, required)

  • phone (text, optional)

  • newsletter (boolean, optional)

Product Feedback ​

  • product_id (text, required)

  • rating (single_select, required)

  • review (text, optional)

  • recommend (boolean, required)

Event Registration ​

  • name (text, required)

  • email (text, required)

  • event_date (date, required)

  • dietary_requirements (multi_select, optional)

Step 3: Form Integration ​

Connecting Forms to Your API ​

The Form Integration step allows you to connect external forms and services to your API endpoint. This is where you map form fields to your API fields and set up data flow.

Supported Integrations ​

Typeform Integration ​

  1. Get Webhook URL: Copy your API endpoint URL
  2. Configure Typeform: Add webhook URL in Typeform settings
  3. Map Fields: Match Typeform field IDs to your API fields
  4. Test Connection: Send a test submission

Example Typeform Mapping:

Typeform Field ID → API Field
"name_12345" → "name"
"email_67890" → "email"
"rating_11111" → "rating"

Google Forms Integration ​

  1. Enable API: Set up Google Forms API access
  2. Configure Webhook: Point to your API endpoint
  3. Field Mapping: Map Google Form fields to API fields
  4. Response Handling: Configure how responses are processed

Custom HTML Forms ​

  1. Form Action: Set form action to your API endpoint
  2. Field Names: Match form field names to API fields
  3. Method: Use POST method for data submission
  4. Headers: Configure appropriate content-type

Example HTML Form:

html
<form action="https://your-api.com/endpoint" method="POST">
  <input name="name" type="text" required>
  <input name="email" type="email" required>
  <select name="rating">
    <option value="1">1 Star</option>
    <option value="5">5 Stars</option>
  </select>
  <button type="submit">Submit</button>
</form>

Field Mapping Configuration ​

Automatic Mapping ​

  • Fields with matching names are automatically mapped

  • Case-insensitive matching (e.g., "Name" matches "name")

  • Supports common field name variations

Manual Mapping ​

  • Drag and drop interface for field mapping

  • Visual field mapping with preview

  • Support for nested field mapping

  • Custom field transformations

Data Transformation ​

  • Format Conversion: Convert data types (string to number)

  • Value Mapping: Map dropdown values to different formats

  • Data Cleaning: Remove extra spaces, format phone numbers

  • Default Values: Set default values for missing fields

Integration Settings ​

Webhook Configuration ​

  • URL: Your API endpoint URL

  • Method: POST (recommended for form data)

  • Headers: Content-Type, Authorization if needed

  • Retry Logic: Configure retry attempts for failed submissions

Security Settings ​

  • API Keys: Secure your endpoint with authentication

  • Rate Limiting: Prevent spam and abuse

  • IP Whitelisting: Restrict access to specific IPs

  • Data Validation: Validate incoming data format

Step 4: Validation Rules ​

Field Validation ​

Text Field Validation ​

  • Length Limits: Minimum and maximum character counts

  • Format Validation: Email, phone, URL patterns

  • Custom Patterns: Regex validation for specific formats

  • Required Fields: Ensure essential data is provided

Example Email Validation:

Field: email
Type: string
Validation: email format
Required: Yes
Error Message: "Please enter a valid email address"

Number Field Validation ​

  • Range Validation: Minimum and maximum values

  • Decimal Places: Limit decimal precision

  • Integer Only: Restrict to whole numbers

  • Currency Format: Validate monetary values

Select Field Validation ​

  • Option Validation: Ensure selected value is in allowed options

  • Multiple Selection: Validate multiple selections

  • Custom Options: Allow custom input with validation

  • Default Selection: Set default values

Business Logic Validation ​

Cross-Field Validation ​

  • Conditional Requirements: Make fields required based on other fields

  • Value Dependencies: Validate based on other field values

  • Date Logic: Ensure dates are logical (start before end)

  • Calculation Validation: Verify calculated fields

Example Conditional Validation:

If rating = "5" then feedback is required
If event_type = "paid" then payment_method is required
If age < 18 then parent_email is required

Custom Validation Rules ​

  • JavaScript Functions: Write custom validation logic

  • External API Calls: Validate against external services

  • Database Lookups: Check values against existing data

  • Complex Business Rules: Implement sophisticated validation

Error Handling ​

Error Messages ​

  • Field-Specific: Custom error messages per field

  • User-Friendly: Clear, actionable error messages

  • Localization: Support multiple languages

  • Context-Aware: Provide helpful suggestions

Error Response Format ​

json
{
  "success": false,
  "errors": [
    {
      "field": "email",
      "message": "Please enter a valid email address",
      "code": "INVALID_EMAIL"
    }
  ]
}

Step 5: Response Configuration ​

Response Formats ​

Success Responses ​

  • JSON Format: Structured data response

  • Custom Fields: Include specific data in responses

  • Metadata: Add timestamps, IDs, and status info

  • Filtering: Control what data is returned

Example Success Response:

json
{
  "success": true,
  "data": {
    "id": "sub_12345",
    "name": "John Doe",
    "email": "john@example.com",
    "rating": 5,
    "submitted_at": "2024-01-15T10:30:00Z"
  },
  "message": "Feedback submitted successfully"
}

Error Responses ​

  • HTTP Status Codes: Appropriate status codes (400, 422, 500)

  • Error Details: Specific error information

  • Field-Level Errors: Individual field validation errors

  • User Guidance: Helpful error messages

Response Headers ​

Standard Headers ​

  • Content-Type: application/json

  • CORS Headers: Allow cross-origin requests

  • Cache Control: Set appropriate caching policies

  • Rate Limiting: Include rate limit information

Custom Headers ​

  • API Version: Include API version information

  • Request ID: Unique identifier for tracking

  • Processing Time: Time taken to process request

  • Custom Metadata: Additional response information

Data Transformation ​

Output Formatting ​

  • Date Formatting: Standardize date formats

  • Number Formatting: Format numbers and currency

  • Text Processing: Clean and format text data

  • Nested Objects: Structure complex data

Field Filtering ​

  • Include/Exclude: Control which fields are returned

  • Sensitive Data: Remove or mask sensitive information

  • Conditional Fields: Include fields based on conditions

  • Computed Fields: Add calculated or derived fields

Step 6: Testing & Deployment ​

Testing Your API ​

Manual Testing ​

  1. Test Form Submission: Submit data through connected forms
  2. Validate Responses: Check response format and data
  3. Error Testing: Test validation rules and error handling
  4. Edge Cases: Test with unusual or boundary data

Automated Testing ​

  • Unit Tests: Test individual validation rules

  • Integration Tests: Test form-to-API connections

  • Load Testing: Test performance under load

  • Security Testing: Validate security measures

Test Data Examples ​

json
{
  "valid_submission": {
    "name": "John Doe",
    "email": "john@example.com",
    "rating": 5,
    "feedback": "Great product!"
  },
  "invalid_submission": {
    "name": "",
    "email": "invalid-email",
    "rating": 10
  }
}

Deployment Process ​

Pre-Deployment Checklist ​

  • [ ] All validation rules tested

  • [ ] Form integrations working

  • [ ] Error handling verified

  • [ ] Response formats confirmed

  • [ ] Security measures in place

Deployment Steps ​

  1. Review Configuration: Final check of all settings
  2. Deploy to Production: Make API live and accessible
  3. Update Documentation: Generate API documentation
  4. Monitor Performance: Set up monitoring and alerts

Post-Deployment ​

  • Health Checks: Verify API is responding correctly

  • Integration Testing: Test with live forms

  • Performance Monitoring: Monitor response times and errors

  • User Feedback: Collect feedback and iterate

Monitoring & Analytics ​

Performance Metrics ​

  • Response Times: Track API performance

  • Success Rates: Monitor successful vs failed requests

  • Error Rates: Track and analyze errors

  • Usage Patterns: Understand how your API is used

Business Metrics ​

  • Submission Volume: Track form submission rates

  • Field Completion: Analyze which fields are most/least used

  • Error Analysis: Identify common validation failures

  • User Behavior: Understand user interaction patterns

Next Steps ​