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:

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