Skip to main content
Formora provides a centralized Integrations Hub (powered by the IntegrationsList component) where you can manage all your connections to third-party applications like Slack, Discord, and Custom Webhooks, as well as planned integrations like Zapier, Google Sheets, and Mailchimp. This hub makes it easy to oversee the status of your integrations, make changes, and ensure your automated workflows are running smoothly.

​
The Integrations Hub Overview

You can access the Integrations Hub from the main navigation menu in your Formora dashboard, typically at /dashboard/integrations. The IntegrationsPage (page.tsx) wraps this functionality and may include alerts or plan-based restrictions. What you’ll find in the Hub:
  • List of Configured Integrations: All integrations you’ve set up are listed, often as cards (renderIntegrationCard function in IntegrationsList).
  • Key Information at a Glance: Each card typically shows:
    • Name: The custom name you assigned.
    • Type: The application it connects to (e.g., Custom Webhook, Slack, Discord) with its icon.
    • Status: Indicates if the integration is Active or Inactive (based on the is_active field).
    • Associated Forms: Lists forms linked to the integration (form_ids field).
    • Events Triggering Integration: (e.g., form_submission).
  • Add New Integration Button: This toggles the showIntegrationForm state to display the detailed configuration form.
Mockup of the Integrations page in Formora, listing various connectable apps.

Formora's Integrations Hub displaying a list of configured integrations.

​
Common Management Actions

The IntegrationsList.tsx component handles the UI and core logic for these actions:
  1. Click “Add New Integration” (or a similar button if no integrations exist, as seen in the EmptyState component).
  2. This reveals the integration form (renderIntegrationForm function).
  3. Select the desired Integration Type (custom_webhook, discord, slack, etc.).
  4. Fill in general settings: Name, Webhook URL, select Forms to apply to, choose Events, and set Active status.
  5. Depending on the type, a specific builder appears:
    • CustomWebhookBuilder for custom_webhook type.
    • DiscordBuilder for discord type.
    • SlackBuilder for slack type.
  6. Configure the type-specific settings (payload, headers, embed options, block kit, etc.).
  7. Use the “Send Test Webhook” button and then “Add Integration” (calls handleSaveIntegration).
  • Click the “Edit” button (pencil icon) on an integration card.
  • This calls the handleEdit function, which populates the integration form with the selected integration’s data and sets editingIntegration state.
  • Modify any general settings or type-specific settings in the respective builders.
  • The preview component (CustomWebhookPreview, DiscordPreview, SlackPreview) updates live.
  • Click “Save Changes” (calls handleSaveIntegration).
    Changes to active integrations can immediately affect data flow.
  • Within the integration form (when adding or editing), there’s an “Active” switch.
  • This corresponds to the is_active boolean field for the integration.
  • Disabling: Temporarily pauses the integration. Formora will stop sending new data. Configuration is preserved.
  • Enabling: Resumes data flow.
  • The integration form includes a “Send Test Webhook” button (calls handleSendTestWebhook).
  • This sends a sample payload based on the current form configuration to the specified Webhook URL.
  • The TestWebhookResultDialog component displays the HTTP status, response headers, and body of the test request, indicating success or failure.
  • This is crucial for verifying the connection and data format before live activation.
  • Click the “Delete” button (trash icon) on an integration card.
  • This calls the handleDelete function, which will typically ask for confirmation.
  • Effect: Formora permanently removes the integration configuration and stops sending data for it.
  • Data Already Synced: Data previously sent to the third-party app remains there.
  • Revoking Access: Deleting the integration in Formora does not automatically revoke access from the third-party application’s side (e.g., deleting the Incoming Webhook in Slack/Discord if you want to fully sever the connection).
  • The IntegrationsPage (page.tsx) and IntegrationsList.tsx components check the user’s subscription plan (subscription?.plan).
  • If the plan (e.g., ‘free’) doesn’t permit integrations (!canUseIntegrations), the UI will disable adding/editing functionality and may show an upsell message (integrationsPageAlertConfigs or an EmptyState).

​
Troubleshooting Common Integration Issues

If an integration isn’t working as expected:
  1. Check Status in Formora: Is the integration marked “Active”? Are there any error indicators or alerts on the Integrations page?
  2. Verify Configuration: Double-check all settings in the integration form: Webhook URLs, API keys (if applicable), selected forms, event triggers, and any specific builder settings (payload, headers, embed details).
  3. Test Connection: Use the “Send Test Webhook” feature. Analyze the results in the TestWebhookResultDialog.
    • Success (e.g., HTTP 200): If the test works but live submissions don’t, check if the correct forms are selected and if the integration is active.
    • Failure (e.g., HTTP 4xx, 5xx): The error message, status code, and response body in the test dialog are key. Common issues include incorrect URL, authentication errors (missing/wrong tokens in headers), payload format errors, or server-side issues at your endpoint.
  4. Check Third-Party App:
    • Is the target service operational (no outages)?
    • Are there any error logs or notifications within the third-party app?
    • For Slack/Discord, ensure the Webhook URL is still valid and the target channel exists and the bot has permissions.
  5. Form Data: Ensure the specific form is active, collecting submissions, and the fields referenced by template variables exist and are being filled as expected.
  6. Subscription Plan: Verify your current Formora plan allows for the use of integrations.

​
Best Practices for Managing Integrations

  • Descriptive Naming: Use clear names for your integrations to easily identify their purpose.
  • Regular Reviews: Periodically review active integrations. Disable or delete those no longer needed.
  • Secure Credentials: For Custom Webhooks, if using secrets like API keys, use the {{secret:YOUR_KEY}} template variable in headers. Do not hardcode sensitive tokens directly into payloads if possible.
  • Test Thoroughly: Always test new or modified integrations with sample data.
Effectively managing your integrations ensures that Formora remains a well-connected and efficient part of your digital toolkit. The Template Variables Guide explains how to use dynamic data in your integration messages and payloads.
⌘I